egoist / egoist/rollup-plugin-postcss

include/exclude patterns in plugin for conditionally applying modules only on non-node_modules files

Open
#253 2 comments 6 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.