Newts Parading Majestically

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

    0.1.3 • Public • Published

    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:

    node build.js

    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;
    }
    • localIdentName - pattern for renaming local CSS class names. Defaults to [hash]. Can contain following replacement tokens:

      • [local] - local class name
      • [ext] - original file name extension
      • [name] - original file local name (without path)
      • [path] - only path of full original file name
      • [folder] - local name of a parent folder of original file
      • [hash], [hash:length], [hash:length:algorithm], [hash:length:algorithm:digest] - cryptographic hash of string, built by pattern full_css_file_path:local_class_name, with specified hash algorithm, digest type and maximum result string length. For example, [hash:8:md4:base64]. Supported digest types: base64 and hex. Supported algorithms: md4, md5, sha256 and sha512. Default algorithm is md4, default digest is hex, default maximum length is 32
    • extension - file extension to enable CSS-modules for. Defaults to .module.css

    Install

    npm i esbuild-plugin-css-modules

    DownloadsWeekly Downloads

    749

    Version

    0.1.3

    License

    ISC

    Unpacked Size

    16.8 kB

    Total Files

    8

    Last publish

    Collaborators

    • koluch