style9

0.18.2 verified Fri May 01 auth: no javascript

style9 is a compile-time CSS-in-JS library inspired by Facebook's Stylex, extracting atomic CSS strings during build with near-zero runtime overhead. Version 0.18.2 ships TypeScript types and supports Webpack, Rollup, Next.js, Gatsby, and Vite via dedicated plugins. It uses a style.create() pattern similar to styled-components but outputs deterministic class names and minimal runtime (just a single function that maps conditions to pre-computed class strings). Unlike runtime-heavy alternatives, style9 shifts all style computation to build time, making it suitable for performance-critical applications. The library is framework-agnostic and actively maintained on GitHub.

Common errors

error Error: Cannot find module 'style9/webpack' ↓

cause Import path is incorrect or missing style9 installation.

fix

Ensure style9 is installed: npm install style9. Use require('style9/webpack') or, if using ESM, use createRequire or dynamic import.

error Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type. ↓

cause Webpack is not configured to use Style9Plugin.loader for .tsx/.ts files.

fix

Add a rule in webpack.config.js: { test: /\.(tsx|ts|js|mjs|jsx)$/, use: Style9Plugin.loader }.

error Error: style9.create is not a function ↓

cause Incorrect import (using named import instead of default).

fix

Use 'import style9 from "style9"' and then style9.create(...).

error Error: style9: The style9() function expects a variable number of string or boolean arguments. ↓

cause Passing an object or array to the generated styles() function instead of individual keys.

fix

Call styles() with space-separated keys or conditional boolean: styles('key1', condition && 'key2').

Warnings

breaking style9 0.15.0 switched from synchronous to asynchronous CSS extraction, requiring changes in Webpack config (splitChunks.cacheGroups with type 'css/mini-extract'). ↓

fix Add splitChunks configuration as shown in the quickstart. See migration guide in docs.

breaking In style9 0.14.0, the API changed from style({}) to style9.create({}), and style9() usage was replaced with styles() calls. Old code using older API will not compile. ↓

fix Use style9.create() to define styles and call the returned function with keys. See usage guide.

gotcha style9 does not support dynamic style objects at runtime; all styles must be defined statically using style9.create(). Attempting to create dynamic style objects will throw an error during compilation. ↓

fix Define all possible style variations in style9.create() and use conditional logic in the styles() call with boolean expressions.

deprecated The webpack@4 code in documentation (with test: /\.css$/ instead of type: 'css/mini-extract') is deprecated and may be removed in future versions. Use webpack@5 with the type property. ↓

fix Update webpack to v5 and use type: 'css/mini-extract' in splitChunks cache group.

gotcha style9 requires a build step; it cannot be used in a plain browser environment without a bundler plugin. Styles are extracted at build time. ↓

fix Use one of the supported bundlers (Webpack, Rollup, Next.js, Gatsby, Vite) with the appropriate plugin.

breaking style9 0.13.0 removed support for Node.js < 12.0.0. Older Node.js versions will cause build failures. ↓

fix Upgrade Node.js to version 12 or later (currently >=14 recommended).

Install

npm install style9

yarn add style9

pnpm add style9

Imports

style9
wrong
```
const style9 = require('style9')
```
correct
```
import style9 from 'style9'
```
style9 is ESM-only; require() will fail. Use default import.
Style9Plugin
wrong
```
import { Style9Plugin } from 'style9/webpack'
```
correct
```
const Style9Plugin = require('style9/webpack');
```
This is a CommonJS export at style9/webpack; ESM import syntax may cause issues in Node.js with older module resolution.

style9 keyframes

wrong

import { keyframes } from 'style9'

correct

import style9 from 'style9'; style9.keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });

keyframes is a method on the default export, not a named export.

Quickstart

Shows basic usage of style9.create, conditional class names (using the variadic styles function), and minimal Webpack configuration with required plugins.

// style9.config.ts (optional)
export default {
  // custom config if needed
};

// App.tsx
import style9 from 'style9';

const styles = style9.create({
  container: {
    backgroundColor: '#222',
    color: 'white',
    padding: '20px'
  },
  button: {
    backgroundColor: '#333',
    border: 'none',
    padding: '10px 20px',
    cursor: 'pointer',
    ':hover': {
      backgroundColor: '#555'
    }
  }
});

function App() {
  return (
    <div className={styles('container')}>
      <button className={styles('button', true && 'button')}>Click me</button>
    </div>
  );
}

export default App;

// webpack.config.js (partial)
const Style9Plugin = require('style9/webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          type: 'css/mini-extract',
          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()]
};