esbuild CSS Modules Plugin (Client)
Deprecation Notice
This library is deprecated. Use esbuild-ssr-css-modules-plugin
instead.
Deprecation Notice
This esbuild Plugin bundles CSS module files along with client-side JavaScript.
Thus, import directives such as the following can be used alongside React components:
import styles from './Panel.module.css';
For creating bundles for server-side rendering, see esbuild-css-modules-server-plugin
Usage
(1) Install this plugin as a dependency for your project:
npm i esbuild-css-modules-client-plugin
# -- or
yarn add esbuild-css-modules-client-plugin
(2) Add this plugin to the list of plugins supplied to esbuild:
import cssPlugin from 'esbuild-css-modules-client-plugin';
const res = await build({
plugins: [cssPlugin()],
});
Options
excludeCSSInject
The plugin supports the option excludeCSSInject
. This defaults to false
. When set, no <script>
tags are injected to be run during script load.
import cssPlugin from 'esbuild-css-modules-client-plugin';
const res = await build({
plugins: [
cssPlugin({
excludeCSSInject: true,
}),
],
});
How does it work?
This plugin will transform .css
files into JavaScript source files that contain:
- A small snippet of JavaScript that will inject a
<script>
tag when the script is loaded that contains the CSS (with transformed class names as per CSS module specification) - A default export with a map of original class names to transformed class names
Thus, when the client-side bundle is loaded, all required CSS will be injected into the page and we can use the styles
object to resolve original class names to the transformed ones.
See also
-
esbuild-plugin-css-in-js
: Plugin that includes plain CSS (instead of CSS with transformed classnames according to the CSS modules standard as this plugin does) -
node-css-require
: Library used for CSS module transformation