{"id":26442,"library":"style9","title":"style9","description":"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.","status":"active","version":"0.18.2","language":"javascript","source_language":"en","source_url":"https://github.com/johanholmerin/style9","tags":["javascript","styles","css","css-in-js","babel","babel-plugin","gatsby","gatsby-plugin","next","typescript"],"install":[{"cmd":"npm install style9","lang":"bash","label":"npm"},{"cmd":"yarn add style9","lang":"bash","label":"yarn"},{"cmd":"pnpm add style9","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Webpack config to extract CSS into separate files during build.","package":"mini-css-extract-plugin","optional":true},{"reason":"Required in Webpack module rules to process CSS files.","package":"css-loader","optional":true}],"imports":[{"note":"style9 is ESM-only; require() will fail. Use default import.","wrong":"const style9 = require('style9')","symbol":"style9","correct":"import style9 from 'style9'"},{"note":"This is a CommonJS export at style9/webpack; ESM import syntax may cause issues in Node.js with older module resolution.","wrong":"import { Style9Plugin } from 'style9/webpack'","symbol":"Style9Plugin","correct":"const Style9Plugin = require('style9/webpack');"},{"note":"keyframes is a method on the default export, not a named export.","wrong":"import { keyframes } from 'style9'","symbol":"style9 keyframes","correct":"import style9 from 'style9'; style9.keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });"}],"quickstart":{"code":"// style9.config.ts (optional)\nexport default {\n  // custom config if needed\n};\n\n// App.tsx\nimport style9 from 'style9';\n\nconst styles = style9.create({\n  container: {\n    backgroundColor: '#222',\n    color: 'white',\n    padding: '20px'\n  },\n  button: {\n    backgroundColor: '#333',\n    border: 'none',\n    padding: '10px 20px',\n    cursor: 'pointer',\n    ':hover': {\n      backgroundColor: '#555'\n    }\n  }\n});\n\nfunction App() {\n  return (\n    <div className={styles('container')}>\n      <button className={styles('button', true && 'button')}>Click me</button>\n    </div>\n  );\n}\n\nexport default App;\n\n// webpack.config.js (partial)\nconst Style9Plugin = require('style9/webpack');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nmodule.exports = {\n  optimization: {\n    splitChunks: {\n      cacheGroups: {\n        styles: {\n          name: 'styles',\n          type: 'css/mini-extract',\n          chunks: 'all',\n          enforce: true\n        }\n      }\n    }\n  },\n  module: {\n    rules: [\n      { test: /\\.(tsx|ts|js|mjs|jsx)$/, use: Style9Plugin.loader },\n      { test: /\\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'] }\n    ]\n  },\n  plugins: [new Style9Plugin(), new MiniCssExtractPlugin()]\n};","lang":"typescript","description":"Shows basic usage of style9.create, conditional class names (using the variadic styles function), and minimal Webpack configuration with required plugins."},"warnings":[{"fix":"Add splitChunks configuration as shown in the quickstart. See migration guide in docs.","message":"style9 0.15.0 switched from synchronous to asynchronous CSS extraction, requiring changes in Webpack config (splitChunks.cacheGroups with type 'css/mini-extract').","severity":"breaking","affected_versions":">=0.15.0"},{"fix":"Use style9.create() to define styles and call the returned function with keys. See usage guide.","message":"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.","severity":"breaking","affected_versions":">=0.14.0"},{"fix":"Define all possible style variations in style9.create() and use conditional logic in the styles() call with boolean expressions.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Update webpack to v5 and use type: 'css/mini-extract' in splitChunks cache group.","message":"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.","severity":"deprecated","affected_versions":">=0.15.0"},{"fix":"Use one of the supported bundlers (Webpack, Rollup, Next.js, Gatsby, Vite) with the appropriate plugin.","message":"style9 requires a build step; it cannot be used in a plain browser environment without a bundler plugin. Styles are extracted at build time.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Upgrade Node.js to version 12 or later (currently >=14 recommended).","message":"style9 0.13.0 removed support for Node.js < 12.0.0. Older Node.js versions will cause build failures.","severity":"breaking","affected_versions":">=0.13.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure style9 is installed: npm install style9. Use require('style9/webpack') or, if using ESM, use createRequire or dynamic import.","cause":"Import path is incorrect or missing style9 installation.","error":"Error: Cannot find module 'style9/webpack'"},{"fix":"Add a rule in webpack.config.js: { test: /\\.(tsx|ts|js|mjs|jsx)$/, use: Style9Plugin.loader }.","cause":"Webpack is not configured to use Style9Plugin.loader for .tsx/.ts files.","error":"Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type."},{"fix":"Use 'import style9 from \"style9\"' and then style9.create(...).","cause":"Incorrect import (using named import instead of default).","error":"Error: style9.create is not a function"},{"fix":"Call styles() with space-separated keys or conditional boolean: styles('key1', condition && 'key2').","cause":"Passing an object or array to the generated styles() function instead of individual keys.","error":"Error: style9: The style9() function expects a variable number of string or boolean arguments."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}