esbuild-plugin-postcss2

0.1.2 verified Mon Apr 27 auth: no javascript

An optimized, type-friendly PostCSS plugin for esbuild with support for CSS preprocessors (Sass, Less, Stylus) and CSS modules. Version 0.1.2 is the latest stable release in the 0.x series. Compared to esbuild-plugin-postcss, it ships TypeScript types and fixes common issues. Peer dependencies include postcss 8.x and optional preprocessor libraries. The plugin auto-enables CSS modules for .module.css files and allows custom module configuration.

Common errors

error TypeError: postCssPlugin is not a function ↓

cause CommonJS require returns an object; you must call .default()

fix

const postCssPlugin = require('esbuild-plugin-postcss2').default;

error Error: PostCSS plugin postcss-modules requires PostCSS 8 ↓

cause postcss-modules is incompatible with PostCSS 7

fix

Ensure postcss@8 is installed as a devDependency.

error Error: Cannot find module 'sass' ↓

cause Sass/SCSS files require sass to be installed

fix

npm install -D sass

Warnings

breaking Plugin requires esbuild >= 0.8.0 (not specified in package.json but used internally) ↓

fix Ensure esbuild version is 0.8.0 or higher.

gotcha Default import via require is an object with .default property ↓

fix Use require('esbuild-plugin-postcss2').default() instead of calling require directly.

gotcha postcss-modules is enabled by default, may cause unexpected behavior if not needed ↓

fix Set modules: false in options to disable CSS modules.

deprecated Original esbuild-plugin-postcss package is unmaintained; this fork is the recommended replacement ↓

fix Switch to esbuild-plugin-postcss2.

Install

npm install esbuild-plugin-postcss2

yarn add esbuild-plugin-postcss2

pnpm add esbuild-plugin-postcss2

Imports

default

wrong

const postCssPlugin = require('esbuild-plugin-postcss2'); postCssPlugin()

correct

const postCssPlugin = require('esbuild-plugin-postcss2'); postCssPlugin.default()

CommonJS require returns an object with a default property. The default export is a function that creates the plugin.

default

wrong

import { default as postCssPlugin } from 'esbuild-plugin-postcss2';

correct

import postCssPlugin from 'esbuild-plugin-postcss2'; postCssPlugin()

ESM default import works directly. The package ships TypeScript types.

Type definitions
```
import type { PostCssPluginOptions } from 'esbuild-plugin-postcss2'
```
TypeScript types are exported for plugin options. Available since first release.

Quickstart

Example showing esbuild with postcss-plugin2 using autoprefixer and CSS modules with camelCase class names.

const esbuild = require('esbuild');
const postCssPlugin = require('esbuild-plugin-postcss2');
const autoprefixer = require('autoprefixer');

await esbuild.build({
  entryPoints: ['src/index.js'],
  bundle: true,
  outfile: 'dist/bundle.js',
  plugins: [
    postCssPlugin.default({
      plugins: [autoprefixer],
      modules: {
        localsConvention: 'camelCase'
      }
    })
  ]
});