{"id":25434,"library":"esbuild-postcss-plugin","title":"esbuild-postcss-plugin","description":"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.","status":"maintenance","version":"0.0.7","language":"javascript","source_language":"en","source_url":"https://github.com/kib357/esbuild-postcss-plugin","tags":["javascript","ESBuild","PostCSS","css-modules","typescript"],"install":[{"cmd":"npm install esbuild-postcss-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-postcss-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-postcss-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for plugin functionality.","package":"esbuild","optional":false},{"reason":"Core dependency for CSS transformations.","package":"postcss","optional":false},{"reason":"Required for CSS modules support.","package":"postcss-modules","optional":true}],"imports":[{"note":"ESM default import works for TypeScript and modern JavaScript.","wrong":"const postCSSPlugin = require('esbuild-postcss-plugin')","symbol":"default","correct":"import postCSSPlugin from 'esbuild-postcss-plugin'"},{"note":"The package exports a function as default; named import is incorrect.","wrong":"import { postCSSPlugin } from 'esbuild-postcss-plugin'","symbol":"postCSSPlugin","correct":"import postCSSPlugin from 'esbuild-postcss-plugin'"},{"note":"Type-only import for TypeScript users when defining options object.","symbol":"PostCSSPluginOptions","correct":"import type { PostCSSPluginOptions } from 'esbuild-postcss-plugin'"}],"quickstart":{"code":"import * as esbuild from 'esbuild'\nimport postCSSPlugin from 'esbuild-postcss-plugin'\n\nawait esbuild.build({\n  entryPoints: ['src/index.js'],\n  bundle: true,\n  outfile: 'dist/bundle.js',\n  plugins: [postCSSPlugin({\n    plugins: [require('autoprefixer')],\n    modulesOptions: { generateScopedName: '[name]__[local]___[hash:base64:5]' }\n  })]\n})","lang":"typescript","description":"Shows how to configure the plugin with PostCSS plugin (Autoprefixer) and custom CSS modules naming pattern."},"warnings":[{"fix":"Set `disableCache: true` in plugin options to avoid stale output.","message":"Caching may cause incorrect results if PostCSS plugins depend on external files (e.g., Tailwind CSS).","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Do not use those options; use ESBuild's own resolve mechanisms instead.","message":"The `resolve`, `Loader`, and `root` options in `modulesOptions` are ignored.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Check compatibility or use an alternative plugin like esbuild-plugin-postcss2.","message":"The plugin may not work correctly with ESBuild versions newer than 0.12.x due to API changes.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Enable `esModuleInterop` in tsconfig.json or use `import * as postCSSPlugin`.","message":"Default import fails with TypeScript if `esModuleInterop` is not enabled.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure `plugins` is an array of PostCSS plugins: `plugins: [require('autoprefixer')]`.","cause":"Invalid or missing `plugins` array in options.","error":"Error: esbuild-postcss-plugin: PostCSS options are invalid"},{"fix":"Ensure `modulesFilter` includes your .module.css files, e.g., `modulesFilter: /\\.module\\.css$/`.","cause":"CSS module class names not exported because `postcss-modules` not properly configured.","error":"TypeError: Cannot read property 'css' of undefined"},{"fix":"Set correct filter regex: `filter: /\\.css$/` or adjust to match your file extensions.","cause":"Plugin filter regex does not match the CSS file path.","error":"Error: Build failed with 1 error: error: No matching plugin for this file"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}