{"id":11186,"library":"jss","title":"JSS - JavaScript Style Sheets","description":"JSS (JavaScript Style Sheets) is a library for generating and managing CSS rules with JavaScript, offering a modular and component-based approach to styling. It allows developers to define styles directly within their JavaScript code, providing dynamic theming, server-side rendering support, and efficient style injection. The current stable version is 10.10.0, although version 10.10.1 explicitly marked the project as no longer maintained. Its key differentiators include a plugin-based architecture for extending functionality, support for various CSS features like nesting and global styles via plugins, and integration with frameworks like React through `react-jss`. It provides a powerful API to create, update, and remove stylesheets dynamically, enabling highly interactive and configurable UI styling. However, due to its abandoned status, new projects should consider actively maintained alternatives.","status":"abandoned","version":"10.10.0","language":"javascript","source_language":"en","source_url":"https://github.com/cssinjs/jss","tags":["javascript","jss","style","sheet","stylesheet","css","components","composable","css in js","typescript"],"install":[{"cmd":"npm install jss","lang":"bash","label":"npm"},{"cmd":"yarn add jss","lang":"bash","label":"yarn"},{"cmd":"pnpm add jss","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The 'create' function is the primary way to initialize a JSS instance for managing stylesheets. It's a named export.","wrong":"const jss = require('jss'); const create = jss.create;","symbol":"create","correct":"import { create } from 'jss'"},{"note":"The 'Jss' class represents the core JSS instance type, useful for type annotations in TypeScript. It is a named export, not a default export.","wrong":"import Jss from 'jss'","symbol":"Jss","correct":"import { Jss } from 'jss'"},{"note":"SheetsRegistry is essential for server-side rendering (SSR) to collect and serialize CSS from multiple stylesheets into a single string.","wrong":"const SheetsRegistry = require('jss').SheetsRegistry","symbol":"SheetsRegistry","correct":"import { SheetsRegistry } from 'jss'"}],"quickstart":{"code":"import { create } from 'jss';\nimport { SheetsRegistry } from 'jss';\n\n// 1. Create a JSS instance\nconst jss = create();\n\n// 2. Define your styles as a JavaScript object\nconst styles = {\n  button: {\n    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',\n    borderRadius: 3,\n    border: 0,\n    color: 'white',\n    height: 48,\n    padding: '0 30px',\n    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',\n    cursor: 'pointer',\n    '&:hover': {\n      boxShadow: '0 5px 7px 3px rgba(255, 105, 135, .5)',\n    },\n  },\n  container: {\n    margin: '20px',\n    textAlign: 'center',\n    fontFamily: 'sans-serif',\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    minHeight: '100px',\n  },\n};\n\n// 3. Create a stylesheet from your styles\nconst sheet = jss.createStyleSheet(styles, { link: true });\n\n// 4. Attach the stylesheet to the DOM (this injects the CSS)\nsheet.attach();\n\nconsole.log('JSS Stylesheet attached to DOM.');\nconsole.log('Generated CSS classes:', sheet.classes);\nconsole.log('Full generated CSS:\\n', sheet.toString());\n\n// Example: Dynamically update a style (if rules were functions)\n// For simple object styles, you might modify the object and re-attach\n// const dynamicSheet = jss.createStyleSheet({ dynamicColor: (props) => ({ color: props.color }) });\n// dynamicSheet.update({ color: 'blue' }).attach();\n\n// For server-side rendering, you'd collect sheets\nconst sheets = new SheetsRegistry();\nsheets.add(sheet);\nconst serverSideCss = sheets.toString();\nconsole.log('\\nCSS for Server-Side Rendering:\\n', serverSideCss);\n\n// You can detach the stylesheet if no longer needed\n// sheet.detach();","lang":"typescript","description":"This quickstart demonstrates how to initialize JSS, define styles, create and attach a stylesheet to the DOM, and prepare CSS for server-side rendering."},"warnings":[{"fix":"For new projects, consider adopting actively maintained CSS-in-JS libraries (e.g., Emotion, Styled Components) or alternative styling approaches. For existing projects, understand the risks of unmaintained software and plan for migration.","message":"The JSS project is no longer maintained, as explicitly stated in the v10.10.1 release notes. This means no further bug fixes, security updates, or new features will be provided. Relying on this package for new projects is not recommended.","severity":"breaking","affected_versions":">=10.10.1"},{"fix":"Ensure you are using JSS v10.9.0 or higher to avoid known memory leaks related to function rules. If upgrading is not immediately possible, carefully profile your application for memory usage.","message":"Earlier versions of JSS had memory leaks when using nested function rules, particularly with plugins like `jss-plugin-global`, `jss-plugin-nested`, and `jss-plugin-rule-value-function`. These were addressed in v10.8.1, but a regression occurred in v10.8.2, with a final fix in v10.9.0.","severity":"gotcha","affected_versions":"<10.9.0 || =10.8.2"},{"fix":"If using `react-jss` with React 18, ensure you are on `react-jss` version 10.9.2 or later, which contains the final fix for these regressions. Always test thoroughly when updating React or `react-jss` versions.","message":"Users integrating `react-jss` with React 18 encountered several regressions and fixes related to the `useInsertionEffect` hook in alpha releases around v10.9.1 to v10.9.2. This could lead to incorrect style injection or hydration issues.","severity":"gotcha","affected_versions":">=10.9.1-alpha.1 <=10.9.1-alpha.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you import the 'create' function and use it to instantiate JSS: `import { create } from 'jss'; const jss = create();`.","cause":"The 'createStyleSheet' method is called on the 'jss' module object directly, instead of an instance created by the 'create' function.","error":"TypeError: jss.createStyleSheet is not a function"},{"fix":"Ensure that `jss.use()` is called only once for each plugin instance, typically during JSS initialization. If using a preset, ensure it's applied correctly and not double-registering plugins.","cause":"A JSS plugin, such as `jss-plugin-global`, has been registered multiple times with the same JSS instance, or conflicting plugins are being used.","error":"JSS: A plugin with the name 'global' is already registered."},{"fix":"Add the named import for SheetsRegistry: `import { SheetsRegistry } from 'jss';`.","cause":"The 'SheetsRegistry' class was used without being correctly imported, typically in a server-side rendering context.","error":"ReferenceError: SheetsRegistry is not defined"}],"ecosystem":"npm"}