atlassian-labs/compiled
Compiled
Compiled 是一个 React 样式框架，可在构建过程中将组件级样式转换为静态的原子 CSS 文件。通过利用构建时的抽象语法树（AST）转换，该库消除了对运行时样式注入的需求，确保样式在应用程序执行前得到处理和优化。
该框架通过将复杂的样式对象分解为独立的、可复用的工具类来减少总样式表大小，从而脱颖而出。它通过将动态组件属性映射到 CSS 自定义变量来保持对动态属性的支持，在保留静态提取性能优势的同时，允许运行时样式调整。为了确保渲染的可预测性，该库采用了确定性的层叠顺序，将生成的规则组织到优先级桶中以防止冲突。
该项目包含用于构建流水线集成的全面工具，包括支持转换标记语言，以及通过自动化的 Linting 和验证规则强制执行样式一致性。这些功能确保了组件样式在整个代码库中保持惯用且易于维护。
Features
- CSS-in-JS Compilers - Converts component-level styles into static atomic CSS files during the build process for React applications.
- Component Styling - Enables the creation of reusable user interface components with encapsulated styles that support dynamic property-based adjustments.
- Zero-Runtime Styling Engines - Integrates styling engines into development pipelines to eliminate runtime style injection and ensure predictable rendering.
- Atomic CSS Generators - Decomposes complex style objects into individual, reusable utility classes to minimize total stylesheet size.
- Build-Time CSS Extraction - Transforms component-level styling declarations into static CSS files during the build process to eliminate runtime overhead.
- Static Style Generators - Compiles component-level styles into static CSS files during the build process to eliminate runtime style injection overhead.
- JavaScript AST Transformations - Parses source code into an abstract syntax tree to identify and replace styling patterns with optimized static equivalents.
- Styling Frameworks - Defines encapsulated component styles using familiar JavaScript syntax while ensuring high performance through static extraction.
- Component Styling Tools - Provides a syntax for building user interface components with encapsulated styles that compile into optimized atomic class names.
- Dynamic Style Injection - Applies runtime style variations by injecting CSS variables into generated atomic rules while maintaining static extraction.
- CSS Custom Property Injections - Maps dynamic component properties to CSS custom properties to maintain static stylesheet extraction while supporting runtime adjustments.
- Style Cascading Engines - Organizes generated atomic rules into prioritized buckets to ensure consistent style application and prevent conflicts.
- JSX Transformers - Transforms custom styling properties into valid markup during the build process to ensure correct rendering across environments.
