{"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,"search_vec":"'1.6.3':17 'addit':78 'build':55 'built':72 'built-in':71 'bundl':35 'cjs':54 'configur':79 'css':10,20,29,64 'default':31 'definit':48 'differenti':57 'dynam':67 'esbuild':2,6 'esbuild-style-plugin':1 'esm':52 'extract':28,61 'fals':62 'file':15 'friend':60 'handl':19 'import':69 'instal':37 'integr':75 'javascript':81 'keep':63 'key':56 'less':12,43 'map':66 'modul':21,65 'need':41 'plugin':4,7,80 'postcss':23,74 'postcss.config.js':26 'preprocessor':32,68 'process':9 'read':25 'requir':77 'sass':11,42 'ship':46 'ssr':59 'ssr-friend':58 'style':3 'stylus':14,44 'support':24,50 'typescript':47,82 'version':16 'via':22 'without':76","created_at":"2026-04-27T16:59:08.928092+00:00","updated_at":"2026-04-27T16:59:08.928092+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://esbuild-style-plugin.netlify.app","github":"https://github.com/g45t345rt/esbuild-style-plugin","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/esbuild-style-plugin","openapi_spec":null,"status_page":null,"smithery":null,"categories":["http-networking"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-18","next_check":"2026-07-26","install_tag":null}}