@parcel/transformer-postcss: PostCSS config must have plugins

[hydrognomik]

🐛 bug report

Can't build using scss and postcss-modules. Repo

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

.babelrc

{
    "presets": [
        "@parcel/babel-preset-env",
        ["@babel/typescript", { "jsxPragma": "h" }]
    ],
    "plugins": [["@babel/transform-react-jsx", { "pragma": "h" }]]
}

.postcssrc

{
    "modules": true,
    "plugins": {
        "postcss-modules": {
            "generateScopedName": "[folder]__[local]___[hash:base64:6]"
        }
    }
}

package.json

{
    "name": "sample",
    "version": "1.0.0",
    "scripts": {
        "dev": "parcel serve ./src/index.html",
        "build": "parcel build ./src/index.html"
    },
    "devDependencies": {
        "@babel/core": "^7.13.14",
        "@babel/preset-typescript": "^7.13.0",
        "@parcel/transformer-sass": "2.0.0-beta.2",
        "@parcel/transformer-typescript-tsc": "^2.0.0-beta.1",
        "parcel": "^2.0.0-beta.2",
        "postcss": "^8.2.1",
        "prettier": "^2.2.1",
        "typescript": "^3.9.9"
    },
    "dependencies": {
        "preact": "^10.5.13"
    },
}

🤔 Expected Behavior

Successful build.

😯 Current Behavior

🚨 Build failed.
@parcel/transformer-postcss: PostCSS config must have plugins
Error: PostCSS config must have plugins
    at load (/Users/aleksey/Sites/sample/node_modules/@parcel/transformer-postcss/lib/loadConfig.js:141:13)
    at async Transformation.loadTransformerConfig (/Users/aleksey/Sites/sample/node_modules/@parcel/core/lib/Transformation.js:741:7)
    at async Transformation.loadPipeline (/Users/aleksey/Sites/sample/node_modules/@parcel/core/lib/Transformation.js:679:20)
    at async Transformation.loadNextPipeline (/Users/aleksey/Sites/sample/node_modules/@parcel/core/lib/Transformation.js:717:24)
    at async Transformation.runPipelines (/Users/aleksey/Sites/sample/node_modules/@parcel/core/lib/Transformation.js:434:24)
    at async Transformation.run (/Users/aleksey/Sites/sample/node_modules/@parcel/core/lib/Transformation.js:316:19)
    at async Child.handleRequest (/Users/aleksey/Sites/sample/node_modules/@parcel/workers/lib/child.js:255:9)

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-beta.2
Node	14.15.3
npm/Yarn	[email protected]
Operating System	MacOS 11.2.1

[mischnic]

Unrelated: you should remove "main": "index.html" from your package.json

---

This is a bug where we mutate a cached config file and then the modified version is then returned instead of the original one for the next call.

[hydrognomik]

Thank you. Will cloning configFile.plugins be enough to fix it?

[mischnic]

That should work

[Fasunle]

In my case, I just added the plugins to postcss.config.js module as follow:

  // postcss.config.js
  module.exports = {
    plugins: [
      require("autoprefixer"),
      require("postcss-nested"),
      require("postcss-scss"),
    ],
  };