# esbuild-plugin-class-modules

> > An esbuild plugin to compile your css stylesheets using [Sass-lang](https://sass-lang.com/documentation/js-api/modules#compile), [PostCSS](https://postcss.org) and [CSS Modules.](https://github.com/css-modules/css-modules) > Supports global and local sc

Latest version **2.1.9** (published 2023-06-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install esbuild-plugin-class-modules
pnpm add esbuild-plugin-class-modules
yarn add esbuild-plugin-class-modules
bun add esbuild-plugin-class-modules
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.9 |
| Published | 2023-06-03 |
| First published | 2022-10-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 13.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Inqnuam |
| Maintainers | inqnuam |
| Keywords | esbuild, plugin, sass, class, css, style, module |

## Links

- npm: https://www.npmjs.com/package/esbuild-plugin-class-modules
- Repository: https://github.com/inqnuam/esbuild-plugin-class-modules
- npm.io page: https://npm.io/package/esbuild-plugin-class-modules

## Dependencies (3)

- [sass](https://npm.io/package/sass.md) ^1.62.1
- [postcss](https://npm.io/package/postcss.md) ^8.4.23
- [postcss-modules](https://npm.io/package/postcss-modules.md) ^5.0.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 2.1.9 (latest) — 2023-06-03
- 2.1.8 — 2023-05-29
- 2.1.7 — 2023-05-24
- 2.1.6 — 2023-05-24
- 2.1.5 — 2023-05-19
- 2.1.4 — 2023-05-19
- 2.1.3 — 2023-02-22
- 2.1.2 — 2023-02-19
- 2.1.1 — 2023-02-12
- 2.1.0 — 2022-12-25
- 2.0.0 — 2022-12-13
- 2.0.0-alpha.1 — 2022-12-11
- 2.0.0-alpha.0 — 2022-12-08
- 1.0.6 — 2022-10-09
- 1.0.5 — 2022-10-08
- … 5 more at https://npm.io/package/esbuild-plugin-class-modules/versions

## README

## Description

> An esbuild plugin to compile your css stylesheets using [Sass-lang](https://sass-lang.com/documentation/js-api/modules#compile), [PostCSS](https://postcss.org) and [CSS Modules.](https://github.com/css-modules/css-modules)  
> Supports global and local scoped outputs.

# Installation

```bash
yarn add -D esbuild-plugin-class-modules
# or
npm install -D esbuild-plugin-class-modules
```

## Usage

```js
const esbuild = require("esbuild");
const { classModules } = require("esbuild-plugin-class-modules");

esbuild
  .build({
    entryPoints: ["input.js"],
    outdir: "public",
    bundle: true,
    plugins: [classModules()],
  })
  .then((result) => console.log(result))
  .catch(() => process.exit(1));
```

You can also customize Sass compiler, PostCSS and CssModules options.

```js
const cssCompilerOptions = {
  options: {
    sass: {},
    postcss: [],
    cssModules: {

    }
  },
}

// usual esbuild config
{
 ...
 plugins: [classModules(cssCompilerOptions)],
 ...
}

```

By default following file extensions will be considered by the compiler:

    - .css
    - .module.css
    - .modules.css
    - .scss
    - .module.scss
    - .modules.scss
    - .sass

using the regex `/(\.modules?)?\.((s)?css|sass)$/i` .  
To customize this filter passe `filter` regex into plugin options.  
Example to handle only `.scss` files:

```javascript
const cssCompilerOptions = {
  filter: /\.scss$/i,
  options: {
    sass: {},
    postcss: [],
    cssModules: {},
  },
};
```

### Local and Global scops

By default any file ending with `.global.css scss etc.` is considered as global.
To customize this behavior set `globalModulePaths` into plugins `cssModules`.  
Default is `[/\.global\.(s?css|sass)$/]`.  
See [CSS Modules](https://github.com/css-modules/css-modules) for more info.

Another way to declare class names as global scoped is to use nameless import/require.  
Ex:

```javascript
import "./myAwsomeStyles.scss";
```

or as local scoped with named import/require:

```javascript
import style from "./myAwsomeStyles.scss";
```

### Usage with multiple css processor plugins

For better compatibility with other css processors it's prefered to put `esbuild-plugin-class-modules` at after all other css plugins in your esbuild config.

```js
const esbuild = require("esbuild");
const lessCssPlugin = require("some-less-processor-plugin");
const { classModules } = require("esbuild-plugin-class-modules");

esbuild
  .build({
    entryPoints: ["input.js"],
    outdir: "public",
    bundle: true,
    plugins: [lessCssPlugin, classModules()],
  })
  .then((result) => console.log(result))
  .catch(() => process.exit(1));
```

---
_Source: https://npm.io/package/esbuild-plugin-class-modules · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._