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

[rafegoldberg]

🐛 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,¹ 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 <rafegoldberg@gmail.com>",
}

.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

Footnotes

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

[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? 😄

[rafegoldberg]

@devongovett thanks for the pointers; I’d love to contribute! Will open a PR if I can figure it out for myself.

[rafegoldberg]

So I pulled down Parcel and nearly got it set up. But I kept running in to a problem with the fsevents package throwing a gyp: No Xcode or CLT version detected! error on install. Here few things I tried, to no avail…

1. Removing the lockfile, which allowed me to get through the install without the gyp error, but broke when I tried to build my example!
2. Setting a resolution to fsevents@2.x (in the root, and then the core/ packages.) This did nothing, and I probably did it wrong since I'm a yarn noob?
3. Downgrading my Node version (from v14.15.1 to v12.22.7) which seemed to fix some, but not all of the install errors, but still broke on build.

Despite my best efforts, whenever I tried to run the build script in the examples/simple/ package, it'd whine and exit:

TypeError: fs.findAncestorFile is not a function
    at resolveConfig (~/packages/core/utils/src/config.js:38:21)
    at resolveOptions (~/packages/core/core/src/resolveOptions.js:54:12)
    at Parcel._init (~/packages/core/core/src/Parcel.js:92:48)
    at Parcel.watch (~/packages/core/core/src/Parcel.js:198:7)
    at run (~/packages/core/parcel/src/cli.js:320:22)

My system info is as follows, if anyone'd care to help me out:

	Version
Parcel	v2.0.0
Node	v14.15.1 and v12.22.7
NPM	v7.5.4 and v6.14.15
macOS	v11.5

Anyways, I've gotta jump off this for the day. Will try to look at this again and get myself up and running this week!

[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.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.