Styletron - Universal, high-performance JavaScript styles

Universal, high-performance JavaScript styles.

What is Styletron?

Styletron is a universal CSS-in-JS engine built from the ground up for high-performance. Features include:

Advanced critical rendering path optimization of server-rendered pages

• Dynamic generation of inlineable critical stylesheets with minimum possible size and parse times
  • Automatic generation of maximally compressed "atomic" critical CSS via declaration-level deduplication
  • Automatic declaration-level dead CSS elimination - only actually used declarations get included in output
• Native media query support for full critical CSS without JavaScript

Efficient dynamic client-side styles

• Hyper-granular memoization to avoid making unnecessary modifications to stylesheet
• Fast cache hydration of server-rendered styles to prevent re-rendering of server-rendered styles
• Use of CSSStyleSheet rule injection ensuring only new styles get parsed

For framework and library authors

The core Styletron module is a small, generic utility that is entirely independent of React so it can be integrated into virtually any web app. Additionally, many CSS-in-JS interfaces can be implemented with Styletron as a result of its low-level, unopinionated API.

Full API documentation for Styletron is available at http://styletron.js.org

Using Styletron with React

The styletron-react package provides a convenient way to use Styletron in React applications. The API is inspired by the wonderful styled-components library, except with style objects instead of template strings.

Note: this is just one high-level interface, many others are possible with Styletron.

Creating styled element components

Static styles

import {styled} from 'styletron-react';

const Panel = styled('div', {
  backgroundColor: 'lightblue',
  fontSize: '12px'
});

Hello World

Using props and context in styles

import {styled} from 'styletron-react';

const Panel = styled('div', (props) => ({
  backgroundColor: props.alert ? 'orange' : 'lightblue',
  fontSize: '12px'
}));

Danger!

Extending other styled element components

import {styled} from 'styletron-react';

const DeluxePanel = styled(Panel, (props) => ({
  backgroundColor: props.alert ? 'firebrick' : 'rebeccapurple',
  color: 'white',
  boxShadow: '3px 3px 3px darkgray'
}));

Bonjour Monde

App integration and server-side rendering

Client-side rendering

import Styletron from 'styletron-client';
import {StyletronProvider} from 'styletron-react';

const styleElements = document.getElementsByClassName('_styletron_hydrate_');

ReactDOM.render(
  
    
  
);

Server-side rendering

import Styletron from 'styletron-server';
import {StyletronProvider} from 'styletron-react';

function render() {
  const styletron = new Styletron();
  const appMarkup = ReactDOM.renderToString(
    
      
    
  );

  const stylesForHead = styletron.getStylesheetsHtml();

  return `${stylesForHead}head>${appMarkup}`;
}