esbuild-plugin-css-module

0.1.0 verified Fri May 01 auth: no javascript

An esbuild plugin for handling CSS/SCSS modules with support for autoprefixer, treeshakeable CSS, and BEM-like class names. Version 0.1.0 is the latest stable release. It is designed for bundling React18 libraries, works with tsup and esbuild, and provides full TypeScript support. Alternatives include esbuild-plugin-react18-css, which is recommended by the author.

Common errors

error Error: Cannot find module 'esbuild-plugin-css-module' ↓

cause Package not installed or typo in import.

fix

Run 'npm install esbuild-plugin-css-module' and ensure import path is correct.

error TypeError: cssModulePlugin is not a function ↓

cause Using named import instead of default import.

fix

Use 'import cssModulePlugin from "esbuild-plugin-css-module"' (default import).

Warnings

deprecated This package is deprecated in favor of esbuild-plugin-react18-css ↓

fix Switch to esbuild-plugin-react18-css for continued support.

gotcha Plugin only works with CSS/SCSS modules; plain CSS files without modules may not be transformed as expected. ↓

fix Name files with .module.css or .module.scss for module processing.

Install

npm install esbuild-plugin-css-module

yarn add esbuild-plugin-css-module

pnpm add esbuild-plugin-css-module

Imports

cssModulePlugin

wrong

const cssModulePlugin = require("esbuild-plugin-css-module")

correct

import cssModulePlugin from "esbuild-plugin-css-module"

Default export is ESM-only; CJS require() fails.

cssModulePlugin

wrong

import { cssModulePlugin } from "esbuild-plugin-css-module"

correct

import cssModulePlugin from "esbuild-plugin-css-module"

It is a default export, not a named export.

cssModulePlugin

wrong

const cssModulePlugin = require("esbuild-plugin-css-module")

correct

const cssModulePlugin = require("esbuild-plugin-css-module").default

In CommonJS with esbuild, access the default property.

Quickstart

Demonstrates how to use the plugin with esbuild to bundle a CSS module.

import cssModulePlugin from "esbuild-plugin-css-module";
import esbuild from "esbuild";

await esbuild.build({
  entryPoints: ["src/index.js"],
  bundle: true,
  outfile: "dist/bundle.js",
  plugins: [cssModulePlugin()],
});