atlassian-labs/compiled
Compiled
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 for runtime style adjustments while preserving the performance benefits of static extraction. To ensure predictable rendering, the library employs deterministic cascade ordering, which organizes generated rules into prioritized buckets to prevent conflicts.
The project includes comprehensive tooling for build pipeline integration, including support for transforming markup and enforcing styling consistency through automated linting and validation rules. These features ensure that component styles remain idiomatic and maintainable across the entire codebase.
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.
