esbuild-plugin-sass-modules

esbuild-plugin-sass-modules

Plugin for esbuild to support SASS modules

What this plugin supports

• Provides a default javascript-based css loader implementation. Just import css or scss in your code, and it will be loaded through Javascript.
• Compiles your global .sass files into css.
• Compiles your *.module.css files into css + class map.
• Compiles your *.module.scss files into css + class map.
• Produces .d.ts typings for modules, so that you get intellisense and build validation.
• Resolves @import '~package/path.scss' package imports.

Install

npm i esbuild esbuild-plugin-sass

In your esbuild config:

import sassPlugin from 'esbuild-plugin-sass-modules';

esbuild.build({
  // ...,

  plugins: [
    sassPlugin()
  ]
})

Usage example

Create file src/test.scss:

body {
  &.isRed {
    background: red;
  }
}

Create file src/index.js:

import "./test.scss";

Create file build.js:

const esbuild = require("esbuild");
const sassPlugin = require("esbuild-plugin-sass");

esbuild
  .build({
    entryPoints: ["src/index.js"],
    bundle: true,
    outfile: "bundle.js",
    plugins: [sassPlugin()],
  })
  .catch((e) => console.error(e.message));

Run:

node build.js

File named bundle.css with following content will be created:

body.isRed {
  background: red;
}

Why this plugin?

I built this plugin to ensure we have proper support for SASS, SASS modules, and CSS modules in one plugin. Having one plugin, rather than chaining multiple plugins together, has the benefit of reducing the amount of disk I/O and performance overhead of esbuild calling into JavaScript extraneously.

• Better performance
• Simplicity for the dev; no need to chain
• Able to resolve sass from other packages