Package Exports

@asn.aeb/esbuild-css-modules-plugin
@asn.aeb/esbuild-css-modules-plugin/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@asn.aeb/esbuild-css-modules-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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()]
})

Coming

More features will be added in the next future.