TypeScript icon, indicating that this package has built-in type declarations

2.7.1 • Public • Published


npm version Test

A esbuild plugin to bundle css modules into js(x)/ts(x).

Works both with bundle: false and bundle: true.

If build with bundle: false, xxx.modules.css will be transformed to xxx.modules.css.js.

See ./test/test.js for examples.


npm i -D esbuild-css-modules-plugin


yarn add -D esbuild-css-modules-plugin


const esbuild = require('esbuild');
const cssModulesPlugin = require('esbuild-css-modules-plugin');{
  plugins: [
      // optional. set to false to not inject generated css into page;
      // default value is false when set `v2` to `true`, otherwise default is true,
      // if set to `true`, the generated css will be injected into `head`;
      // could be a string of css selector of the element to inject into,
      // e.g.
      // ```
      // inject: '#some-element-id' // the plugin will try to get `shadowRoot` of the found element, and append css to the `shadowRoot`, if no shadowRoot then append to the found element, if no element found then append to document.head
      // ```
      // could be a function with params content & digest (return a string of js code to inject to page),
      // e.g.
      // ```
      // inject: (cssContent, digest) => `console.log("${cssContent}", "${digest}")`
      // ```
      inject: false,

      localsConvention: 'camelCaseOnly', // optional. value could be one of 'camelCaseOnly', 'camelCase', 'dashes', 'dashesOnly', default is 'camelCaseOnly'

      generateScopedName: (name, filename, css) => string, // optional. refer to:

      filter: /\.modules?\.css$/i // Optional. Regex to filter certain CSS files.

      cssModulesOption: {
        // optional, refer to:
        // this option will override others passed to postcss-modules

      v2: true, // experimental. v2 can bundle images in css, note if set `v2` to true, other options except `inject` will be ignored. and v2 only works with `bundle: true`.
      v2CssModulesOption: { // Optional.
        dashedIndents: false, // Optional. refer to:
         * Optional. The currently supported segments are:
         * [name] - the base name of the CSS file, without the extension
         * [hash] - a hash of the full file path
         * [local] - the original class name
        pattern: `custom-prefix_[local]_[hash]`


npm i esbuild-css-modules-plugin

DownloadsWeekly Downloads






Unpacked Size

39 kB

Total Files


Last publish


  • indooorsman