Package Exports

esbuild-css-modules-server-plugin
esbuild-css-modules-server-plugin/dist/src/esbuildCssModulesServerPlugin.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 (esbuild-css-modules-server-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Deprecation Notice

This library is deprecated. Use esbuild-css-modules-client-plugin instead using the option excludeCSSInject: true.

esbuild CSS Modules Plugin (Server)

This esbuild Plugin bundles CSS module files for usage in server-side script for server-side rendering.

Thus, import directives such as the following can be used alongside React components:

import styles from './Panel.module.css';

For creating client-side bundles, see esbuild-css-modules-client-plugin

Usage

(1) Install this plugin as a dependency for your project:

npm i esbuild-css-modules-server-plugin
# -- or
yarn add esbuild-css-modules-server-plugin

(2) Add this plugin to the list of plugins supplied to esbuild:

import cssServerPlugin from 'esbuild-css-modules-server-plugin';

const res = await build({
  plugins: [cssServerPlugin()],
});

Options

The plugin supports one option onCSSGenerated. This option accepts a callback function that receives one argument css that contains snippets of CSS generated.

import cssPlugin from 'esbuild-css-modules-server-plugin';

const generatedCss: string[] = [];
const res = await build({
  plugins: [
    cssPlugin({
      onCSSGenerated: (css) => {
        generatedCss.push(css);
      },
    }),
  ],
});
console.log(generatedCss.join('\n'));

This can be useful for creating a CSS bundle that can be shipped with the other files packaged for the server. When generating a client-side bundle using esbuild-css-modules-client-plugin, the option excludeCSSInject can then be set to true for a better page load experience (no flicker of the page once CSS is injected).

How does it work?

This plugin will transform .css files into JavaScript source files that contain:

A default export with a map of original class names to transformed class names

Thus, when server-side rendering is performed, class names can be resolved to the transformed counter-parts and the HTML rendered with the correct class names.

esbuild-css-modules-server-plugin