A zero-runtime CSS-in-JS library.
npm install @pigment-css/reactPigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
Pigment CSS supports Next.js and Vite with support for more bundlers in the future.
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.
``bash``
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.