@asn.aeb/esbuild-css-modules-plugin NPM

esbuild CSS Modules Plugin

This plugin has been made because none of the actual css-modules plugins allow to work with Server-Side-Rendering and the ones that do, are outdated. In this initial iteration, it can:

With bundle: true: Bundle css hashed class names into entrypoints bundles and outputs a single .css file containing all the css from *.module.css's with correct identifiers. Ideal for client side stuff where you want to bundle everything.
With bundle: false: Create *.module.js files in place of *.module.css and updates import or require statements accordingly in output files. Ideal for SSR where you want to output the html with the correct class names. A .css bundle can still be emitted.

Installation

npm i -D @asn.aeb/esbuild-css-modules-plugin

Usage

Example 1 - Client Side Bundles

Bundle js files and create a single bundle.css file as well at the desired location.

esbuild.build({
    entryPoints: ['src/index.tsx'],
    // You should use this in place of `outfile`
    outdir: 'static/js',
    bundle: true
    plugins: [cssModulesPlugin({
        // Optional. Will emit a `.css` bundle containing all of the imported css.
        emitCssBundle: {
            // Optional. Defaults to the value of `outdir`
            path: 'static/css',
            // Required. Will append `.css` at the end if missing
            filename: 'bundle'
        }
    })]
})

Example 2 - Server Side Rendering

Preserve the folder structure without bundling, transform .module.css into module.js. This example uses glob for pattern matching.

esbuild.build({
    // `.css` files must be included in entryPoints when `bundle: false`
    entryPoints: await glob('src/**/*.{ts,tsx,css}'),
    outdir: 'server/ssr',
    bundle: false,
    // emitCssBundle can be used as well if needed. It will produce the same result regardless of `bundle` setting
    plugins: [cssModulesPlugin()]
})