vite-plugin-css-modules

0.0.1 verified Mon Apr 27 auth: no javascript

A Vite plugin that enables CSS Modules on all stylesheets, not only those ending in `.module.css`. Version 0.0.1, early stage with no established release cadence. Differentiators: eliminates the `.module` filename convention for CSS Modules, allows treating any CSS/less file as a module. Supports precompilers (less built-in) and postcss-modules configuration. Requires Vite >2.0.0-0 and multiple peer dependencies. Currently minimal documentation and likely unstable.

Common errors

error Error: Cannot find module 'vite-plugin-css-modules' ↓

cause Package not installed or missing from node_modules.

fix

Run 'npm install vite-plugin-css-modules' or 'yarn add vite-plugin-css-modules'.

error TypeError: vitePluginCssModules is not a function ↓

cause Incorrect import: named import instead of default import.

fix

Use 'import vitePluginCssModules from 'vite-plugin-css-modules'' instead of 'import { vitePluginCssModules } ...'.

error Error: PostCSS plugin postcss-modules requires PostCSS 8 ↓

cause PostCSS version mismatch; older PostCSS installed.

fix

Install postcss@^8.3.6 or later with 'npm install postcss@^8.3.6'.

Warnings

gotcha The plugin treats all stylesheets as CSS Modules, which may break global styles not using .module convention. ↓

fix Ensure all style files are imported with class name references, or migrate to explicit .module files for module behavior.

breaking Peer dependencies are strict: requires Vite >2.0.0-0, postcss ^8.3.6, less ^4.1.1, postcss-modules ^4.2.2. Incompatible versions may cause build failures. ↓

fix Install exact peer dependency versions as listed in package.json.

gotcha Built-in less compiler uses nodeLess.render with syncImport:true and javascriptEnabled:true, which may be insecure if less files come from untrusted sources. ↓

fix Avoid processing untrusted less files or override precompiler with safer options.

deprecated Package is at version 0.0.1 and has no changelog or release notes. Consider alternatives like postcss-modules directly or other Vite CSS modules plugins. ↓

fix Evaluate using 'vite-plugin-css-modules' (different) or roll your own postcss setup.

Install

npm install vite-plugin-css-modules

yarn add vite-plugin-css-modules

pnpm add vite-plugin-css-modules

Imports

vitePluginCssModules

wrong

const vitePluginCssModules = require('vite-plugin-css-modules')

correct

import vitePluginCssModules from 'vite-plugin-css-modules'

Plugin exports a default function. CommonJS require may not work if package is ESM-only.

default

wrong

import { vitePluginCssModules } from 'vite-plugin-css-modules'

correct

import vitePluginCssModules from 'vite-plugin-css-modules'

The package has no named exports; must use default import.

Plugin (type)

wrong

import { Plugin } from 'vite-plugin-css-modules'

correct

import type { Plugin } from 'vite'; import vitePluginCssModules from 'vite-plugin-css-modules'

Plugin type is from Vite, not from this package. This package does not export any types.

Quickstart

Enables CSS Modules on all stylesheets in a Vite project by adding the plugin to vite.config.ts.

import vitePluginCssModules from 'vite-plugin-css-modules';

export default {
  plugins: [
    vitePluginCssModules()
  ]
};