Parcel: postcss not working with config file, but with postcss key in package.json only

[9oelM]

🐛 bug report

Parcel says you can provide postcss configs using .postcssrc (JSON), .postcssrc.js, or postcss.config.js.. But this does not just work! Parcel misses out on this file for some reason.

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

So here's my project using parcel, and this is the tree structure:

$ tree -L 2 -a -I "dist|build|node_modules|\.cache|\.c9|\.git"                                                 
.
├── .babelrc
├── .eslintrc.js
├── .gitignore
├── .prettierrc.js
├── .travis.yml
├── LICENSE
├── README.md
├── client
│   ├── App.js
│   ├── App.sass
│   ├── __tests__
│   ├── components
│   ├── index.html
│   └── index.js
├── gulpfile.babel.js
├── issue.md
├── package.json
├── postcss.config.js
├── renovate.json
└── server
    ├── __tests__
    ├── controller
    ├── index.js
    ├── models
    └── view

And this is postcss.config.js (I tried .postcssrc and .postcssrc.js as well, supposing the name might might might.. be a problem but it wasn't)

module.exports = {
  modules: true,
  plugins: {
    autoprefixer: true,
  },
}

And package.json:

{
  "name": "super-fullstack",
  "version": "1.0.0",
  "description": "react + express + nodejs + MongoDB boilerplate",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "parcel -p 8080 client/index.html",
    "build": "NODE_ENV=production parcel -p 8080 build client/index.html --out-dir build"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/9oelM/super-fullstack.git"
  },
  "author": "",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/9oelM/super-fullstack/issues"
  },
  "homepage": "https://github.com/9oelM/super-fullstack#readme",
  "dependencies": {
    "components": "^0.1.0",
    "express": "^4.16.3",
    "fetch-jsonp": "^1.1.3",
    "http-proxy-middleware": "^0.19.0",
    "normalize.css": "^8.0.0",
    "parcel-bundler": "^1.10.2",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "sass": "^1.14.1"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.0.0",
    "autoprefixer": "^9.1.5",
    "cssnano": "^4.1.4",
    "eslint": "^5.6.1",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.11.1",
    "gulp": "^4.0.0",
    "gulp-eslint": "^5.0.0",
    "gulp-nodemon": "^2.2.1",
    "gulp-prettier": "^2.0.0",
    "gulp-run-command": "0.0.9",
    "postcss-modules": "^1.4.1"
  }
}

🤔 Expected Behavior && Current Behavior

So expectedly, according to what parcel says, it's gotta process css codes to transform them. But it just doesn't.

Here's what I did to test this:

1. I installed autoprefixer and postcss-modules:
   npm install --save-dev postcss-modules autoprefixer
   and set config with postcss.config.js

1. I wrote App.sass:

   div#hello-container
   display: flex
   justify-content: center
   align-content: center
   align-items: center
   height: 100%
   h1#hello
       font-size: 50px
   

   and I know it's gotta be transformed to:

   div#_hello-container_d8koz_1 {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-pack: center;
       justify-content: center;
   -ms-flex-line-pack: center;
       align-content: center;
   -ms-flex-align: center;
       align-items: center;
   height: 100%;
   }
   div#_hello-container_d8koz_1 h1#_hello_d8koz_1 {
   font-size: 50px;
   }
   

   this when I run parcel.

2. And obviosuly I made App.js

   import React from "react"
   import "./App.sass"
   import "normalize.css"
   import Hello from "./components/Hello"
   
   const App = () => (
   <div id="hello-container">
     <h1 className="hello">Hello from React</h1>
     <Hello />
   </div>
   )
   
   export default App
   

3. I ran parcel client/index.html

4. I checked the css bundle inside dist folder and it was still:

   div#_hello-container_d8koz_1 {
   display: flex;
   justify-content: center;
   align-content: center;
   align-items: center;
   height: 100%;
   }
   div#_hello-container_d8koz_1 h1#_hello_d8koz_1 {
   font-size: 50px;
   }
   

   which is obviously not transformed.

💁 Troubleshooting

Well, at least there is a workaround: adding postcss key to package.json.

So I edited package.json by adding postcss:

{
  "name": "super-fullstack",
  "version": "1.0.0",
  "description": "react + express + nodejs + MongoDB boilerplate",
  "main": "index.js",

  ...

  "postcss": {
    "modules": true,
    "plugins": {
      "autoprefixer": {
        "browsers": [
          ">1%",
          "last 4 versions",
          "Firefox ESR",
          "not ie < 9"
        ],
        "flexbox": "no-2009"
      }
    }
  }
}

and now, the transformation works again. What's even more weird is that if you change the value of autoprefixer to true like

"autoprefixer": true,

or do something like

"autoprefixer": {
  "grid": true
}

the transformation will not again work. What??!?

Please help me. I know it works with package.json but it's just not pretty putting postcss key in there. I wanna keep it clean.

💻 Code Sample

You can reproduce this problem in this way:

1. git clone https://github.com/9oelM/super-fullstack.git
2. edit package.json to delete the whole postcss key and its value
3. run parcel client/index.html
4. check the css bundle inside dist folder.

🌍 Your Environment

FYI, I'm using c9.io.

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.10.2
| Node | v6.11.2
| npm/Yarn | 3.10.10
| Operating System | Linux [c9] #1 SMP Wed Aug 15 22:48:26 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux

[KirinHuang]

my parcel version is 1.10.3, have the same problem, after i delete the .cache, is working

[9oelM]

@KirinHuang I have tried that too, but it's not working for me

[didimedina]

Any luck on this? I have a similar setup and having the same problem. :/

[9oelM]

@didimedina I don't think anybody's coming up with solutions :(

[bard]

Just came across the same problem.

Apparently autoprefixer is only run when a browserslist config is available, because when I placed a .browserslistrc in my project's dir or a browserslist entry in package.json it started working.

That would also explain why things worked for @9oelM when he added a browsers field in autoprefixer's package.json entry.

[lvkins]

Since 2017 parcel is unable to handle css modules properly, such a shame. I'm thinking about moving to webpack again 🤔

[9oelM]

@lvkins no reason not to. Sorry for parcel, but I already have moved.

[ataucher]

I'm getting that same issue, but even adding a postcss key in package.json doesn't work either using these versions:

parcel 1.12.4
autoprefixer: 9.7.6

Found older versions worked fine:

parcel 1.4.1
autoprefixer: 7.2.4

Using only

"autoprefixer": {
  "grid": true
}

Is there any fix to this in Parcel 2?

[StarpTech]

I run into the same issue with the latest Parcel version. Using the postcss key in the package.json only works with modules: true plugins are ignored.

[ianwalter]

I had this problem and switching to parcel@next seems to have fixed it for me.

[0xbkt]

postcss.config.js is not being honored at all. Furthermore, I can't get postcss-import-url to work.

Edit: Working fine now with .parcel-cache purged.

[DeMoorJasper]

@0xbkt which parcel version? Does it work with parcel@next?

[pykenny]

Getting similar problem now. I'm using nightly build because that's PostCSS's official suggestion to integrate with PostCSS 8 and make the latest autoprefixer work (it doesn't work on v1 and v2/next).

Originally I use postcss.config.js and add up two plugins in the settings below:

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-flexbugs-fixes')
  ]
}

(Another question: I'm not sure if we still need to add postcss-modules in project dependencies as v1 do. It's required from v1's documentation, but never mentioned in v2's.)

It still works in v2, but you'll always get message for not using JSON config format. So I tried using this JSON to replace the original config:

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

There was no warning or error message appear during the bundling process. However, the output didn't work and I got this kind of error message in Chrome browser:

Uncaught Error: Cannot find module '66RSb'
    at newRequire (editor.60397e66.js:59)
    at newRequire (editor.60397e66.js:43)
    at localRequire (editor.60397e66.js:81)
    at Object.4C0mh.react (App.jsx:6)
    at newRequire (editor.60397e66.js:69)
    at editor.60397e66.js:118
    at editor.60397e66.js:141

Resource interpreted as Stylesheet but transferred with MIME type application/javascript: "http://localhost:1234/editor.5ad8ee3a.js".

Did I miss any required modules, or have some mistake in the config file?

[mischnic]

This works for me:

<script src="index.js"></script>

```js
import * as styles from "./index.css";

console.log(styles);

```css
.a {
    color: red;
}

.postcssrc:

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

I'm not sure if we still need to add postcss-modules in project dependencies

https://github.com/parcel-bundler/website/issues/758