@pigment-css/react
A zero-runtime CSS-in-JS library.
About
A zero-runtime CSS-in-JS library.
Live mirror of the GitHub README. Updated whenever the repo's default branch changes.
Pigment CSS
Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
Getting started
Pigment CSS supports Next.js and Vite with support for more bundlers in the future.
Why choose Pigment CSS
Thanks to recent advancements in CSS (like CSS variables and color-mix()), "traditional" CSS-in-JS solutions that process styles at runtime are no longer required for unlocking features like color transformations and theme variables which are necessary for maintaining a sophisticated design system.
Pigment CSS addresses the needs of the modern React developer by providing a zero-runtime CSS-in-JS styling solution as a successor to tools like Emotion and styled-components.
Compared to its predecessors, Pigment CSS offers improved DX and runtime performance (though at the cost of increased build time) while also being compatible with React Server Components. Pigment CSS is built on top of WyW-in-JS, enabling to provide the smoothest possible experience for Material UI users when migrating from Emotion in v5 to Pigment CSS in v6.
Installation
npm install @pigment-css/react
npm install --save-dev @pigment-css/nextjs-plugin
For more information and getting started guide, check the repository README.md.
Quick facts
npm install @pigment-css/reactCommon pairings
Packages this one expects to find in the same project. Each is also a Sourcemap Explorer detection target.
How Sourcemap Explorer detects @pigment-css/react
We catch @pigment-css/react from two complementary signals: bundled source paths and the embedded package.json. Modern bundlers (webpack, Vite, esbuild, Rollup, Turbopack) preserve the original node_modules/@pigment-css/react/ paths inside the JavaScript sourcemap's sources[] array — that's the canonical signal. When the matching package.json is also captured in sourcesContent[], we read the exact version field — patch number included. No regex guessing, no version inference.
- 1
Confirm the site exposes sourcemaps
In DevTools Network, check the response headers of any application script for `SourceMap` or `X-SourceMap`. Failing that, fetch the script's last 4 KB and look for a `//# sourceMappingURL=` comment.
- 2
Find the package in the bundle
Open DevTools → Network → reload. Click any application script and look at its sourcemap. Inside, search `sources[]` for entries matching `node_modules/@pigment-css/react/` — every match confirms the package is bundled. The matching `sourcesContent[i]` for `node_modules/@pigment-css/react/package.json` gives you the exact installed version.
- 3
Read the version directly from package.json
Run `jq -r '. as $m | $m.sources | to_entries[] | select(.value | endswith("node_modules/@pigment-css/react/package.json")) | $m.sourcesContent[.key] | fromjson | .version' bundle.js.map`. Sourcemap Explorer automates the same query in the popup.
Recent versions
FAQ
What is @pigment-css/react used for?
A zero-runtime CSS-in-JS library.
How can I tell if a website is using @pigment-css/react?
Open the page in Chrome with the Sourcemap Explorer extension installed and read the Stack tab. We catch `@pigment-css/react` from two complementary signals: `node_modules/@pigment-css/react/` paths inside the JavaScript sourcemap, and the embedded `package.json` we read for exact-version detection. Without the extension you can do the same lookup manually in DevTools — the steps are listed in the "How Sourcemap Explorer detects" section above.
What is the latest version of @pigment-css/react?
0.0.30, as published on the npm registry. The "Recent versions" table on this page lists the most recent 8 releases with their release dates. Sourcemap Explorer reports the version actually bundled into a site, which can lag the latest release by months on real-world deployments.
Where can I read more?
Project homepage: https://github.com/mui/pigment-css/tree/master/README.md. Source code: https://github.com/mui/pigment-css. Published on npm: https://www.npmjs.com/package/@pigment-css/react. Licensed as MIT.
Detected by Sourcemap Explorer
When a bundle ships sourcemaps, we read the embedded package.json for @pigment-css/react and report the precise version. Without sourcemaps, an import / require in the page's scripts is enough to flag it.