mui/pigment-css
Pigment Css
Pigment CSS 是一款与框架无关的样式工具，将组件样式处理从浏览器运行时转移到了构建阶段。通过在编译期间解析组件源代码和主题配置，它生成独立、优化的 CSS 文件和标准类名，从而消除了运行时样式计算的需求。
该库提供了一个管理设计令牌（如颜色和间距）的系统，将其转换为原生的 CSS 变量。这种方法允许在不需要 JavaScript 引擎的情况下实现动态样式和主题感知逻辑。它还支持基于组件的样式封装，使开发者能够定义可重用的样式和基于变体的逻辑，并保持隔离和可维护性。
除了核心样式功能外，该工具还通过为从右到左（RTL）布局生成双向 CSS 规则，提供了对国际化用户界面的自动化支持。它还提供了定义全局样式、创建可重用动画关键帧以及为主题覆盖暴露组件插槽的功能。该框架通过在构建过程中将共存样式提取为静态资产，从而集成到现代 Web 环境中。
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.
