https://github.com/noyobo/esbuild-plugin-auto-css-modules

Automatically import styles filename mark CSS modules. After adding the flag, the build tool can distinguish whether to enable css Modules
https://github.com/noyobo/esbuild-plugin-auto-css-modules

esbuild-plugin

Last synced: 8 months ago
JSON representation

Automatically import styles filename mark CSS modules. After adding the flag, the build tool can distinguish whether to enable css Modules

• Host: GitHub
• URL: https://github.com/noyobo/esbuild-plugin-auto-css-modules
• Owner: noyobo
• Created: 2023-05-22T01:12:16.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-09-27T10:42:14.000Z (over 2 years ago)
• Last Synced: 2025-04-01T17:50:48.513Z (about 1 year ago)
• Topics: esbuild-plugin
• Language: TypeScript
• Homepage:
• Size: 85 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

          
# esbuild-plugin-auto-css-modules

[![npm version](https://badge.fury.io/js/esbuild-plugin-auto-css-modules.svg)](https://badge.fury.io/js/esbuild-plugin-auto-css-modules)

[![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-plugin-auto-css-modules.svg)](https://github.com/noyobo/esbuild-plugin-auto-css-modules/issues)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](#contributing)

[![downloads](https://img.shields.io/npm/dm/esbuild-plugin-auto-css-modules.svg)](https://www.npmjs.com/package/esbuild-plugin-auto-css-modules)

[![Code Coverage](https://codecov.io/gh/noyobo/esbuild-plugin-auto-css-modules/branch/main/graph/badge.svg)](https://codecov.io/gh/noyobo/esbuild-plugin-auto-css-modules)

[![Node.js CI](https://github.com/noyobo/esbuild-plugin-auto-css-modules/actions/workflows/node.js.yml/badge.svg)](https://github.com/noyobo/esbuild-plugin-auto-css-modules/actions/workflows/node.js.yml)

Automatically import styles filename mark CSS modules. After adding the flag, the build tool can distinguish whether to enable css Modules

## Install

```bash

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

```

## Usage

```js

import { build } from 'esbuild'

import { autoCssModules } from 'esbuild-plugin-auto-css-modules'

build({

  entryPoints: ['src/index.js'],

  bundle: true,

  outfile: 'dist/index.js',

  plugins: [autoCssModules()],

}).catch(() => process.exit(1))

```

```js

// before

import styles from './index.css';

```

```js

// after

import styles from './index.css?modules';

```

## Options

```ts

type Options = {

    filter?: RegExp; // default: /\.([tj]sx?)$/

    flag?: string; // default: modules

    ignore?: RegExp | ((filename: string) => boolean); // default: null

}

```

## Related

- [esbuild-style-loader](https://npmjs.com/package/esbuild-style-loader) - esbuild style loader plugin