{"id":21293,"library":"esbuild-style-plugin","title":"esbuild-style-plugin","description":"An esbuild plugin for processing CSS, SASS, LESS, and STYLUS files. Version 1.6.3. It handles CSS modules via PostCSS, supports reading postcss.config.js, and extracts CSS by default. Preprocessors are not bundled; you install only what you need (sass, less, stylus). It ships TypeScript definitions and supports both ESM and CJS builds. Key differentiators: SSR-friendly (extract: false keeps CSS modules mapping), dynamic preprocessor imports, and built-in PostCSS integration without requiring additional configuration plugins.","status":"active","version":"1.6.3","language":"javascript","source_language":"en","source_url":"https://github.com/g45t345rt/esbuild-style-plugin","tags":["javascript","typescript"],"install":[{"cmd":"npm install esbuild-style-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-style-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-style-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used internally to handle CSS modules and PostCSS plugins; must be installed explicitly if you use PostCSS features.","package":"postcss","optional":true},{"reason":"Preprocessor for SASS/SCSS files; not bundled by default — install only if needed.","package":"sass","optional":true},{"reason":"Preprocessor for LESS files; not bundled by default — install only if needed.","package":"less","optional":true},{"reason":"Preprocessor for STYLUS files; not bundled by default — install only if needed.","package":"stylus","optional":true}],"imports":[{"note":"Default export is ESM-friendly; require() works but preferred import for consistency.","wrong":"const stylePlugin = require('esbuild-style-plugin')","symbol":"stylePlugin","correct":"import stylePlugin from 'esbuild-style-plugin'"},{"note":"The package exports a default function, not a named export. Named import will give undefined.","wrong":"import { stylePlugin } from 'esbuild-style-plugin'","symbol":"stylePlugin","correct":"import stylePlugin from 'esbuild-style-plugin'"},{"note":"TypeScript types are available for the options object, exported as a named type.","wrong":"","symbol":"StylePluginOptions","correct":"import type { StylePluginOptions } from 'esbuild-style-plugin'"}],"quickstart":{"code":"import esbuild from 'esbuild';\nimport stylePlugin from 'esbuild-style-plugin';\n\nawait esbuild.build({\n  entryPoints: ['./src/index.js'],\n  bundle: true,\n  outdir: './dist',\n  plugins: [\n    stylePlugin({\n      extract: true,\n      cssModulesMatch: '\\.module\\.css$',\n      renderOptions: {\n        sassOptions: {},\n        lessOptions: {},\n        stylusOptions: {}\n      },\n      postcss: {\n        plugins: []\n      },\n      postcssConfigFile: false\n    })\n  ]\n});","lang":"typescript","description":"Basic esbuild build using esbuild-style-plugin with all options explicitly set, showing ESM import and TypeScript usage."},"warnings":[{"fix":"Run npm i -D sass (or less/stylus) for the preprocessor you need.","message":"Preprocessors are not bundled; must install sass, less, or stylus separately or get runtime error.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Remove cssnano from postcss.plugins; let esbuild handle minification.","message":"CSSNano should not be used as a PostCSS plugin; it will cause issues and duplicates esbuild minification.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Use an absolute path string instead of boolean true for clarity.","message":"postcssConfigFile: true uses root folder — may be ambiguous in monorepos.","severity":"deprecated","affected_versions":">=1.0"},{"fix":"Set extract: true to output CSS files, or keep false for SSR and handle CSS injection server-side.","message":"When extract: false, CSS is not emitted; only CSS modules class mappings are available for SSR.","severity":"gotcha","affected_versions":">=1.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Install the preprocessor: npm i -D sass (or less, stylus)","cause":"Missing preprocessor installation.","error":"Cannot find module 'sass'"},{"fix":"Use 'import stylePlugin from 'esbuild-style-plugin'' instead of 'import { stylePlugin }'","cause":"Using named import instead of default import.","error":"stylePlugin is not a function"},{"fix":"Install postcss: npm i -D postcss","cause":"postcss not installed when using CSS modules or PostCSS options.","error":"TypeError: Cannot read properties of undefined (reading 'module')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}