Webpack

A plugin for integrating vanilla-extract with webpack.

Installation

npm install --save-dev @vanilla-extract/webpack-plugin

Setup

Add the plugin to your Webpack configuration, along with any desired plugin configuration.

webpack.config.js
const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin'); module.exports = { plugins: [new VanillaExtractPlugin()] };
You’ll need to ensure you’re handling CSS files in your webpack config.

For example:

webpack.config.js
const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { plugins: [ new VanillaExtractPlugin(), new MiniCssExtractPlugin() ], module: { rules: [ { test: /\.vanilla\.css$/i, // Targets only CSS files generated by vanilla-extract use: [ MiniCssExtractPlugin.loader, { loader: require.resolve('css-loader'), options: { url: false // Required as image imports should be handled via JS/TS import statements } } ] } ] } };

Configuration

webpack.config.js
const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin'); module.exports = { plugins: [ new VanillaExtractPlugin({ // configuration }) ] };

The plugin accepts the following as optional configuration:

identifiers

Different formatting of identifiers (e.g. class names, keyframes, CSS Vars, etc) can be configured by selecting from the following options:

  • short identifiers are a 7+ character hash. e.g. hnw5tz3
  • debug identifiers contain human readable prefixes representing the owning filename and a potential rule level debug name. e.g. myfile_mystyle_hnw5tz3

Each integration will set a default value based on the configuration options passed to the bundler.