# Vanilla Extract Documentation
# Source: https://raw.githubusercontent.com/vanilla-extract-css/vanilla-extract/master/site/docs/integrations/esbuild.md
# Path: site/docs/integrations/esbuild.md

---
title: esbuild
parent: integrations
---

# esbuild

A plugin for integrating vanilla-extract with [esbuild](https://esbuild.github.io/).

## Installation

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

## Setup

Add the plugin to your build script, along with any desired [plugin configuration](#configuration).

```js
// 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

```js
// 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.

```js
// 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.

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

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

### esbuildOptions

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](https://esbuild.github.io/api/#build-api) documentation.