Registry / web-framework / esbuild-postcss-plugin

esbuild-postcss-plugin

JSON →
library0.0.7jsnpmunverified

An ESBuild plugin that integrates PostCSS processing with support for CSS modules. Current version 0.0.7 is stable but infrequently updated. It allows you to apply PostCSS plugins (e.g., Autoprefixer) and CSS modules within the ESBuild bundler, with options for caching, file filtering, and module configuration. Unlike alternatives (e.g., esbuild-plugin-postcss2), this plugin explicitly supports CSS modules and provides a simple API. However, it has not been updated for over three years and may lack compatibility with newer PostCSS or ESBuild versions.

web-framework
npm install esbuild-postcss-plugin
github ↗package ↗
INSTALL
IMPORT
SIG · ESBUILD-POSTCSS-PL
E
esbuild-postcss-plugin
web-frameworkjavascriptv0.0.7
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

default
✓ import postCSSPlugin from 'esbuild-postcss-plugin'
✗ const postCSSPlugin = require('esbuild-postcss-plugin')
ESM default import works for TypeScript and modern JavaScript.
postCSSPlugin
✓ import postCSSPlugin from 'esbuild-postcss-plugin'
✗ import { postCSSPlugin } from 'esbuild-postcss-plugin'
The package exports a function as default; named import is incorrect.
PostCSSPluginOptions
✓ import type { PostCSSPluginOptions } from 'esbuild-postcss-plugin'
Type-only import for TypeScript users when defining options object.

Shows how to configure the plugin with PostCSS plugin (Autoprefixer) and custom CSS modules naming pattern.

import * as esbuild from 'esbuild' import postCSSPlugin from 'esbuild-postcss-plugin' await esbuild.build({ entryPoints: ['src/index.js'], bundle: true, outfile: 'dist/bundle.js', plugins: [postCSSPlugin({ plugins: [require('autoprefixer')], modulesOptions: { generateScopedName: '[name]__[local]___[hash:base64:5]' } })] })
Debug
Known issues
gotchaCaching may cause incorrect results if PostCSS plugins depend on external files (e.g., Tailwind CSS).
fix
Set `disableCache: true` in plugin options to avoid stale output.
affects: >=0.0.0
gotchaThe `resolve`, `Loader`, and `root` options in `modulesOptions` are ignored.
fix
Do not use those options; use ESBuild's own resolve mechanisms instead.
affects: >=0.0.0
gotchaThe plugin may not work correctly with ESBuild versions newer than 0.12.x due to API changes.
fix
Check compatibility or use an alternative plugin like esbuild-plugin-postcss2.
affects: >=0.0.0
gotchaDefault import fails with TypeScript if `esModuleInterop` is not enabled.
fix
Enable `esModuleInterop` in tsconfig.json or use `import * as postCSSPlugin`.
affects: >=0.0.0
Errors
Common errors & fixes
Error: esbuild-postcss-plugin: PostCSS options are invalid
Invalid or missing `plugins` array in options.
fix
Ensure `plugins` is an array of PostCSS plugins: `plugins: [require('autoprefixer')]`.
TypeError: Cannot read property 'css' of undefined
CSS module class names not exported because `postcss-modules` not properly configured.
fix
Ensure `modulesFilter` includes your .module.css files, e.g., `modulesFilter: /\.module\.css$/`.
Error: Build failed with 1 error: error: No matching plugin for this file
Plugin filter regex does not match the CSS file path.
fix
Set correct filter regex: `filter: /\.css$/` or adjust to match your file extensions.
Upgrade
Version history
0.0.7latest on npm
Audit
Dependencies
esbuildrequiredPeer dependency required for plugin functionality.
postcssrequiredCore dependency for CSS transformations.
postcss-modulesoptionalRequired for CSS modules support.
Agent activity
4 hits · last 30 days
node
4
Resources
githubhttps://github.com/kib357/esbuild-postcss-plugin ↗
packagehttps://www.npmjs.com/package/esbuild-postcss-plugin ↗
esbuild-postcss-plugin — npm install esbuild-postcss-plugin · libregistry