# esbuild-style-loader

> A style loader for esbuild, support for CSS, SCSS, LESS, Stylus, and CSS Modules.

Latest version **0.3.4** (published 2024-12-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install esbuild-style-loader
pnpm add esbuild-style-loader
yarn add esbuild-style-loader
bun add esbuild-style-loader
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.4 |
| Published | 2024-12-18 |
| First published | 2023-05-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 40 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | noyobo |
| Keywords | esbuild, esbuild-loader, esuild-css-modules |

## Links

- npm: https://www.npmjs.com/package/esbuild-style-loader
- Repository: https://github.com/noyobo/esbuild-style-loader
- Issues: https://github.com/noyobo/esbuild-style-loader/issues
- npm.io page: https://npm.io/package/esbuild-style-loader

## Dependencies (9)

- [less](https://npm.io/package/less.md) ^4.2.1
- [colors](https://npm.io/package/colors.md) 1.4.0
- [deepmerge](https://npm.io/package/deepmerge.md) ^4.3.1
- [change-case](https://npm.io/package/change-case.md) ^4.1.2
- [browserslist](https://npm.io/package/browserslist.md) ^4.24.3
- [lightningcss](https://npm.io/package/lightningcss.md) ^1.28.2
- [query-string](https://npm.io/package/query-string.md) ^7.0.1
- [less-plugin-npm-import](https://npm.io/package/less-plugin-npm-import.md) ^2.1.0
- [less-plugin-module-resolver](https://npm.io/package/less-plugin-module-resolver.md) ^1.0.3

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.3.4 (latest) — 2024-12-18
- 0.2.2 (v02) — 2024-12-10
- 0.3.2-beta.2 (beta) — 2024-12-10
- 0.3.3 — 2024-12-18
- 0.3.2 — 2024-12-12
- 0.3.2-beta.1 — 2024-12-10
- 0.3.2-beta.0 — 2024-12-10
- 0.3.1 — 2024-06-21
- 0.3.0 — 2024-06-21
- 0.2.1 — 2024-06-11
- 0.2.0 — 2024-03-04
- 0.1.19 — 2024-01-02
- 0.1.18 — 2023-11-14
- 0.1.17 — 2023-11-14
- 0.1.16 — 2023-09-27
- … 17 more at https://npm.io/package/esbuild-style-loader/versions

## README

# esbuild-style-loader

[![npm version](https://badge.fury.io/js/esbuild-style-loader.svg)](https://badge.fury.io/js/esbuild-style-loader)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![issues](https://img.shields.io/github/issues/noyobo/esbuild-style-loader.svg)](https://github.com/noyobo/esbuild-style-loader/issues)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](#contributing)
[![downloads](https://img.shields.io/npm/dm/esbuild-style-loader.svg)](https://www.npmjs.com/package/esbuild-style-loader)
[![Code Coverage](https://codecov.io/gh/noyobo/esbuild-style-loader/branch/main/graph/badge.svg)](https://codecov.io/gh/noyobo/esbuild-style-loader)
[![Node.js CI](https://github.com/noyobo/esbuild-style-loader/actions/workflows/node.js.yml/badge.svg)](https://github.com/noyobo/esbuild-style-loader/actions/workflows/node.js.yml)

A style loader for esbuild, support for CSS, SCSS, LESS, Stylus, and CSS Modules.

## Features

- [x] Zero configuration
- [x] Support for CSS Modules
- [x] Support for LESS `builtin`
- [x] Support for CSS
- [x] Autoprefixer for CSS
  - default: `ios >= 11, android >= 5, chrome >= 54`
- [x] Support sourceMap
- [x] Fast compiler engine by [lightningcss](https://lightningcss.dev/)

## Default behavior

The following rules enable css-modules

1. The file name ends with `/.modules?\.(css|less|scss|sass|styl)/`
2. The file query contains `modules` or `modules=true`
   - Can be used with plugins [esbuild-plugin-auto-css-modules](https://www.npmjs.com/package/esbuild-plugin-auto-css-modules)

```ts
import styles from './style.css?modules';
import styles from './style.module.css';
import styles from './style.modules.css';
import styles from './style.less?modules';
import styles from './style.module.less';
import styles from './style.modules.less';
```

Normal CSS files are not treated as CSS Modules

```ts
import './style.css';
import './style.less';
import styles from './style.css';
import styles from './style.less';
```

## Usage

```ts
import { build } from 'esbuild';
import { styleLoader } from 'esbuild-style-loader';

const buildOptions = {
  plugins: [
    styleLoader({
      filter: /\.(css|less|scss|sass|tyss)(\?.*)?$/,
      /**
       * Process file results from other plugins namespace
       */
      namespace: ['native-component', 'file'],
      /**
       * The browser setting for lightningcss
       */
      browsers: 'ios >= 11, android >= 5, chrome >= 54',
      cssModules: {
        pattern: process.env.CI_TEST === 'test' ? '[name]__[local]' : '[local]__[hash]',
      },
      /**
       * The public path for absolute paths in css
       */
      publicPath: __dirname,
    }),
  ],
};
```

if you want to use absolute paths, you can specify the `publicPath` option

## TODO

- [ ] Support for Stylus
- [ ] Support for Sass
  - [x] [sass](https://www.npmjs.com/package/sass)
  - [ ] [node-sass](https://www.npmjs.com/package/node-sass)
  - [ ] [sass-embedded](https://www.npmjs.com/package/sass-embedded)

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