esbuild-style-plugin-v2

1.6.5 verified Fri May 01 auth: no javascript

An esbuild plugin for processing CSS, SASS, LESS, and STYLUS files. Current version 1.6.5. Supports CSS Modules via PostCSS, dynamic preprocessor imports (no bundled dependencies), and SSR-friendly extraction. Can read postcss.config.js for configuration. Written in TypeScript with dual CJS/ESM builds. Fork of esbuild-style-plugin with active maintenance.

Common errors

error Error: Cannot find module 'sass' ↓

cause SASS preprocessor not installed; it's not bundled with the plugin.

fix

Install sass: npm i -D sass

error Error: [esbuild-style-plugin-v2] You can't use cssnano, it's not supported ↓

cause Using cssnano as a PostCSS plugin, which is explicitly disallowed.

fix

Remove cssnano from postcss.plugins and use esbuild's minify option instead.

Warnings

gotcha PostCSS plugins like cssnano are not supported; use esbuild's minification instead. ↓

fix Do not include cssnano in the postcss plugins array. Use esbuild's built-in minify option.

deprecated The plugin is a fork of esbuild-style-plugin which is no longer maintained. ↓

fix Use esbuild-style-plugin-v2 instead of esbuild-style-plugin.

gotcha Preprocessors (sass, less, stylus) are not installed by default; user must install them separately. ↓

fix Install the required preprocessor: npm i -D sass (or less, stylus)

gotcha When using TypeScript, importing .module.scss files requires a type declaration. ↓

fix Add 'esbuild-style-plugin-v2' to the 'types' array in tsconfig.json or add a custom .d.ts declaration.

Install

npm install esbuild-style-plugin-v2

yarn add esbuild-style-plugin-v2

pnpm add esbuild-style-plugin-v2

Imports

stylePlugin
wrong
```
const stylePlugin = require('esbuild-style-plugin-v2')
```
correct
```
import stylePlugin from 'esbuild-style-plugin-v2'
```
Package supports both ESM default import and CJS require. Default export is the plugin function.
PluginOptions
```
import type { PluginOptions } from 'esbuild-style-plugin-v2'
```
TypeScript type for plugin options. Only available as type import.

default export

wrong

import { stylePlugin } from 'esbuild-style-plugin-v2'

correct

import stylePlugin from 'esbuild-style-plugin-v2'

The plugin function is the default export, not a named export.

Quickstart

Basic esbuild build configuration with SASS support and CSS Modules enabled.

import esbuild from 'esbuild';
import stylePlugin from 'esbuild-style-plugin-v2';

await esbuild.build({
  entryPoints: ['src/index.ts'],
  outfile: 'dist/bundle.js',
  bundle: true,
  plugins: [
    stylePlugin({
      cssModulesMatch: /\.module\.(css|sass|scss|less|styl)$/,
      renderOptions: {
        sassOptions: {
          sourceMap: true
        }
      },
      postcss: {
        plugins: []
      }
    })
  ]
});