style9

CSS-in-JS compiler inspired by Meta's stylex
GitHub
573
Created 5 years ago, last commit 10 months ago
12 contributors
260 commits
Stars added on GitHub, month by month
0
0
0
0
0
10
11
12
1
2
3
4
5
6
7
8
9
2023
2024
Stars added on GitHub, per day, on average
Yesterday
=
Last week
0.0
/day
Last month
0.0
/day
Last 12 months
0.0
/day
Package on NPM
style9
0.18.2
Monthly downloads on NPM
10
11
12
1
2
3
4
5
6
7
8
9
2023
2024
README

style9

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

Note

StyleX was open-sourced on 2023-12-5. Consider using that instead

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,Vite, 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.