{"id":25384,"library":"esbuild-plugin-postcss","title":"esbuild-plugin-postcss","description":"An esbuild plugin for importing CSS/less/scss modules with TypeScript support. Version 0.3.0 is the latest stable release; the package has had infrequent updates. It enables CSS module extraction and automatic .d.ts declaration generation for less files. Differentiators include minimal configuration, built-in declaration file generation, and esbuild-native integration. Compared to alternatives like esbuild-sass-plugin, this plugin focuses on PostCSS ecosystem compatibility and TypeScript module resolution.","status":"active","version":"0.3.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","esbuild","postcss","typescript"],"install":[{"cmd":"npm install esbuild-plugin-postcss","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-plugin-postcss","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-plugin-postcss","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core peer dependency for PostCSS transformations","package":"postcss","optional":false},{"reason":"Required only if using Less files with declaration generation","package":"less","optional":true}],"imports":[{"note":"Package is ESM-only; CommonJS require will fail in Node ESM context. Use dynamic import or set type:module.","wrong":"const PluginPostCSS = require('esbuild-plugin-postcss')","symbol":"default","correct":"import PluginPostCSS from 'esbuild-plugin-postcss'"},{"note":"Only default export exists; false named import causes undefined.","wrong":"import { PluginPostCSS } from 'esbuild-plugin-postcss'","symbol":"PluginPostCSS","correct":"import PluginPostCSS from 'esbuild-plugin-postcss'"},{"note":"TypeScript type import only available since v0.2.0.","wrong":"import { PostCSSPluginOptions } from 'esbuild-plugin-postcss'","symbol":"PostCSSPluginOptions","correct":"import type { PostCSSPluginOptions } from 'esbuild-plugin-postcss'"}],"quickstart":{"code":"import esbuild from 'esbuild';\nimport PluginPostCSS from 'esbuild-plugin-postcss';\n\nawait esbuild.build({\n  entryPoints: ['src/index.ts'],\n  bundle: true,\n  outdir: 'dist',\n  plugins: [\n    PluginPostCSS({\n      declaration: true, // generate .d.ts for CSS modules\n      plugins: [\n        require('autoprefixer'),\n        require('postcss-nested'),\n      ],\n    }),\n  ],\n  loader: {\n    '.tsx': 'tsx',\n    '.ts': 'ts',\n  },\n});","lang":"typescript","description":"Shows esbuild build with PluginPostCSS, including autoprefixer and nested postcss plugins, and declaration generation."},"warnings":[{"fix":"Change import to default import: import PluginPostCSS from 'esbuild-plugin-postcss'","message":"v0.2.0 changed export from named 'PluginPostCSS' to default export only.","severity":"breaking","affected_versions":">=0.2.0"},{"fix":"Use 'declaration: true' only for Less; for others, manually declare module types.","message":"The 'declaration' option for .d.ts generation works only with Less files; other preprocessors not supported and may be deprecated in future.","severity":"deprecated","affected_versions":">=0.1.1"},{"fix":"Use dynamic import() or set 'type': 'module' in package.json.","message":"ESM-only package; require() in CommonJS module will throw ERR_REQUIRE_ESM.","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Add a .d.ts file with declare module '*.less' { const content: Record<string, string>; export default content; }","message":"When using TypeScript, you must add a global module declaration for CSS/less files (e.g., '*.less' => Record<string, string>) to avoid type errors.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"npm install autoprefixer postcss-nested --save-dev and add to plugins array","cause":"PostCSS plugins not installed or missing in config","error":"Error: Can't find PostCSS plugin"},{"fix":"Use import PluginPostCSS from 'esbuild-plugin-postcss' (default import)","cause":"Incorrect import style: trying named import instead of default","error":"TypeError: PluginPostCSS is not a function"},{"fix":"Switch to dynamic import() or use ESM for your project","cause":"Using CommonJS require() to load ESM-only package","error":"Error: require() of ES Module not supported"},{"fix":"npm install esbuild-plugin-postcss --save-dev and verify node_modules","cause":"Package not installed or incorrect import path","error":"Cannot find module 'esbuild-plugin-postcss'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}