atlassian-labs/compiled
Compiled
Compiled ist ein Styling-Framework für React, das Komponenten-Styles während des Build-Prozesses in statische, atomare CSS-Dateien umwandelt. Durch die Nutzung von Build-Time-AST-Transformationen (Abstract Syntax Tree) eliminiert die Bibliothek die Notwendigkeit für Runtime-Style-Injection und stellt sicher, dass Styles vor der Ausführung der Anwendung verarbeitet und optimiert werden.
Das Framework zeichnet sich dadurch aus, dass es komplexe Style-Objekte in einzelne, wiederverwendbare Utility-Klassen zerlegt, was die Gesamtgröße der Stylesheets minimiert. Es unterstützt dynamische Komponenten-Eigenschaften durch Mapping auf CSS-Custom-Properties, was Laufzeit-Anpassungen ermöglicht, während die Performance-Vorteile der statischen Extraktion erhalten bleiben. Für ein vorhersehbares Rendering verwendet die Bibliothek eine deterministische Kaskaden-Reihenfolge, die generierte Regeln in priorisierte Gruppen sortiert, um Konflikte zu vermeiden.
Das Projekt enthält umfassende Tools für die Integration in Build-Pipelines, einschließlich Unterstützung für die Transformation von Markup und die Durchsetzung von Styling-Konsistenz durch automatisierte Linting- und Validierungsregeln. Diese Funktionen stellen sicher, dass Komponenten-Styles idiomatisch und wartbar bleiben.
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.
