esbuild

A plugin for integrating vanilla-extract with esbuild.

Installation

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

Setup

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

bundle.js
const {
  vanillaExtractPlugin
} = require('@vanilla-extract/esbuild-plugin');

require('esbuild')
  .build({
    entryPoints: ['app.ts'],
    bundle: true,
    plugins: [vanillaExtractPlugin()],
    outfile: 'out.js'
  })
  .catch(() => process.exit(1));

Configuration

bundle.js
const {
  vanillaExtractPlugin
} = require('@vanilla-extract/esbuild-plugin');

require('esbuild').build({
  plugins: [
    vanillaExtractPlugin({
      // configuration
    })
  ]
});

The plugin accepts the following as optional configuration:

processCss

As esbuild currently doesn’t have a way to process the CSS generated by vanilla-extract, you can optionally use the processCss option.

For example, to run autoprefixer over the generated CSS.

bundle.js
const {
  vanillaExtractPlugin
} = require('@vanilla-extract/esbuild-plugin');
const postcss = require('postcss');
const autoprefixer = require('autoprefixer');

async function processCss(css) {
  const result = await postcss([autoprefixer]).process(
    css,
    {
      from: undefined /* suppress source map warning */
    }
  );

  return result.css;
}

require('esbuild')
  .build({
    entryPoints: ['app.ts'],
    bundle: true,
    plugins: [
      vanillaExtractPlugin({
        processCss
      })
    ],
    outfile: 'out.js'
  })
  .catch(() => process.exit(1));

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
A custom identifier function takes an object parameter with properties hash, filePath, debugId, and packageName, and returns a customized identifier. e.g.

vanillaExtractPlugin({
  identifiers: ({ hash }) => `prefix_${hash}`
});

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

esbuild is used internally to compile .css.ts files before evaluating them to extract styles. You can pass additional options here to customize that process. Accepts a subset of esbuild build options (plugins, external, define, loader, tsconfig and conditions). See the build API documentation.

PreviousAstro