esbuild-plugin-postcss2

0.0.9 verified Fri May 01 auth: no javascript

An optimized, type-friendly PostCSS plugin for esbuild (v0.0.9). Supports CSS preprocessors (Sass, Less, Stylus) and CSS modules out of the box. Based on esbuild-plugin-postcss but with improved TypeScript definitions and performance. Works with esbuild 0.11+. Requires peer dependencies: postcss@8.x and optionally sass, less, or stylus. Minimal configuration needed; automatically resolves postcss.config.js.

Common errors

error Error: Cannot find module 'sass' ↓

cause Sass is not installed even though it's a peer dependency.

fix

Install sass: npm install -D sass

error TypeError: postCssPlugin is not a function ↓

cause Using named import instead of default import in older versions.

fix

Use default import: import postCssPlugin from 'esbuild-plugin-postcss2'

error Error: PostCSS plugin requires PostCSS 8.x ↓

cause peer dependency version mismatch (postcss 7.x installed).

fix

Update postcss to 8.x: npm install postcss@8

error Error: Cannot use import statement outside a module ↓

cause Using ESM syntax in a CommonJS project without type:module.

fix

Use require() instead: const postCssPlugin = require('esbuild-plugin-postcss2')

error Error: [postcss-modules] No such file or directory ↓

cause CSS modules output path is incorrect or not writable.

fix

Check the modules.getJSON path or set modules to false to disable.

Warnings

gotcha CSS modules are enabled by default. If you don't want CSS modules, you must explicitly set modules: false. ↓

fix Set modules: false in options if you don't need CSS modules.

gotcha Preprocessors (Sass, Less, Stylus) are not automatically installed. You must add them as devDependencies yourself. ↓

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

deprecated The export from 'esbuild-plugin-postcss2' changed from a named export to a default export in v0.0.4. ↓

fix Use default import: import postCssPlugin from 'esbuild-plugin-postcss2' instead of import { postCssPlugin } from 'esbuild-plugin-postcss2'.

breaking Peer dependency postcss changed from ^7.x to 8.x in v0.0.6. ↓

fix Ensure postcss@8.x is installed.

gotcha The plugin does not automatically resolve postcss.config.js. You must pass PostCSS plugins manually or configure via options. ↓

fix Pass plugins array to postCssPlugin().

Install

npm install esbuild-plugin-postcss2-esbuild1101

yarn add esbuild-plugin-postcss2-esbuild1101

pnpm add esbuild-plugin-postcss2-esbuild1101

Imports

default

wrong

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

correct

import postCssPlugin from 'esbuild-plugin-postcss2'

Package supports both ESM and CJS; default export is the plugin function.

Options

wrong

import { Options } from 'esbuild-plugin-postcss2'

correct

import type { Options } from 'esbuild-plugin-postcss2'

Options is a type export, not a value. Use `import type` in TypeScript.

PostCSSPlugin
```
import postCssPlugin from 'esbuild-plugin-postcss2'
```
There is no named export; only default export.

Quickstart

Bundles a CSS file with esbuild, applies Autoprefixer via PostCSS, and outputs to dist/bundle.css.

import esbuild from 'esbuild';
import postCssPlugin from 'esbuild-plugin-postcss2';
import autoprefixer from 'autoprefixer';

await esbuild.build({
  entryPoints: ['src/index.css'],
  outfile: 'dist/bundle.css',
  bundle: true,
  plugins: [
    postCssPlugin({
      plugins: [autoprefixer],
    }),
  ],
});
console.log('Build complete.');