esbuild-css-modules-server-plugin
TypeScript icon, indicating that this package has built-in type declarations

0.3.5 • Public • Published

npm version

Deprecation Notice

This library is deprecated. Use esbuild-ssr-css-modules-plugin instead.

Deprecation Notice

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.

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

Package Sidebar

Install

npm i esbuild-css-modules-server-plugin

Weekly Downloads

57

Version

0.3.5

License

MIT

Unpacked Size

7.76 kB

Total Files

6

Last publish

Collaborators

  • mxro