style9

CSS-in-JS compiler inspired by Facebook's stylex, with near-zero runtime, atomic CSS extraction and TypeScript support. Framework agnostic.

Basic usage

For a complete walkthrough of the API, see Usage guide.

import style9 from 'style9';

const styles = style9.create({
  blue: {
    color: 'blue',
  },
  red: {
    color: 'red'
  }
});

document.body.className = styles('blue', isRed && 'red');

For the above input, the compiler will generate the following output:

/* JavaScript */
document.body.className = isRed ? 'cRCRUH ' : 'hxxstI ';

/* CSS */
.hxxstI { color: blue }
.cRCRUH { color: red }

Installation

# Yarn
yarn add style9

# npm
npm install style9

Compiler setup - required

The following is the minimally required Webpack setup for extracting styles to a CSS file. For Webpack options and Rollup, Next.js, Gatsby, and Babel plugins, see Bundler plugins.

const Style9Plugin = require('style9/webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // Collect all styles in a single file - required
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          type: 'css/mini-extract',
          // For webpack@4 remove type and uncomment the line below
          // test: /\.css$/,
          chunks: 'all',
          enforce: true,
        }
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.(tsx|ts|js|mjs|jsx)$/,
        use: Style9Plugin.loader,
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new Style9Plugin(),
    new MiniCssExtractPlugin()
  ]
};

Documentation

1. Background
2. Usage guide
3. Bundler plugins
4. TypeScript
5. Ecosystem
6. How it works
7. FAQ
8. Example apps

Have a question?

Look at the FAQ, search the repo, or ask in discussions.