style9

CSS-in-JS compiler inspired by Meta's stylex

CSS in JSAtomic CSS
johanholmerin/style9style9

README

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.

  1. ```javascript
  2. import style9 from 'style9';

  4. const styles = style9.create({
  5.   blue: {
  6.     color: 'blue',
  7.   },
  8.   red: {
  9.     color: 'red'
  10.   }
  11. });

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

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

  1. ```javascript
  2. /* JavaScript */
  3. document.body.className = isRed ? 'cRCRUH ' : 'hxxstI ';

  5. /* CSS */
  6. .hxxstI { color: blue }
  7. .cRCRUH { color: red }
  8. ```

Installation


  1. ```sh
  2. # Yarn
  3. yarn add style9

  5. # npm
  6. npm install style9
  7. ```

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.

  1. ```javascript
  2. const Style9Plugin = require('style9/webpack');
  3. const MiniCssExtractPlugin = require('mini-css-extract-plugin');

  5. module.exports = {
  6.   // Collect all styles in a single file - required
  7.   optimization: {
  8.     splitChunks: {
  9.       cacheGroups: {
  10.         styles: {
  11.           name: 'styles',
  12.           type: 'css/mini-extract',
  13.           // For webpack@4 remove type and uncomment the line below
  14.           // test: /\.css$/,
  15.           chunks: 'all',
  16.           enforce: true,
  17.         }
  18.       }
  19.     }
  20.   },
  21.   module: {
  22.     rules: [
  23.       {
  24.         test: /\.(tsx|ts|js|mjs|jsx)$/,
  25.         use: Style9Plugin.loader,
  26.       },
  27.       {
  28.         test: /\.css$/i,
  29.         use: [MiniCssExtractPlugin.loader, 'css-loader']
  30.       }
  31.     ]
  32.   },
  33.   plugins: [
  34.     new Style9Plugin(),
  35.     new MiniCssExtractPlugin()
  36.   ]
  37. };
  38. ```

Have a question?


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

[stylex]: https://www.youtube.com/watch?v=9JZHodNR184
[search]: https://github.com/johanholmerin/style9/search
[discussions]: https://github.com/johanholmerin/style9/discussions