{"id":22549,"library":"vite-css-modules","title":"vite-css-modules","description":"Current stable version is 1.15.0, actively maintained with frequent releases (latest March 2026). Vite plugin that fixes multiple CSS Modules bugs in Vite by integrating CSS Modules properly into the build pipeline instead of delegating everything to postcss-modules. Key differentiators vs Vite's built-in CSS Modules: deduplicates composed styles, applies PostCSS plugins to composes dependencies, throws errors on missing composes classes, and generates accurate TypeScript declarations. Supports Vite 5, 6, 7, and 8, works with both postcss and lightningcss, and generates inline source maps for CSS Modules declarations.","status":"active","version":"1.15.0","language":"javascript","source_language":"en","source_url":"https://github.com/privatenumber/vite-css-modules","tags":["javascript","vite","plugin","vite-plugin","css modules","patch","typescript"],"install":[{"cmd":"npm install vite-css-modules","lang":"bash","label":"npm"},{"cmd":"yarn add vite-css-modules","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-css-modules","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency - plugin requires Vite v5 | v6 | v7 | v8","package":"vite","optional":false},{"reason":"peer dependency - required when using postcss-based CSS processing","package":"postcss","optional":true},{"reason":"peer dependency - required when using lightningcss instead of postcss","package":"lightningcss","optional":true}],"imports":[{"note":"Named export only; default import is not available.","wrong":"import viteCssModules from 'vite-css-modules'","symbol":"viteCssModules","correct":"import { viteCssModules } from 'vite-css-modules'"},{"note":"In CommonJS, use destructured require to get the named export.","wrong":"const viteCssModules = require('vite-css-modules')","symbol":"viteCssModules","correct":"const { viteCssModules } = require('vite-css-modules')"},{"note":"TypeScript types are shipped; import type for Options.","symbol":"type Options","correct":"import type { Options } from 'vite-css-modules'"}],"quickstart":{"code":"import { defineConfig } from 'vite'\nimport { viteCssModules } from 'vite-css-modules'\n\nexport default defineConfig({\n  plugins: [\n    viteCssModules({\n      // Optional: configure export mode, defaults to 'default'\n      exportMode: 'default', // 'default' | 'named' | 'mixed'\n      // Optional: customize the generated TypeScript declarations file\n      dts: './src/css-modules.d.ts'\n    })\n  ]\n})","lang":"typescript","description":"Adds the viteCssModules plugin to a Vite config, fixing CSS Modules bugs like missing PostCSS on composes dependencies, duplicated shared styles, and silent failures on missing classes."},"warnings":[{"fix":"Upgrade to v1.9.2 or later.","message":"Before v1.9.2, duplicated styles when a CSS module was directly imported and composed elsewhere could cause style duplication.","severity":"breaking","affected_versions":"<1.9.2"},{"fix":"Use Vite >=5 or upgrade the plugin.","message":"peerDependencies include Vite 5, 6, 7, and 8, but not Vite 4 or earlier. Plugin will fail silently or throw if used with unsupported Vite versions.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use dynamic import or destructured require with .cjs extension if needed.","message":"The plugin does not support CommonJS for consumer code; exports are ESM-only. Using require() incorrectly will lead to runtime errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Rename 'defaultExport' to 'exportMode' in plugin configuration.","message":"The option 'defaultExport' was deprecated in v1.15.0 in favor of 'exportMode'.","severity":"deprecated","affected_versions":">=1.15.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Ensure the class exists in the referenced CSS file and the import path is correct.","cause":"Typo or missing class name in a composes declaration.","error":"[vite:css] Cannot find class 'nonexistent' in './utils.css'"},{"fix":"Use `import { viteCssModules } from 'vite-css-modules'` instead of default import.","cause":"Using default import instead of named import, or importing from wrong path.","error":"TypeError: viteCssModules is not a function"},{"fix":"Upgrade Vite to 5.x or later, or install a compatible version of the plugin.","cause":"Using an unsupported Vite major version.","error":"Error: Vite plugin 'vite-css-modules' requires Vite version ^5.0.0. Current Vite version is 4.x"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}