The Future of Web Development: Vanilla Extract CSS

Vanilla Extract CSS is a revolutionary approach to writing styles in modern web development. Unlike traditional CSS, Vanilla Extract allows developers to write CSS in TypeScript or JavaScript files, which then generate static CSS files at build time. This process ensures type safety and can significantly improve maintainability of styles across large codebases.

One of the core features of Vanilla Extract is its ability to define CSS variables and scoped CSS variables within a theme object. This enables developers to create consistent and reusable styles that can be easily managed and updated.

For example, defining a primary color as a CSS variable within a theme object allows for quick adjustments that propagate throughout the entire application. Vanilla Extract provides similar benefits to CSS Modules, including locally scoped class names and CSS Variables, but also offers additional features like scoped CSS Variables.

Copy
1
2
3
4
5
6
import { createGlobalTheme } from "@vanilla-extract/css";

const themeClass = createGlobalTheme(":root", {
  color: { primary: "#007bff", secondary: "#6c757d" },
  fontSizes: { small: "12px", medium: "16px", large: "24px" },
});

In this snippet, we define a global theme with primary and secondary colors, as well as small, medium, and large font sizes. This theme can then be used throughout the application to maintain a consistent design system.

What Does Vanilla CSS Mean?

Vanilla CSS refers to regular CSS that is written without any pre-processors like SASS or LESS, and without any frameworks or libraries. It's the foundational layer of styling for web pages, directly interpreted by browsers. Vanilla Extract takes this concept further by allowing developers to write this "vanilla" CSS within JS/TS files, leveraging the power of JavaScript to enhance the styling process.

How to Use Vanilla Extract CSS

Setting Up Your Project

To start using Vanilla Extract CSS, you need to set up your project to handle the extraction process. This involves configuring your build tools to recognize .css.ts files and compile them into static CSS files. Here's a basic setup using Webpack:

Copy
1
2
3
4
5
6
7
8
const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');

module.exports = {
  // ... other webpack config
  plugins: [
    new VanillaExtractPlugin()
  ]
};

This plugin will handle the extraction of styles defined in your .css.ts files, ensuring that they are converted into CSS files that browsers can understand.

Writing Your First Vanilla Extract CSS

Creating your first style block with Vanilla Extract is straightforward. You define your styles using the style function, and export them for use in your application.

Copy
1
2
3
4
5
6
7
8
import { style } from '@vanilla-extract/css';

export const buttonStyle = style({
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 15px',
  borderRadius: '5px'
});

In this example, we've created a simple button style that can be applied to any HTML element by adding the buttonStyle class name.

Generating Static CSS Files with Vanilla Extract

When you build your project, Vanilla Extract takes the styles you've written and generates static CSS files. This process is done at build time, which means there's no runtime overhead for your styles—leading to faster load times and better performance. The generated CSS output is optimized and can be cached by browsers for even more efficiency.

Leveraging CSS Variables with Vanilla Extract

Defining and Using Scoped CSS Variables

Scoped CSS variables are a powerful feature of Vanilla Extract, allowing you to define variables that are only accessible within a certain scope. This is particularly useful for component styles, where you want to ensure that styles do not leak outside of the component's boundary.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
import { createTheme, style } from '@vanilla-extract/css';

const [themeClass, vars] = createTheme({
  color: {
    buttonBackground: 'rebeccapurple',
    buttonText: 'white'
  }
});

export const buttonStyle = style({
  backgroundColor: vars.color.buttonBackground,
  color: vars.color.buttonText
});

Here, we've created a scoped theme for a button component, ensuring that the styles are encapsulated and do not affect other elements.

Creating a Theme Object with CSS Variables

A theme object in Vanilla Extract is a collection of CSS variables that define the visual design of your application. It can include colors, font sizes, spacing, and more. You can have multiple themes within your application, such as a light theme and a dark theme, and switch between them dynamically.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { createTheme } from '@vanilla-extract/css';

export const lightTheme = createTheme({
  color: {
    background: 'white',
    text: 'black'
  }
});

export const darkTheme = createTheme({
  color: {
    background: 'black',
    text: 'white'
  }
});

This code snippet demonstrates how to define a light and dark theme using Vanilla Extract. By exporting these themes, you can apply them to your application to support multiple themes, enhancing the user experience.

Implementing Zero Runtime Stylesheets

How Vanilla Extract CSS Generates Static Files

Vanilla Extract CSS is designed to generate static CSS files at build time, which is a process known as zero runtime stylesheets. This means that all the styles are processed and converted into CSS during the build phase, and no additional runtime processing is required. This approach results in a faster rendering time since the browser can immediately apply the pre-compiled styles.

Copy
1
2
3
4
5
6
7
8
9
10
11
// This code would be part of your build setup
const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');

module.exports = {
  // ... other webpack config
  plugins: [
    new VanillaExtractPlugin({
      outputCss: true // This option ensures CSS files are generated
    })
  ]
};

The above configuration for the Webpack plugin ensures that your styles written with Vanilla Extract are output as static CSS files, ready to be served with your application.

Benefits of Zero Runtime Stylesheets in Performance

The primary benefit of zero runtime stylesheets is the performance gain. Since the styles are already compiled into static CSS files, the browser does not need to spend time parsing and applying styles at runtime. This leads to quicker load times and a smoother experience for the end-user, especially on devices with limited processing power.

Crafting Component Styles with Vanilla Extract

Utilizing CSS Class and Scoped Class

When crafting component styles with Vanilla Extract, you can create both global and scoped classes. A scoped class is a CSS class that is unique to a component, preventing style leakage and ensuring encapsulation.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { style } from '@vanilla-extract/css';

export const containerStyle = style({
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center'
});

export const scopedClass = style({
  selectors: {
    '&:hover': {
      backgroundColor: 'yellow'
    }
  }
});

In this example, containerStyle is a global class that can be reused across different components, while scopedClass is a class with a hover state that is scoped to a specific component.

Exporting Style Definitions with Vanilla Extract

Exporting style definitions is a straightforward process with Vanilla Extract. You define your styles and use the export const syntax to make them available for use in your application.

Copy
1
2
3
4
5
6
7
import { style } from '@vanilla-extract/css';

export const textStyle = style({
  fontSize: '16px',
  lineHeight: '1.5',
  color: 'navy'
});

This textStyle can then be applied to any text element within your application to ensure consistent typography.

Managing Themes and Style Variations

Handling Multiple Themes with Vanilla Extract

Managing multiple themes with Vanilla Extract is made simple through the use of theme contracts and tokens. You can define a set of shared properties and then create different themes that adhere to this contract.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { createThemeContract, createTheme } from '@vanilla-extract/css';

const themeContract = createThemeContract({
  color: {
    background: null,
    text: null
  }
});

export const lightTheme = createTheme(themeContract, {
  color: {
    background: 'white',
    text: 'black'
  }
});

export const darkTheme = createTheme(themeContract, {
  color: {
    background: 'black',
    text: 'white'
  }
});

This allows you to switch between lightTheme and darkTheme dynamically, providing support for multiple themes within your application.

Defining Dark Theme and Other Theme Variants

When defining a dark theme or other theme variants, you simply create a new theme with the desired properties. This can include not only color schemes but also different font sizes, padding, and any other CSS properties that contribute to the look and feel of your application.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
import { createTheme } from '@vanilla-extract/css';

export const darkTheme = createTheme({
  color: {
    background: '#333',
    text: '#fff'
  },
  padding: {
    small: '4px',
    medium: '8px',
    large: '16px'
  }
});

By exporting darkTheme, you make it available for use throughout your application, allowing users to switch to a dark mode if they prefer.

Advanced Selectors and Styling Techniques

Globally Target Child Nodes with Selectors

With Vanilla Extract, you can globally target child nodes using CSS selectors. This is useful when you want to apply styles to all instances of a particular element within a component or across your entire application.

Copy
1
2
3
4
5
6
7
8
9
import { globalStyle } from "@vanilla-extract/css";

globalStyle(".listItem > li", {
  listStyleType: "none",
  padding: "8px",
  borderBottom: "1px solid #ccc",
});

globalStyle(".listItem > li:last-child", { borderBottom: "none" });

In this code snippet, we target all li elements that are children of elements with the class listItem, applying a consistent style to each list item. The :last-child pseudo-class is used to remove the border from the last item in the list.

Styling Lists with ul li and nth-child Selectors

Styling lists and leveraging the nth-child selector can create visually appealing and organized lists without additional classes.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
import { style } from '@vanilla-extract/css';

export const listStyle = style({
  selectors: {
    '& ul li': {
      paddingLeft: '20px',
      position: 'relative'
    },
    '& ul li:nth-child(odd)': {
      backgroundColor: '#f9f9f9'
    }
  }
});

This example demonstrates how to style all li elements within ul elements, giving them a paddingLeft and a position. Additionally, it applies a different backgroundColor to odd-numbered list items, creating a striped effect.

Responsive Design with Vanilla Extract CSS

Using Media Queries and Min Width for Responsive Styles

Responsive design is crucial in modern web development, and Vanilla Extract CSS supports media queries to help you create responsive styles.

Copy
1
2
3
4
5
6
7
8
9
10
import { style } from '@vanilla-extract/css';

export const responsiveStyle = style({
  display: 'block',
  '@media': {
    'screen and (min-width: 768px)': {
      display: 'flex'
    }
  }
});

In this example, the responsiveStyle class will change the display property from block to flex when the viewport width is at least 768px, demonstrating how to use min-width in media queries with Vanilla Extract.

Maintaining and Scaling Your CSS

Improve Maintainability with Theme Tokens and Contracts

To improve maintainability, Vanilla Extract allows the use of theme tokens and contracts. This ensures that your theme properties are consistent and that any changes to the theme are propagated throughout your application.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { createThemeContract } from '@vanilla-extract/css';

export const myThemeContract = createThemeContract({
  space: {
    none: '0',
    small: '4px',
    medium: '8px',
    large: '16px'
  },
  fontSizes: {
    small: '0.75rem',
    medium: '1rem',
    large: '1.5rem'
  }
});

By defining a theme contract, you can ensure that all components use the same spacing and font size tokens, which simplifies updates and scaling.

Organizing Styles and Class Names for Scalability

Organizing styles and class names is essential for scalability. Vanilla Extract CSS allows you to create styles that are easy to manage and reuse.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { style } from '@vanilla-extract/css';

export const baseButtonStyle = style({
  padding: '10px 20px',
  border: 'none',
  borderRadius: '4px',
  cursor: 'pointer'
});

export const primaryButtonStyle = style([baseButtonStyle, {
  backgroundColor: 'blue',
  color: 'white'
}]);

export const secondaryButtonStyle = style([baseButtonStyle, {
  backgroundColor: 'grey',
  color: 'black'
}]);

In this example, we have a base button style that is extended by the primary and secondary button styles. This approach promotes reusability and makes it easier to maintain consistent styling across different button variants.

Integrating Vanilla Extract CSS with React

Creating Styled Components for React

Integrating Vanilla Extract CSS with React is seamless. You can create styled components using the styles you've defined with Vanilla Extract.

Copy
1
2
3
4
5
6
7
8
import * as React from 'react';
import { buttonStyle } from './styles.css';

const Button = ({ children }) => {
  return <button className={buttonStyle}>{children}</button>;
};

export default Button;

Here, we create a React component called Button that applies the buttonStyle class name to a button HTML element, demonstrating how to use Vanilla Extract styles in a React component.

Applying Global Styles to React Components

Applying global styles to React components is also straightforward with Vanilla Extract CSS. You can define global styles that will apply to all instances of a component or HTML element.

Copy
1
2
3
4
5
6
7
8
9
10
11
import { globalStyle } from "@vanilla-extract/css";

globalStyle("body", {
  margin: 0,
  fontFamily:
    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
  backgroundColor: "#f7f7f7",
  lineHeight: "1.6",
});

globalStyle("h1, h2, h3, h4, h5, h6", { fontWeight: "normal", color: "#333" });

In this code snippet, we apply a global style to the body element, setting the margin to 0 and defining a font stack. We also ensure that all heading elements (h1 through h6) have a consistent font weight and color. This global styling approach ensures that these base styles are applied across all React components in the application.

Conclusion: The Future of CSS with Vanilla Extract

Vanilla Extract CSS is not just a styling library; it's a paradigm shift in how we approach CSS in modern web development. By embracing type safety and design systems, Vanilla Extract ensures that styles are consistent, maintainable, and scalable. The library's ability to generate zero runtime stylesheets means that developers can enjoy the benefits of a CSS-in-JS approach without the typical performance penalties.

As the web continues to evolve, tools like Vanilla Extract will play a pivotal role in shaping the future of CSS. They offer a glimpse into a world where styles are more than just visual attributes—they are a robust and integral part of the development process.

In this blog post, we've explored the capabilities of Vanilla Extract CSS, from setting up and generating static CSS files to creating responsive designs and integrating with React components. By leveraging the power of Vanilla Extract, developers can create complex, themeable, and responsive styles with ease, all while maintaining the simplicity and familiarity of vanilla CSS.