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 style9Compiler 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
Have a question?
Look at the FAQ, search the repo, or ask in discussions.