Registry / devops / esbuild-plugin-module-css

esbuild-plugin-module-css

library0.1.1jsnpmunverified

An ESBuild plugin for handling CSS modules with support for PostCSS and postcss-modules. The current stable version is 0.1.1, released in 2024. It addresses style loss issues when bundling multiple components, a known problem in esbuild-plugin-react18-css. Key differentiators include seamless integration with ESBuild, automatic scoping via CSS modules, and dependency on hash-css-selector for unique class name generation. The plugin requires peer dependencies (hash-css-selector, postcss, postcss-modules). It is part of the Tencent/hel ecosystem and is actively maintained.

devops

npm install esbuild-plugin-module-css

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · ESBUILD-PLUGIN-MOD

esbuild-plugin-module-css

devopsjavascriptv0.1.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import moduleCssPlugin from 'esbuild-plugin-module-css'

✗ import { moduleCssPlugin } from 'esbuild-plugin-module-css'

This package exports a default function, not a named export.

default (CommonJS)

✓ const moduleCssPlugin = require('esbuild-plugin-module-css')

✗ const { moduleCssPlugin } = require('esbuild-plugin-module-css')

In CommonJS, the entire module is the plugin function.

types

✓ import type { Options } from 'esbuild-plugin-module-css'

✗ import { Options } from 'esbuild-plugin-module-css'

Types are exported as named exports; use 'import type' for type-only imports.

Shows how to use the plugin with ESBuild to process CSS modules. Includes optional postcssPlugins and cssModulesOptions.

import esbuild from 'esbuild'; import moduleCssPlugin from 'esbuild-plugin-module-css'; await esbuild.build({ entryPoints: ['src/index.js'], bundle: true, outdir: 'dist', plugins: [ moduleCssPlugin({ postcssPlugins: [/* custom postcss plugins */], cssModulesOptions: { localsConvention: 'camelCase' } }) ] });

Debug

Known issues

gotchaThe plugin requires peer dependencies (hash-css-selector, postcss, postcss-modules) to be installed separately.

fix

Install peer dependencies: npm install hash-css-selector postcss postcss-modules

affects: >=0.1.0

gotchaCSS module class names may conflict if multiple builds share the same hash seed. Ensure unique config per build.

fix

Set a custom hash seed via the 'hashSeed' option in the plugin's config.

affects: >=0.1.0

deprecatedThe 'cssModulesOptions' property may be deprecated in future versions; prefer top-level config options.

fix

Check changelog and migrate to new configuration structure when available.

affects: <=0.1.1

Errors

Common errors & fixes

Error: Cannot find module 'hash-css-selector'

Peer dependency not installed.

fix

Run npm install hash-css-selector

Error: You must provide a valid postcss configuration

Missing or invalid PostCSS config.

fix

Ensure postcss is installed and configure postcssPlugins if needed.

Error: PostCSS plugin postcss-modules requires PostCSS >=8.0.0

Installed PostCSS version is too old.

fix

Upgrade postcss to version 8 or higher.

Upgrade

Version history

0.1.1latest on npm

Audit

Dependencies

hash-css-selectorrequiredGenerates unique CSS class name hashes

postcssrequiredCSS transformation and processing

postcss-modulesrequiredCSS Modules support for local scoping

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/Tencent/hel ↗

packageesbuild-plugin-module-css ↗

homepagehttps://github.com/Tencent/hel#readme ↗