How to use the fela.createRenderer function in fela

const isBrowser = (type, maxVersion, minVersion) => {
    if (!browser) {
      return false;
    }
    if (minVersion) {
      return (
        browser.name === type &&
        parseInt(browser.major, 10) <= maxVersion &&
        parseInt(browser.major, 10) >= minVersion
      );
    }

    return browser.name === type && parseInt(browser.major, 10) <= maxVersion;
  };

  const renderer = createRenderer({
    selectorPrefix: 'o',
    plugins: [
      extend(),
      embedded(),
      prefixer(),
      fallbackValue(),
      unit(),
      namedMediaQuery({
        // From
        ifLargeUp: '@media (min-width: 992px)',
        ifMediumUp: '@media (min-width: 768px)',
        ifSmallUp: '@media (min-width: 480px)',
        // To
        ifLargeDown: '@media (max-width: 1199px)',
        ifMediumDown: '@media (max-width: 991px)',
        ifSmallDown: '@media (max-width: 767px)',

const port = process.env.PORT || config.port;

  const networkInterface = createNetworkInterface({
    uri: `http://localhost:${port}/graphql`,
    opts: {
      credentials: 'same-origin',
      headers: request.headers,
    },
  });
  const client = new ApolloClient({
    networkInterface,
    dataIdFromObject: o => o.id,
    ssrMode: true,
  });
  const renderer = createRenderer();

  // First create a context for , which will allow us to
  // query for the results of the render.
  const reactRouterContext = createServerRenderContext();

  // We also create a context for our  which will allow us
  // to query which chunks/modules were used during the render process.
  const codeSplitContext = createRenderContext();

  // Create our React application and render it into a string.
  const reactApp = (

import React from 'react';
import { render } from 'react-dom';
import { createRenderer } from 'fela';
import { Provider, ThemeProvider } from 'react-fela';
import prefixer from 'fela-plugin-prefixer';
import fallbackValue from 'fela-plugin-fallback-value';
import { themeConfig } from './index-styles';

import './reset.css';
import './base.css';

const renderer = createRenderer({
  plugins: [prefixer(), fallbackValue()],
});
// The provider will automatically renderer the styles
// into the mountNode on componentWillMount
const mountNode = document.getElementById('stylesheet');

render(
  
    
      <div>Hello</div>
    
  ,
  document.getElementById('root')
);

const networkInterface = createBatchingNetworkInterface({
  uri: process.env.GRAPHQL_URL || '/graphql',
  batchInterval: 5,
  opts: {
    credentials: 'same-origin',
  },
});

const client = new ApolloClient({
  networkInterface,
  dataIdFromObject: o => o.id,
  ssrForceFetchDelay: 100,
  initialState: window.__APP_STATE__ ? { apollo: { data: window.__APP_STATE__ } } : null,
});

const renderer = createRenderer();
const mountNode = document.getElementById('css-markup');

function renderApp(TheApp) {
  // We use the code-split-component library to provide us with code splitting
  // within our application.  This library supports server rendered applications,
  // but for server rendered applications it requires that we rehydrate any
  // code split modules that may have been rendered for a request.  We use
  // the provided helper and then pass the result to the CodeSplitProvider
  // instance which takes care of the rest for us.  This is really important
  // to do as it will ensure that our React checksum for the client will match
  // the content returned by the server.
  // @see https://github.com/ctrlplusb/code-split-component
  rehydrateState().then(codeSplitState =>
    render(

const getFela = (Component, props) => {
  if (!props.renderer) {
    console.log('Warning: Fela static rendering requires a `renderer` to be passed through the `getInitialProps()` method.')
    return ''
  }
  const fela = require('fela')
  const felaDOM = require('fela-dom')
  const renderer = props.renderer || fela.createRenderer()
  renderToString(
    React.createElement(Component, props)
  )
  const tag = felaDOM.renderToMarkup(renderer)
  return tag
}

export default () => {
  const renderer = createRenderer({
    plugins: [
      embedded(),
      prefixer(),
      fallbackValue(),
      unit(),
      lvha(),
      validator(),
      logger()
    ],
    enhancers: [perf(), beautifier()]
  })

  renderer.renderStatic(
    {
      width: '100%',
      height: '100%',

constructor(fela?: IRenderer) {
    super();

    this.fela = fela || createRenderer();

    render(this.fela);
  }

width: '160px'
  }
});

const mapStylesToProps = props => renderer => ({
  container: renderer.renderRule(container),
  button: renderer.renderRule(button)
})

const Button = connect(mapStylesToProps)(({ styles }) => (
  <div>
    <button>Click me!</button>
  </div>
));

const renderer = createRenderer();
const mountNode = document.getElementById('stylesheet');

render(
  
    <button>
  ,
  document.getElementById('content')
);
</button>

module.exports = () => {
  const renderer = createRenderer()

  const rule = state => ({
    fontFamily: 'inherit',
    fontSize: 'inherit',
    display: 'inline-block',
    margin: 0,
    padding: 16,
    border: 0,
    borderRadius: 4,
    color: 'white',
    appearance: 'none',
  })

  const className = renderer.renderRule(rule, {
    primary: true
  })

export const createRenderer = (): Renderer => createFelaRenderer(rendererConfig)