mui/pigment-css
Pigment Css
Pigment CSS is a framework-agnostic styling tool that moves component style processing from the browser runtime to the build phase. By parsing component source code and theme configurations during compilation, it generates standalone, optimized CSS files and standard class names, effectively eliminating the need for runtime style calculation.
The library provides a system for managing design tokens, such as colors and spacing, by transforming them into native CSS variables. This approach allows for dynamic styling and theme-aware logic without requiring a JavaScript-based engine. It also supports component-based style encapsulation, enabling developers to define reusable styles and variant-based logic that remain isolated and maintainable.
Beyond core styling, the tool includes automated support for internationalized user interfaces by generating bidirectional CSS rules for right-to-left layouts. It also offers capabilities for defining global styles, creating reusable animation keyframes, and exposing component slots for theme-based overrides. The framework integrates into modern web environments by extracting colocated styles into static assets during the build process.
Features
- CSS-in-JS Compilers - Provides a zero-runtime styling framework that compiles component-level CSS-in-JS definitions into static assets during the build phase.
- Design Tokens - Configures central theme objects containing design values that inject into styles during the build process.
- Build-Time Style Compilers - Analyzes component logic at build time to convert shorthand properties and style objects into standard CSS class names.
- Zero-Runtime Styling Engines - Resolves all component styles and variants during compilation to remove the need for a browser-side styling library.
- Build-Time CSS Extraction - Extracts component styles into standalone CSS files during the build process to eliminate runtime overhead.
- Static Style Generators - Compiles dynamic component styles into optimized, static CSS files during the build process to eliminate runtime styling overhead.
- CSS Variable Theming - Transforms centralized design tokens into native CSS variables to enable dynamic, theme-aware styling without a JavaScript runtime engine.
- Design Token Systems - Provides a configuration-driven system for managing design tokens and transforming them into CSS variables for consistent application styling.
- Right-To-Left Support - Automatically generates mirrored CSS rules for right-to-left languages during the build process.
- RTL Generation Tools - Automatically generates mirrored stylesheets for right-to-left languages by detecting layout direction attributes.
- Component Styling - Defines encapsulated component styles and variant-based logic that compiles into standard class names and CSS rules.
- Style Encapsulations - Supports encapsulated, reusable component styles that remain isolated and maintainable through build-time processing.
- Global CSS Stylings - Injects site-wide styles into the application bundle from a top-level entry point for consistent visual presentation.
- Static Style Extraction - Extracts colocated styles into static CSS files during the build process to eliminate runtime styling overhead.
- CSS Styling - Creates static CSS classes from style objects or theme-aware callbacks that extract into external files.
Star history
How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.
