How to use fela - 10 common examples

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(

"createComponent() can't render styles without the renderer in the context. Missing react-fela's  at the app root?"
        )
      }

      const usedProps = withProxy ? extractUsedProps(rule, theme) : []

      const rules = [rule]
      if (_felaRule) {
        rules.push(_felaRule)
      }
      if (extend) {
        typeof extend === 'function'
          ? rules.push(extend)
          : rules.push(() => extend)
      }
      const combinedRule = combineRules(...rules)

      // improve developer experience with monolithic renderer
      if (process.env.NODE_ENV !== 'production' && renderer.prettySelectors) {
        const componentName =
          typeof type === 'string' ? type : type.displayName || type.name || ''

        combinedRule.selectorPrefix = `${displayName}_${componentName}__`
      }
      // compose passThrough props from arrays or functions
      const resolvedPassThrough = [
        ...alwaysPassThroughProps,
        ...resolvePassThrough(passThroughProps, otherProps),
        ...resolvePassThrough(passThrough, otherProps),
        ...(withProxy ? resolveUsedProps(usedProps, otherProps) : [])
      ]

return createElement(FelaTheme, undefined, theme => {
        // TODO: could optimize perf by not calling combineRules if not necessary
        const className = renderer.renderRule(combineRules(style), {
          ...otherProps,
          theme,
        })

        // TODO: remove in 11.0.0
        const cls = customClass ? customClass + ' ' + className : className

        if (render instanceof Function) {
          return render({
            className: cls,
            children,
            theme,
            as,
          })
        }

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>