style9

library0.18.2jsnpmunverified

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.

web-framework serialization

npm install style9

github ↗package ↗

INSTALL

IMPORT

SIG · STYLE9

style9

web-frameworkjavascriptv0.18.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

style9

✓ import style9 from 'style9'

✗ const style9 = require('style9')

style9 is ESM-only; require() will fail. Use default import.

Style9Plugin

✓ const Style9Plugin = require('style9/webpack');

✗ import { Style9Plugin } from '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

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

✗ import { keyframes } from 'style9'

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

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()] };

Debug

Known issues

breakingstyle9 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.

affects: >=0.15.0

breakingIn 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.

affects: >=0.14.0

gotchastyle9 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.

affects: >=0.1.0

deprecatedThe 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.

affects: >=0.15.0

gotchastyle9 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.

affects: >=0.1.0

breakingstyle9 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).

affects: >=0.13.0

Errors

Common errors & fixes

Error: Cannot find module 'style9/webpack'

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.

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

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: style9.create is not a function

Incorrect import (using named import instead of default).

fix

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

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

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').

Upgrade

Version history

0.18.2latest on npm

Audit

Dependencies

mini-css-extract-pluginoptionalRequired for Webpack config to extract CSS into separate files during build.

css-loaderoptionalRequired in Webpack module rules to process CSS files.

Agent activity

16 hits · last 30 days

node

Resources

githubhttps://github.com/johanholmerin/style9 ↗

packagehttps://www.npmjs.com/package/style9 ↗