Parcel: Enabling PostCSS modules breaks my styles

[telmotrooper]

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

package.json

...
"dependencies": {
    ...
    "autoprefixer": "^9.6.1",
    "cssnano": "^4.1.10",
    "parcel-bundler": "^1.12.3",
    "postcss-flexbugs-fixes": "^4.1.0",
    "postcss-modules": "^1.4.1",
    "sass": "^1.22.7",
}

.postcssrc

{
  "modules": true,
  "plugins": {
    "autoprefixer": {},
    "postcss-flexbugs-fixes": {}
  }
}

🤔 Expected Behavior

I should be able to use PostCSS modules and have my current SASS styles working.

😯 Current Behavior

As soon as I enable "modules": true in .postcssrc the styles in my application (which is a .scss file that imports others) stop working.

💁 Possible Solution

I attempt to use postcss-scss since I was under the impression Parcel was not properly transpiling my classes but that ended up throwing an error for me which I just can't find the solution for.

.postcssrc

{
  "modules": true,
  "syntax": "postcss-scss",
  "plugins": {
    "autoprefixer": {},
    "postcss-flexbugs-fixes": {}
  }
}

🚨  /home/telmo/Development/intelliAgent/client/src/styles/_main.scss:undefined:undefined: Cannot read property 'stringify' of undefined
    at LazyResult.stringify (/home/telmo/Development/intelliAgent/client/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.es6:369:13)
    at stringify (/home/telmo/Development/intelliAgent/client/node_modules/parcel-bundler/node_modules/postcss/lib/lazy-result.es6:320:19)

🔦 Context

I'm trying to migrate an existing (and considerably big) project from Webpack to Parcel, the only issue I wasn't able to fix yet was being able to use both "autoprefixer" and "postcss-flexbugs-fixes".

The thing is that, when I use "modules": true in .postcssrc the styles in my application simply do not show. I don't get any errors on Parcel, the plugins themselves work but not with my styles.

💻 Code Sample

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | ^1.12.3
| Node | v10.16.0
| npm/Yarn | 6.10.2
| Operating System | Ubuntu 18.04.2

[telmotrooper]

Update: I just realised that the names of my classes are being changed when "modules": true. For example: ia-login-form-container became _ia-login-form-container_9c11a in the .css file.

[artamonJr]

Update: I just realised that the names of my classes are being changed when "modules": true. For example: ia-login-form-container became _ia-login-form-container_9c11a in the .css file.

I came across with this problem and after some tries I changed my ,postcssrc file into { "plugins": { "autoprefixer": {} } }
Maybe it'll help you

[telmotrooper]

@madnessJs I thought that by disabling "modules": true the plugins would not just, but that's no true. I think the documentation at https://parceljs.org/css.html#postcss should not show "modules": true in the basic example for a PostCSS setup.