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

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

1. I ran parcel client/index.html

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