egoist / egoist/rollup-plugin-postcss
include/exclude patterns in plugin for conditionally applying modules only on non-node_modules files
- Dominant language
- JavaScript
- Stars
- 689
- Forks
- 210
- PR merge metrics
- No merged PRs in 30d
Description
**Use case:**
- package A has a css file, `a/style.css` and builds with this plugin, class names use `modules`.
- package B has its own css file, `b/style.css` and also imports `a/style.css`
**Result:**
- package B uses `modules` on both `a/style.css` and `b/style.css`, meaning that `a/style.css` goes through `modules` 2nd time, which makes class names different than what a JS files refer to.
**Solution:**
Having `include`/`exclude` patterns like many other rollup plugins, it'd be possible to apply `postcss` only on a portion of the files with some config, and apply it on others with a different config.
In webpack, each loader has this option, which allows me to apply css-loader?modules on `src` and `css-loader` without modules on `node_modules` files.
**Workaround:**
To prevent applying `modules` on css files in `node_modules`, in a local `.css` file in `package-b`, add an import for a css file in `package-a` using postcss `:global`. This ensures the class names inside the block don't get mangled.
Noice the `~` which tells the processor to include the file from a module in `node_modules`.
Also the imported file needs to be the already-built file, e.g. the one in `dist`. This file contains the mangled classes as they were built for package-a source.
```css
/* package-b/src/style.css */
:global { @import "~package-a/dist/style.css"; }
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.