How to use the fela.createRenderer function in fela

To help you get started, we’ve selected a few fela examples, based on popular ways it is used in public projects.

github olymp / olymp / packages / fela / utils / create-fela.tsx View on Github external
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)',
github olymp / olymp / universally / src / react-middleware.js View on Github external
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 <ServerRouter>, which will allow us to
  // query for the results of the render.
  const reactRouterContext = createServerRenderContext();

  // We also create a context for our <CodeSplitProvider> 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 = (
    <CodeSplitProvider context={codeSplitContext}>
      <ServerRouter stringifyQuery={stringify} parseQueryString={parse} location={decodeURI(request.url)} context={reactRouterContext}>
        <ApolloProvider client={client}>
          <Provider renderer={renderer}>
            <DemoApp />
github chrisheninger / icon-magic / src / index.js View on Github external
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(
  <ThemeProvider theme={themeConfig}>
    <Provider renderer={renderer} mountNode={mountNode}>
      <div>Hello</div>
    </Provider>
  </ThemeProvider>,
  document.getElementById('root')
);
github olymp / olymp / universally / src / client.js View on Github external
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(
      <ReactHotLoader>
        <CodeSplitProvider state={codeSplitState}>
github c8r / x0 / lib / static / getCSS.js View on Github external
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
}
github robinweser / fela / examples / example-inferno / renderer.js View on Github external
export default () => {
  const renderer = createRenderer({
    plugins: [
      embedded(),
      prefixer(),
      fallbackValue(),
      unit(),
      lvha(),
      validator(),
      logger()
    ],
    enhancers: [perf(), beautifier()]
  })

  renderer.renderStatic(
    {
      width: '100%',
      height: '100%',
github milesj / aesthetic / packages / aesthetic-adapter-fela / src / NativeAdapter.ts View on Github external
constructor(fela?: IRenderer) {
    super();

    this.fela = fela || createRenderer();

    render(this.fela);
  }
github MicheleBertoli / css-in-js / react-fela / button.js View on Github external
width: '160px'
  }
});

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

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

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

render(
  <Provider renderer={renderer} mountNode={mountNode}>
    <Button />
  </Provider>,
  document.getElementById('content')
);
github raphamorim / mugiwara / benchmarks / lib / fela.js View on Github external
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
  })
github microsoft / fluent-ui-react / packages / react / src / utils / felaRenderer.tsx View on Github external
export const createRenderer = (): Renderer => createFelaRenderer(rendererConfig)

fela

State-Driven Styling in JavaScript

MIT
Latest version published 3 months ago

Package Health Score

90 / 100
Full package analysis