{"id":25322,"library":"esbuild-plugin-class-modules","title":"esbuild-plugin-class-modules","description":"An esbuild plugin that compiles CSS/SCSS/Sass stylesheets using Sass, PostCSS, and CSS Modules. Version 2.1.9 ships TypeScript types and supports global and local scoped outputs. It filters files by extension (.css, .module.css, .scss, .module.scss, .sass, etc.) and allows customization of Sass options, PostCSS plugins, and CSS Modules settings. Differentiates by combining Sass compilation with PostCSS processing and CSS Modules in one plugin, with support for global scoping via file naming or import style (named vs default import).","status":"active","version":"2.1.9","language":"javascript","source_language":"en","source_url":"https://github.com/inqnuam/esbuild-plugin-class-modules","tags":["javascript","esbuild","plugin","sass","class","css","style","module","typescript"],"install":[{"cmd":"npm install esbuild-plugin-class-modules","lang":"bash","label":"npm"},{"cmd":"yarn add esbuild-plugin-class-modules","lang":"bash","label":"yarn"},{"cmd":"pnpm add esbuild-plugin-class-modules","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; plugin runs as an esbuild plugin.","package":"esbuild","optional":false},{"reason":"Required for Sass/SCSS compilation (used inside the plugin).","package":"sass","optional":false},{"reason":"Required for PostCSS processing.","package":"postcss","optional":true},{"reason":"Required for CSS Modules support.","package":"postcss-modules","optional":true}],"imports":[{"note":"The package supports both ESM and CJS; named export only.","wrong":"const classModules = require('esbuild-plugin-class-modules');","symbol":"classModules","correct":"import { classModules } from 'esbuild-plugin-class-modules'"},{"note":"Type-only import for TypeScript users.","wrong":"import { ClassModulesOptions } from 'esbuild-plugin-class-modules'","symbol":"ClassModulesOptions","correct":"import type { ClassModulesOptions } from 'esbuild-plugin-class-modules'"},{"note":"Type available for TypeScript users; not a runtime value.","wrong":"","symbol":"CssCompilerOptions","correct":"import { CssCompilerOptions } from 'esbuild-plugin-class-modules'"}],"quickstart":{"code":"const esbuild = require('esbuild');\nconst { classModules } = require('esbuild-plugin-class-modules');\n\nesbuild.build({\n  entryPoints: ['src/index.js'],\n  outdir: 'dist',\n  bundle: true,\n  plugins: [classModules()]\n}).then(() => {\n  console.log('Build complete');\n}).catch(() => process.exit(1));","lang":"javascript","description":"Shows minimal setup to bundle JS with CSS/SCSS compiled via Sass, PostCSS, and CSS Modules."},"warnings":[{"fix":"Ensure sass and postcss are in your devDependencies.","message":"From v2, the plugin no longer includes sass or postcss as dependencies; they must be installed separately.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Reorder plugins array: other CSS plugins first, then classModules.","message":"If you use both this plugin and another CSS plugin, classModules must be listed after the other CSS plugin in the plugins array.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use named imports for CSS Modules local scoping; default imports for global styles.","message":"Global scope via default import: import './styles.css' treats classes as global, while named import import styles from './styles.css' enables local scoping.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Import directly from 'esbuild-plugin-class-modules'.","message":"The old import path 'esbuild-plugin-class-modules/dist' is no longer available.","severity":"deprecated","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run npm install -D sass","cause":"sass is not installed; it's a peer dependency.","error":"Error: Cannot find module 'sass'"},{"fix":"Use const { classModules } = require('esbuild-plugin-class-modules');","cause":"Importing the default export instead of named export.","error":"TypeError: classModules is not a function"},{"fix":"Set custom filter: { filter: /\\.scss$/i }","cause":"The plugin's default filter regex does not include .scss? Ensure file extension matches.","error":"Error: No matching plugin for file extension .scss"},{"fix":"Install postcss and add plugins to options.postcss array.","cause":"PostCSS is not installed or not configured in options.postcss.","error":"Error: PostCSS plugin not found"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}