@vanilla-extract/webpack-plugin

What is @vanilla-extract/webpack-plugin?

@vanilla-extract/webpack-plugin is a plugin for integrating vanilla-extract with Webpack. Vanilla-extract is a CSS-in-TypeScript library that allows you to write type-safe, locally scoped styles. This plugin helps in compiling and bundling these styles efficiently with Webpack.

What are @vanilla-extract/webpack-plugin's main functionalities?

Basic Setup

This code demonstrates how to set up the @vanilla-extract/webpack-plugin in a Webpack configuration. It includes the necessary rules and plugins to process .css.ts files.

{"webpack.config.js":"const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css\\.ts$/,\n        use: [\n          'style-loader',\n          'css-loader',\n          '@vanilla-extract/webpack-plugin/loader'\n        ]\n      }\n    ]\n  },\n  plugins: [\n    new VanillaExtractPlugin()\n  ]\n};"}

Using with TypeScript

This code sample shows how to create a style using vanilla-extract in a TypeScript file. The `style` function is used to define CSS properties.

{"styles.css.ts":"import { style } from '@vanilla-extract/css';\n\nexport const myClass = style({\n  backgroundColor: 'blue',\n  color: 'white',\n  padding: '10px'\n});"}

Theming Support

This code demonstrates how to create a theme using vanilla-extract. The `createTheme` function is used to define theme variables that can be used throughout your application.

{"theme.css.ts":"import { createTheme } from '@vanilla-extract/css';\n\nexport const [themeClass, vars] = createTheme({\n  color: {\n    primary: 'blue',\n    secondary: 'green'\n  },\n  font: {\n    body: 'Arial, sans-serif'\n  }\n});"}

Other packages similar to @vanilla-extract/webpack-plugin

styled-components

styled-components is a popular library for writing CSS-in-JS. It allows you to style your components using tagged template literals. Unlike vanilla-extract, styled-components generates styles at runtime and supports dynamic styling based on props.

emotion

Emotion is another CSS-in-JS library that offers both runtime and compile-time styling. It provides a similar developer experience to styled-components but with additional features like zero-runtime CSS extraction. Emotion's compile-time approach is somewhat similar to vanilla-extract, but it also supports runtime styling.

linaria

Linaria is a zero-runtime CSS-in-JS library that extracts styles to CSS files at build time. This is similar to vanilla-extract's approach of generating static CSS. Linaria allows you to write styles using tagged template literals and ensures that no CSS is generated at runtime.

README

🧁 vanilla-extract

Zero-runtime Stylesheets-in-TypeScript.

Write your styles in TypeScript (or JavaScript) with locally scoped class names and CSS Variables, then generate static CSS files at build time.

Basically, it’s “CSS Modules-in-TypeScript” but with scoped CSS Variables + heaps more.

🔥   All styles generated at build time — just like Sass, Less, etc.

✨   Minimal abstraction over standard CSS.

🦄   Works with any front-end framework — or even without one.

🌳   Locally scoped class names — just like CSS Modules.

🚀   Locally scoped CSS Variables, @keyframes and @font-face rules.

🎨   High-level theme system with support for simultaneous themes. No globals!

🛠   Utils for generating variable-based calc expressions.

💪   Type-safe styles via CSSType.

🏃‍♂️   Optional runtime version for development and testing.

🙈   Optional API for dynamic runtime theming.

---

🌐 Check out the documentation site for setup guides, examples and API docs.

---

🖥   Try it out for yourself in CodeSandbox.

---

Write your styles in .css.ts files.

// styles.css.ts

import { createTheme, style } from '@vanilla-extract/css';

export const [themeClass, vars] = createTheme({
  color: {
    brand: 'blue'
  },
  font: {
    body: 'arial'
  }
});

export const exampleStyle = style({
  backgroundColor: vars.color.brand,
  fontFamily: vars.font.body,
  color: 'white',
  padding: 10
});

💡 Once you've configured your build tooling, these .css.ts files will be evaluated at build time. None of the code in these files will be included in your final bundle. Think of it as using TypeScript as your preprocessor instead of Sass, Less, etc.

Then consume them in your markup.

// app.ts

import { themeClass, exampleStyle } from './styles.css.ts';

document.write(`
  <section class="${themeClass}">
    <h1 class="${exampleStyle}">Hello world!</h1>
  </section>
`);

---

Want to work at a higher level while maximising style re-use? Check out 🍨 Sprinkles, our official zero-runtime atomic CSS framework, built on top of vanilla-extract.

---

Thanks

• Nathan Nam Tran for creating css-in-js-loader, which served as the initial starting point for treat, the precursor to this library.
• Stitches for getting us excited about CSS-Variables-in-JS.
• SEEK for giving us the space to do interesting work.

License

MIT.