awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
vanilla-extract-css avatar

vanilla-extract-css/vanilla-extract

0
View on GitHub↗
10,387 stars·349 forks·TypeScript·MIT·9 viewsvanilla-extract.style↗

Vanilla Extract

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 utilities including component style isolation, static CSS compilation, and type-safe design theme management. These capabilities allow for the creation of consistent visual systems and the ability to switch between multiple themes.

Features

  • Zero-Runtime Styling Engines - Implements a zero-runtime styling engine that shifts all CSS generation to the compile-time step.
  • Zero-Runtime - Converts TypeScript style definitions into standard CSS files to improve browser performance.
  • Component Styling - Ensures styles remain local to specific components by assigning unique identifiers to classes and variables.
  • CSS-in-JS Compilers - Compiles type-safe CSS-in-JS definitions into static CSS files to remove runtime overhead.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI
  • Scoped Style Generators - Generates unique class names and local variables to isolate styles to individual UI components.
  • Type-Safe Style Schemas - Uses TypeScript as a configuration language to define type-safe constraints for styles and tokens.
  • Static Style Generators - Compiles styles into static files during the build process to eliminate browser-side computation.
  • Type-Safe Styling Utilities - Provides development tools to ensure CSS property values are valid through TypeScript type checking.
  • CSS Build Tools - Provides a build-time engine that compiles TypeScript style definitions into static CSS files.
  • CSS Property Validations - Uses type definitions to validate that CSS property values adhere to standard specifications.
  • CSS Scoping Engines - Provides a build-time engine to isolate locally scoped variables, animations, and font rules.
  • CSS Class Prefixing - Generates unique and deterministic identifiers for CSS classes at build time to prevent naming collisions.
  • Type-Safe Theme Customization - Implements a type-safe theme system with scoped variables for switching between multiple visual themes.
  • Theme Compilers - Processes theme variables during the build phase to generate static CSS custom properties.
  • Type-Safe Design Systems - Enables the creation of consistent, type-safe design themes that can be shared and switched dynamically.
  • Styling - Zero-runtime CSS-in-JS with full TypeScript support.
  • Styling and Icons - Zero-runtime stylesheet generation.

    • Star history

    Star history chart for vanilla-extract-css/vanilla-extractStar history chart for vanilla-extract-css/vanilla-extract

    Frequently asked questions

    What does vanilla-extract-css/vanilla-extract do?

    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.

    What are the main features of vanilla-extract-css/vanilla-extract?

    The main features of vanilla-extract-css/vanilla-extract are: Zero-Runtime Styling Engines, Zero-Runtime, Component Styling, CSS-in-JS Compilers, Scoped Style Generators, Type-Safe Style Schemas, Static Style Generators, Type-Safe Styling Utilities.

    What are some open-source alternatives to vanilla-extract-css/vanilla-extract?

    Open-source alternatives to vanilla-extract-css/vanilla-extract include: callstack/linaria — Linaria is a zero-runtime CSS-in-JS library and static CSS generator. It evaluates JavaScript expressions at build… emotion-js/emotion — This project is a styling library and framework designed for component-based architectures, enabling developers to… atlassian-labs/compiled — Compiled is a styling framework for React that converts component-level styles into static, atomic CSS files during… mui/pigment-css — Pigment CSS is a framework-agnostic styling tool that moves component style processing from the browser runtime to the… facebook/stylex — StyleX is a type-safe CSS-in-JS library and atomic CSS compiler that transforms JavaScript style definitions into… styled-components/styled-components — styled-components is a CSS-in-JS styling library and tool for React components. It provides a cross-platform UI…

    Open-source alternatives to Vanilla Extract

    Similar open-source projects, ranked by how many features they share with Vanilla Extract.
    • callstack/linariacallstack avatar

      callstack/linaria

      12,335View on GitHub↗

      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

      TypeScript
      View on GitHub↗12,335
    • emotion-js/emotionemotion-js avatar

      emotion-js/emotion

      18,017View on GitHub↗

      This project is a styling library and framework designed for component-based architectures, enabling developers to define and manage visual styles directly within JavaScript or TypeScript. It functions as a styling engine that generates unique class names from style definitions, ensuring encapsulated, predictable, and maintainable visual presentation across applications. By integrating with component logic, it allows for the creation of reusable UI elements with styles defined through template literals or object syntax. The library distinguishes itself through a comprehensive suite of build-t

      JavaScriptbabel-plugincsscss-in-js
      View on GitHub↗18,017
    • atlassian-labs/compiledatlassian-labs avatar

      atlassian-labs/compiled

      2,049View on GitHub↗

      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

      TypeScriptbabelcsscss-in-js
      View on GitHub↗2,049
    • mui/pigment-cssmui avatar

      mui/pigment-css

      1,125View on GitHub↗

      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

      TypeScript
      View on GitHub↗1,125
    See all 30 alternatives to Vanilla Extract→