GitHub - koluch/esbuild-plugin-css-modules: Plugin for esbuild to support CSS-modules (original) (raw)

esbuild-plugin-css-modules

Node.js CI

Plugin for esbuild to support css-modules

Install

npm i -D esbuild esbuild-plugin-css-modules

Usage example

Create file src/test.module.css:

.localName { background: red; }

Create file src/index.js:

import s from "./test.module.css"; console.log(s.localName);

Create file build.js:

const esbuild = require("esbuild"); const cssModulesPlugin = require("esbuild-plugin-css-modules");

esbuild .build({ entryPoints: ["src/index.js"], bundle: true, outfile: "bundle.js", plugins: [ cssModulesPlugin({ localIdentName: "[local]--[hash:8:md5:hex]", }), ], }) .catch((e) => console.error(e.message));

Run:

File named bundle.css with following content will be created (actual hash can be different):

.localName--hc2cb51f4 { background: red; }

Import of this module in JS bundle will be resolved to class name map:

// ... var result = {localName: "localName--hc2cb51f4"}; var test_module_default = result; // ...

Options

When instantiating plugin you can pass an optional objects with options. This object has following type:

interface Options { localIdentName?: string; extension?: string; }