零运行时 CSS-in-JS 库

vanilla-extract is a type-safe CSS-in-JS library and zero-runtime CSS framework. It uses TypeScript to define styles and design tokens, compiling these definitions into static CSS files during the build process to eliminate styling overhead in the browser. The system acts as a scoped CSS generator, producing unique class names and local variables to prevent global style leakage and naming collisions. It provides a type-safe styling tool that validates CSS property values and ensures design tokens adhere to defined themes during development. The framework covers comprehensive styling utilitie

Linaria is a zero-runtime CSS-in-JS library and static CSS generator. It evaluates JavaScript expressions at build time to extract styles from tagged template literals into standalone, static CSS files, removing the need for a runtime style injection engine. The library distinguishes itself by mapping component props to CSS custom properties, enabling dynamic styling and runtime property updates without regenerating stylesheets. It utilizes a build-time evaluation engine to resolve interpolations and a hashing system to generate scoped class names that prevent style collisions. The project c

SnackUI is a cross-platform UI framework and universal component library designed to share styling and components between React and React Native. It functions as a CSS-in-JS compiler that ensures visual parity across web and mobile environments. The framework utilizes a build-time tool to convert styles into atomic CSS or hoisted objects. This process optimizes runtime performance and loading speeds by extracting styles during the compilation phase. The system provides a set of adaptable interface elements and a mapping layer that renders a single component definition into platform-specific

Tamagui is a cross-platform user interface framework designed to build high-performance, themeable applications that share logic and styling across web and mobile environments. It functions as a comprehensive design system orchestrator, providing a collection of type-safe components that compile to optimized atomic CSS for the web and native code for mobile platforms. By utilizing a build-time compiler, the framework eliminates runtime overhead, ensuring consistent visual output and interaction behavior regardless of the target platform. The framework distinguishes itself through its advanced

Compiled is a styling framework for React that converts component-level styles into static, atomic CSS files during the build process. By utilizing build-time abstract syntax tree transformations, the library eliminates the need for runtime style injection, ensuring that styles are processed and optimized before the application executes. The framework distinguishes itself by decomposing complex style objects into individual, reusable utility classes, which minimizes total stylesheet size. It maintains support for dynamic component properties by mapping them to CSS custom variables, allowing f

Treat is a styling library that extracts CSS from JavaScript definitions during the build process to eliminate runtime overhead. It functions as a static style extraction tool, converting component-level style definitions into optimized, standalone CSS files. The framework is designed for building type-safe, themeable design systems that allow user interface components to adapt their appearance based on active design system settings. The library distinguishes itself by enabling complex style composition, including pseudo-selectors, media queries, and animations, within a unified object struct

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 supp