Parcel ignores the PostCSS config for one-off ‘.module.css’ stylesheets.

🐛 Bug Report

Parcel lets you enable CSS modules on a per-file basis by appending the .module suffix to an individual Sass or CSS sheet. This works amazingly well with zero configuration! (I shudder to think of the hundred-line Weback config I’d have to write otherwise… 🤯) That said, I ran in to some weird behavior when I tried to customize the generateScopedName pattern in my .postcssrc config per the docs.

Worth noting—I’m aware CSS modules + configuration has been discussed elsewhere,^1 but most of those issues are stale or only tangentially related to the concerns herein. In any case, I figured it was worth writing up the errant behavior and what I’d expect instead. Feel free to close this out if it’s redundant!

🎛 Configuration

package.json

{
  "name": "demo",
  "version": "0.0.0",
  "source": "index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@parcel/transformer-sass": "^2.0.0",
    "autoprefixer": "^10.3.7",
    "parcel": "^2.0.0",
  },
  "author": "Rafe <[e-mail]>",
}

.postcssrc

{
  "plugins": {
    "postcss-modules": {
      "generateScopedName": "[local][hash:6]"
    }
  }
}

🤔 Behavior

Current Behavior

Per @devongovett’s comment, Parcel will only take the generateScopedName option in to account when CSS modules are enabled globally in the .postcssrc config: (This is hinted at in the docs, though it’s not entirely clear on first read.)

{
  "modules": true, 
  "plugins": {

Adding that line does “fix” scoped selector generation so it respects the configured pattern. But it also forces all other stylesheets to be imported as CSS modules by default… 😬

Expected Behavior

Since Parcel supports mixing global and scoped stylesheets right out of the box, I’d argue that the current behavior is, as it stands now, actually quite “broken”. If a developer has defined a scoping pattern in their PostCSS configuration file, the reasonable expectation (at least to my mind) would be for Parcel to respect said config anywhere and anytime a scoped stylesheet is imported. Even for a one-off .module file. Regardless of whether scoping is or is not enabled globally! 🙃

💁 Further Context

I haven’t dove in to the source, so I can’t offer much in the way of technical solutions or suggestions… As for context, I personally came across this problem because the default scoping pattern’s _ prefix was causing issues with a little BEM utility I’ve been tinkering on.

Environment

| Version ----------😐:---------- Parcel | v2.0.0 Node | v14.15.1 NPM | v7.5.4 macOS | v11.5

  https://github.com/parcel-bundler/parcel/issues/1930#issuecomment-446177458

[mischnic]

You probably have to install Xcode or the Xcode Command Line Tools

fs.findAncestorFile is not a function

Run yarn build-native to build the Rust packages.

[devongovett]

Seems reasonable to merge the modules config with the .postcssrc. The logic for that is here: https://github.com/parcel-bundler/parcel/blob/v2/packages/transformers/postcss/src/loadConfig.js#L34-L43. Want to submit a PR? 😄