Added renderToNodeList method

[danielstocks]

Description

This is an abstraction to complement to the existing renderToMarkup and renderToSheetList, specifically when using React, Preact or Inferno.

Since renderToMarkup returns a string we currently have to use dangerouslySetInnerHTML which prompts me to use renderToSheetList but creating your own <style> tags is error prone.

To adress this issue i've added a renderToNodeList method that returns actual stylesheets that can be injected directly into your Virtual DOM

Example

// Before:
import React from 'react';
import { renderToSheetList } from 'fela-dom';

export function StyleTags({ renderer }) {
  const sheetList = renderToSheetList(renderer);

  return sheetList.map(({ type, media, rehydration, support, css }) => (
    <style
      key={type + media}
      media={media}
      data-fela-rehydration={rehydration}
      data-fela-type={type}
      data-fela-support={support}
      dangerouslySetInnerHTML={{ __html: css }}
    />
  ));
}

//After:
import React from 'react';
import { renderToNodeList } from 'react-fela';

export function StyleTags({ renderer }) {
  return renderToNodeList(renderer);
));

Packages

fela-bindings
react-fela
preact-fela
inferno-fela
reason-fela

Versioning

Minor

Checklist

Quality Assurance

You can also run yarn run check to run all 4 commands at once.

• The code was formatted using Prettier (yarn run format)
• The code has no linting errors (yarn run lint)
• All tests are passing (yarn run test)
• There are no flow-type errors (yarn run flow)

Changes

If one of the following checks doesn't make sense due to the type of PR, just check them.

• Tests have been added/updated
• Documentation has been added/updated
• My changes have proper flow-types

[robinweser]

Thanks for your 3 PRs :)
Really appreciate your help!