https://github.com/indooorsman/esbuild-css-modules-plugin

A esbuild plugin to bundle css modules into js(x)/ts(x)
https://github.com/indooorsman/esbuild-css-modules-plugin

css css-modules esbuild esbuild-plugin lightningcss

Last synced: about 1 month ago
JSON representation

A esbuild plugin to bundle css modules into js(x)/ts(x)

• Host: GitHub
• URL: https://github.com/indooorsman/esbuild-css-modules-plugin
• Owner: indooorsman
• License: mit
• Created: 2021-03-05T05:52:21.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-04-25T14:39:19.000Z (7 months ago)
• Last Synced: 2024-10-01T03:05:38.329Z (about 1 month ago)
• Topics: css, css-modules, esbuild, esbuild-plugin, lightningcss
• Language: JavaScript
• Homepage:
• Size: 180 KB
• Stars: 91
• Watchers: 3
• Forks: 16
• Open Issues: 4
• Metadata Files:
  • Readme: readme.md
  • Changelog: changelog.md
  • License: license

Awesome Lists containing this project

README

        
# esbuild-css-modules-plugin

[![npm version](https://img.shields.io/npm/v/esbuild-css-modules-plugin)](https://www.npmjs.com/package/esbuild-css-modules-plugin)

[![Test](https://github.com/indooorsman/esbuild-css-modules-plugin/actions/workflows/test.yml/badge.svg)](https://github.com/indooorsman/esbuild-css-modules-plugin/actions/workflows/test.yml)

A esbuild plugin to bundle css modules into js(x)/ts(x). Based on extremely fast [Lightning CSS](https://lightningcss.dev/)

Works both with `bundle: false` and `bundle: true`.

If build with `bundle: false`, `xxx.modules.css` will be transformed to `xxx.modules.css.js`.

See [index.d.ts](https://github.com/indooorsman/esbuild-css-modules-plugin/blob/main/index.d.ts) for all settings & [`./test/test.js`](https://github.com/indooorsman/esbuild-css-modules-plugin/blob/main/test/test.js) for examples.

## Install

```shell

npm i -D esbuild-css-modules-plugin

```

or

```shell

yarn add -D esbuild-css-modules-plugin

```

## Usage

```js

import esbuild from 'esbuild';

import CssModulesPlugin from 'esbuild-css-modules-plugin';

esbuild.build({

  plugins: [

    CssModulesPlugin({

      // @see https://github.com/indooorsman/esbuild-css-modules-plugin/blob/main/index.d.ts for more details

      force: true,

      emitDeclarationFile: true,

      localsConvention: 'camelCaseOnly',

      namedExports: true,

      inject: false

    })

  ]

});

```