Skip to content
This repository has been archived by the owner. It is now read-only.
Branch: master
Clone or download
Latest commit c54b137 May 6, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.buildkite
.github Add issue template (#83) Feb 16, 2018
flow-typed
src Add AtomicPrefixToken Mar 11, 2019
test
.babelrc.js Add AtomicPrefixToken Mar 11, 2019
.codecov.yml Add codecov Dec 5, 2017
.eslintrc.js Add initial implementation Nov 6, 2017
.flowconfig
.gitignore Add built browser CJS entry for Jest Mar 19, 2019
.npmrc
Dockerfile
LICENSE
README.md Add AtomicPrefixToken Mar 11, 2019
docker-compose.yml
package.json Use renamed cup May 6, 2019
renovate.json Update renovate.json Jan 12, 2018
yarn.lock

README.md

fusion-plugin-styletron-react

Build status

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;
}

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>;

You can’t perform that action at this time.