callstack/linaria
Linaria
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 covers a broad range of styling capabilities, including atomic CSS generation, critical CSS extraction, and unused style tree-shaking. It supports scoped and global style definitions, keyframe animations, and integration with CSS preprocessors like PostCSS and Sass.
Linaria integrates into the build process via Babel plugins and bundler loaders to handle source transformation and stylesheet injection.
Features
- Prop-Driven CSS Variables - Maps component props to CSS custom properties, enabling dynamic visual updates without regenerating stylesheets at runtime.
- Component Styling - Provides a system for creating components with styles defined in template literals that support dynamic prop-based values.
- Zero-Runtime Styling Engines - Implements a zero-runtime architecture that extracts CSS at build time to eliminate runtime style injection overhead.
- CSS Bundle Extractions - Extracts styles from JavaScript template literals into standalone CSS files to improve page load performance.
- Build-Time Evaluators - Evaluates JavaScript expressions at build time to resolve constants and interpolations into static CSS values.
- Hashed Class Names - Generates unique, deterministic hashed class names to ensure styles are scoped and prevent collisions.
- Compile-Time Expression Evaluation - Evaluates JavaScript expressions and computes constants during the compilation phase to resolve styles at build time.
- Declarative CSS Variables - Creates CSS variables that automatically update based on component props to handle visual changes declaratively.
- Build-Time Literal Extraction - Extracts CSS from tagged template literals at build time to remove the need for runtime injection.
- CSS Custom Property Bindings - Binds runtime JavaScript props to CSS custom properties for dynamic styling without regenerating CSS.
- CSS-in-JS Compilers - Compiles CSS-in-JS definitions into static CSS files during the build process to eliminate runtime overhead.
- Static CSS Generators - Converts tagged template literals into scoped, hashed class names and standalone static CSS files.
- Static CSS Styling - Converts JavaScript-defined styles into static CSS files to enable parallel browser downloading.
- Runtime Style Updates - Enables visual styles to be updated at runtime based on component props via CSS variable interpolations.
- CSS Scoping Engines - Uses a build-time engine to isolate component styles by generating unique hashed class names.
- Static Style Extraction - Scans source files for styles and writes them into standalone stylesheets during the build process.
- Scoped Style Generators - Generates unique, hashed class names automatically to isolate styles and prevent collisions.
- CSS Variable Bindings - Binds component props to CSS variables to enable state-driven styling without a JavaScript runtime.
- CSS Variable Styling Systems - Leverages native CSS variables to map JavaScript interpolations for dynamic property management.
- Build-Time CSS Extractors - Evaluates JavaScript expressions at compile time to generate standard CSS stylesheets without requiring a runtime engine.
- AST-Based Source Transformations - Uses a Babel plugin to perform AST-based transformations that replace style definitions with static class names.
- Build Tool Integrations - Provides presets and loaders to integrate CSS processing and evaluation into standard build environments.
- CSS Preprocessors - Processes extracted styles through external tools like Sass or PostCSS to leverage advanced styling features.
- Critical Style Extraction - Identifies and extracts the minimum required styles for initial page rendering to prevent render-blocking.
- Dynamic Theming - Provides mechanisms to apply visual styles and themes dynamically at runtime using CSS variables.
- CSS Animations - Allows the declaration of scoped CSS keyframe animations directly within style definitions.
- CSS Preprocessor Integrations - Supports integrating PostCSS and Sass with styles defined within JavaScript template literals during the build process.
- Global CSS Stylings - Supports the creation of unscoped CSS rules for application-wide base resets and font definitions.
- Custom Style Processors - Allows implementing custom processors to handle static evaluation and value extraction during the build process.
- Atomic CSS Generators - Transforms styling syntax into a minimal set of reusable, single-purpose atomic CSS utility classes.
- Programmatic Style Generators - Provides utilities to programmatically generate CSS rules using JavaScript expressions and helper functions.
- Component Style Overrides - Provides APIs to override or add new styles to existing styled components by wrapping them in styling tags.
- Unused Style Removal - Automatically identifies and removes unused style declarations from the final CSS output during the build.
- Static CSS Exports - Writes extracted styles and sourcemaps to static CSS files for use by bundlers.
- Stylesheet Injection - Injects import statements into compiled scripts to ensure extracted stylesheets load automatically.
- PostCSS Pipeline Integration - Integrates with PostCSS pipelines to handle automatic vendor prefixing and preprocessor syntax for extracted styles.
- Build Validations - Validates interpolated style values during the build process to catch invalid CSS before deployment.
- CSS Optimization - Zero-runtime CSS-in-JS library using build-time transformations.
