fusion-plugin-styletron-react

The Fusion plugin for Styletron, a component-oriented styling toolkit based on style objects. This plugin automatically sets up server-side rendering and provides an atomic CSS rendering engine to your styled components.

Installation

yarn add fusion-plugin-styletron-react styletron-react

Usage

Plugin registration

// src/main.js
import App from 'fusion-react';
import Styletron from 'fusion-plugin-styletron-react';

import root from './components/root';

export default () => {
  const app = new App(root);

  app.register(Styletron);

  return app;
}

Using monolithic CSS rendering engine

The default Styletron plugin export uses atomic CSS rendeding engine. If you'd like to use monolithic CSS rendering engine you'd need to use a named plugin export instead as it's shown below.

// src/main.js
import App from 'fusion-react';
import {StyletronMonolithicPlugin} from 'fusion-plugin-styletron-react';

import root from './components/root';

export default () => {
  const app = new App(root);

  app.register(StyletronMonolithicPlugin);

  return app;
}

Atomic class prefix

By default, it is assumed there is no global CSS that will result in collisions with the generated atomic class names. If this is not the case, collisions can be avoided by adding a prefix to the generated atomic class names via AtomicPrefixToken.

import Styletron, {AtomicPrefixToken} from 'fusion-plugin-styletron-react';

app.register(Styletron);
app.register(AtomicPrefixToken, "_");

Creating styled components

For API details and usage examples, see the official styletron-react documentation

// src/components/root.js
import react from 'react';
import {styled} from 'fusion-plugin-styletron-react';

const Panel = styled('div', props => {
  return {
    backgroundColor: props.$color || 'Silver'
  };
});

export default <Panel color="SteelBlue">Hello</Panel>;

Fusion.js