Skip to content

Commit ee9dba5

Browse files
committed
DOCS
1 parent ec4b59b commit ee9dba5

File tree

1 file changed

+41
-0
lines changed

1 file changed

+41
-0
lines changed

Readme.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22

33
Yet another css modules plugin for esbuild? Pleaso no?
44

5+
<details>
6+
<summary>Read more about the "why"...</summary>
7+
58
Yes sorry, i know there are a few implementions already out there:
69

710
- @asn.aeb/esbuild-css-modules-plugin
@@ -18,3 +21,41 @@ The above implementations mostly rely on `post-cssmodules` and thus dont sucessf
1821
With one exception: `esbuild-css-modules-plugin`, this plugin uses also lightningcss as its core, but doesnt support composes yet and due to a more complex inject feature it is a bit more complex. I discussed with the maintainer if we would want to merge our two packages but due to limited time and different usecases (https://github.com/indooorsman/esbuild-css-modules-plugin/issues/53) im here to present my super simple implemented css module plugin for esbuild.
1922

2023
The plugin is already tested (on linux and mac) and used to build the following bigger project https://github.com/neos/neos-ui with around 100 css modules - it is inlined in the project though to reduce dependencies and maintaining burdens for now.
24+
</details>
25+
26+
## Usage
27+
28+
```js
29+
build({
30+
...,
31+
plugins: [
32+
cssModules(
33+
{
34+
// add your own or other plugins in the "visitor" section see
35+
// https://lightningcss.dev/transforms.html
36+
// visitor: myLightningcssPlugin(),
37+
targets: {
38+
chrome: 80 // aligns somewhat to es2020
39+
},
40+
drafts: {
41+
nesting: true
42+
},
43+
// pattern: 'my-company-[name]-[hash]-[local]'
44+
}
45+
)
46+
]
47+
})
48+
```
49+
50+
for further details look into: https://lightningcss.dev/css-modules.html
51+
52+
## Advanced options
53+
### `includeFilter` and `excludeFilter`
54+
These options only exist for odd / legacy codebases.
55+
Normally it is asummed that your css module files end with `.module.css`.
56+
If this is not the case, and they end with `.css` while you still want to exclude certain normal css from beeing treated as css module you can leverage the two filters like this:
57+
58+
```js
59+
includeFilter: /\.css$/,
60+
excludeFilter: /@fortawesome\/fontawesome-svg-core\/|my-normal-css-file\.css|normalize\.css/,
61+
```

0 commit comments

Comments
 (0)