style9

CSS-in-JS compiler

MIT 50 个版本
styles css css-in-js babel babel-plugin gatsby gatsby-plugin next nextjs nextjs-plugin webpack rollup rollup-plugin
主页
仓库
提交 Issue
安装
npm install style9
yarn add style9
pnpm add style9
bun add style9
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.

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.

版本列表
0.18.2 2023-04-30
0.18.1 2023-03-22
0.18.0 2023-03-19
0.17.0 2023-02-01
0.16.1 2023-01-14
0.16.0 2023-01-01
0.15.2 2022-11-22
0.15.1 2022-11-09
0.15.0 2022-09-24
0.14.0 2022-07-05
0.13.3 2022-06-12
0.13.2 2022-06-03
0.13.1 2022-05-26
0.13.0 2022-04-23
0.12.1 2022-04-04
0.12.0 2022-03-09
0.11.0 2022-03-06
0.10.14 2021-10-26
0.10.13 2021-09-18
0.10.12 2021-08-31
0.10.11 2021-06-24
0.10.10 2021-06-13
0.10.9 2021-06-11
0.10.8 2021-06-06
0.10.7 2021-05-28
0.10.6 2021-05-26
0.10.5 2021-05-20
0.10.4 2021-05-08
0.10.3 2021-03-26
0.10.2 2021-03-24
0.10.1 2021-03-21
0.10.0 2021-03-21
0.9.1 2021-03-18
0.9.0 2021-03-17
0.8.1 2021-03-03
0.8.0 2021-03-02
0.7.1 2021-02-25
0.7.0 2021-02-25
0.6.3 2021-02-20
0.6.2 2021-02-19
0.6.1 2021-02-11
0.5.10 2021-02-11
0.5.9 2020-12-29
0.5.8 2020-12-25
0.5.7 2020-10-17
0.5.6 2020-10-15
0.5.5 2020-10-03
0.5.4 2020-09-10
0.5.3 2020-09-05
0.5.2 2020-07-12