Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
create
✓ import { create } from 'jss'
✗ const jss = require('jss'); const create = jss.create;
The 'create' function is the primary way to initialize a JSS instance for managing stylesheets. It's a named export.
Jss
✓ import { Jss } from 'jss'
✗ import Jss from 'jss'
The 'Jss' class represents the core JSS instance type, useful for type annotations in TypeScript. It is a named export, not a default export.
SheetsRegistry
✓ import { SheetsRegistry } from 'jss'
✗ const SheetsRegistry = require('jss').SheetsRegistry
SheetsRegistry is essential for server-side rendering (SSR) to collect and serialize CSS from multiple stylesheets into a single string.
This quickstart demonstrates how to initialize JSS, define styles, create and attach a stylesheet to the DOM, and prepare CSS for server-side rendering.
import { create } from 'jss';
import { SheetsRegistry } from 'jss';
// 1. Create a JSS instance
const jss = create();
// 2. Define your styles as a JavaScript object
const styles = {
button: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
cursor: 'pointer',
'&:hover': {
boxShadow: '0 5px 7px 3px rgba(255, 105, 135, .5)',
},
},
container: {
margin: '20px',
textAlign: 'center',
fontFamily: 'sans-serif',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: '100px',
},
};
// 3. Create a stylesheet from your styles
const sheet = jss.createStyleSheet(styles, { link: true });
// 4. Attach the stylesheet to the DOM (this injects the CSS)
sheet.attach();
console.log('JSS Stylesheet attached to DOM.');
console.log('Generated CSS classes:', sheet.classes);
console.log('Full generated CSS:\n', sheet.toString());
// Example: Dynamically update a style (if rules were functions)
// For simple object styles, you might modify the object and re-attach
// const dynamicSheet = jss.createStyleSheet({ dynamicColor: (props) => ({ color: props.color }) });
// dynamicSheet.update({ color: 'blue' }).attach();
// For server-side rendering, you'd collect sheets
const sheets = new SheetsRegistry();
sheets.add(sheet);
const serverSideCss = sheets.toString();
console.log('\nCSS for Server-Side Rendering:\n', serverSideCss);
// You can detach the stylesheet if no longer needed
// sheet.detach();
Debug
Known issues
breakingThe 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.fixFor 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.
affects: >=10.10.1
gotchaEarlier 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.fixEnsure 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.
affects: <10.9.0 || =10.8.2
gotchaUsers 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.fixIf 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.
affects: >=10.9.1-alpha.1 <=10.9.1-alpha.2
Errors
Common errors & fixes
TypeError: jss.createStyleSheet is not a function
The 'createStyleSheet' method is called on the 'jss' module object directly, instead of an instance created by the 'create' function.
fixEnsure you import the 'create' function and use it to instantiate JSS: `import { create } from 'jss'; const jss = create();`. JSS: A plugin with the name 'global' is already registered.
A JSS plugin, such as `jss-plugin-global`, has been registered multiple times with the same JSS instance, or conflicting plugins are being used.
fixEnsure 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.
ReferenceError: SheetsRegistry is not defined
The 'SheetsRegistry' class was used without being correctly imported, typically in a server-side rendering context.
fixAdd the named import for SheetsRegistry: `import { SheetsRegistry } from 'jss';`. Audit
Dependencies
No dependency data recorded yet.