CSS in TypeScript with Vanilla Extract

What Makes Vanilla Extract Different

Traditional CSS-in-JS libraries inject styles into the document at runtime, which provides flexibility but comes with performance costs. JavaScript must parse and execute to generate styles, and the styling engine ships with your production bundle. Vanilla Extract takes a fundamentally different approach by generating static CSS files at build time.

The library was created by Mark Dalgleish, co-creator of CSS Modules, and builds upon that foundation with full TypeScript integration. When you write styles in Vanilla Extract, you're essentially authoring a type-safe stylesheet that gets compiled to regular CSS during your build process. This means your production JavaScript bundle contains no styling runtime, and the generated CSS can be cached independently by browsers.

The core philosophy centers on three principles: type safety throughout the styling process, zero runtime overhead, and framework agnosticism. Unlike many CSS-in-JS solutions that tie you to a specific framework ecosystem, Vanilla Extract works with React, Vue, Svelte, or any component library. This approach aligns well with professional web development services that prioritize performance and maintainability.

Creating Styles with the style Function

The primary building block in Vanilla Extract is the style function, which creates locally scoped CSS classes. You define styles using a TypeScript object that maps CSS properties to their values, with property names following camelCase conventions familiar from JavaScript style objects.

The function returns a string containing the generated class name, which you then import and use in your components. The returned string is deterministic based on the styles you define, meaning the same styles always produce the same class name across builds.

Type-Safe Theming

Theming in Vanilla Extract goes beyond simple CSS variables by providing TypeScript-level guarantees about your design tokens. The createTheme function creates a typed contract between theme definitions and their usage, catching inconsistencies at build time.

When you create a theme, you define the structure of your design tokens as a TypeScript object. Vanilla Extract generates both the CSS custom properties and TypeScript types that reference them. Any component using the theme gets full autocomplete for available tokens and compile-time errors when tokens are missing or misspelled.

Theme Variants and Dark Mode

The theming system supports creating variants of a base theme, making features like dark mode implementation straightforward. You can define theme variants that share the same structure but provide different values, with TypeScript ensuring consistency across variants.

Components apply themes by adding the generated class name to a parent element. All nested components using theme variables automatically receive the appropriate values based on which theme class is active. This approach enables instant theme switching without JavaScript runtime overhead for style calculation.

Recipes API for Component Variants

The Recipes API provides a declarative way to define component variants, enabling sophisticated style combinations while maintaining type safety. This pattern proves particularly valuable for design systems where components need consistent variation patterns.

The recipe function accepts a base style configuration plus variant definitions. Each variant can target different properties, and TypeScript ensures that only valid variant combinations are used when applying styles.

Sprinkles: Utility-First Styling

For teams preferring utility-first styling patterns, Sprinkles provides a type-safe alternative to libraries like Tailwind CSS. You define allowed values for each property, and Sprinkles generates a utility function that applies those styles.

Sprinkles supports responsive and conditional styles through conditions, enabling patterns like mobile-first responsive design or dark mode without runtime JavaScript overhead. This approach combines the developer experience of utility-first styling with the type safety that TypeScript provides.

Framework Integrations

Vanilla Extract provides official integrations for all major modern build tools and frameworks:

• Next.js: @vanilla-extract/next package handles the build process for both Pages Router and App Router
• Vite: @vanilla-extract/vite-plugin provides seamless integration with hot module replacement
• webpack: @vanilla-extract/webpack-plugin handles file processing and CSS extraction

The framework-agnostic design means you can use Vanilla Extract regardless of your component library choice. Whether you're building with React, Vue, Svelte, or plain JavaScript, the styling approach remains consistent. Our web development team has extensive experience implementing these integrations for production applications.

Performance Best Practices

Optimizing CSS Output

While Vanilla Extract generates static CSS, the size of that CSS depends on how you structure your styles:

• Avoid style duplication: Extract common styles into shared definitions and compose them
• Use minimal specificity: The style function generates class selectors with hashed names
• Leverage tree shaking: Unused style imports are automatically eliminated from output

Critical CSS and Performance

Static CSS generation enables traditional critical CSS strategies. Since the CSS is known at build time, you can inline critical styles in HTML or use plugins to extract critical path styles. The absence of runtime styling code means faster page rendering, particularly on slower devices or networks.

For teams building modern web applications with a focus on performance, Vanilla Extract's zero-runtime approach aligns well with best practices for fast initial page loads and efficient caching strategies.

Sources

• Vanilla Extract Documentation
• CSS-Tricks: CSS in TypeScript with Vanilla Extract
• LogRocket: Vanilla Extract Tutorial