postcss not working with config file, but with postcss key in package.json only #2120

9oelM · 2018-10-10T14:14:26Z

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

I installed autoprefixer and postcss-modules:

npm install --save-dev postcss-modules autoprefixer

and set config with postcss.config.js

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.

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

I ran parcel client/index.html
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:

git clone https://github.com/9oelM/super-fullstack.git
edit package.json to delete the whole postcss key and its value
run parcel client/index.html
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

The text was updated successfully, but these errors were encountered:

KirinHuang · 2018-10-20T15:09:24Z

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

9oelM · 2018-10-28T02:04:21Z

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

didimedina · 2019-03-17T07:29:46Z

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

9oelM · 2019-03-17T09:18:31Z

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

bard · 2019-03-20T20:29:30Z

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 · 2019-10-11T22:53:26Z

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

9oelM · 2019-10-12T07:25:28Z

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

ataucher · 2020-04-17T13:53:53Z

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 · 2020-05-21T10:25:59Z

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 · 2020-06-04T21:51:11Z

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

berkant · 2020-06-19T15:02:27Z

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 · 2020-06-19T15:08:01Z

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

pykenny · 2020-11-03T20:07:25Z

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 · 2020-11-04T09:37:17Z

This works for me:

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

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

console.log(styles);

.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

parcel-bundler/website#758

simerlec · 2021-01-01T15:52:58Z

I had the same issue as @pykenny where it would tell me something along the lines of Uncaught Error: Cannot find module '<some_module_number>'. I realized I had the css file referenced in my index.html file which was no issue in Parcel v1 but caused this error with Parcel v2 (2.0.0-beta.1).

mischnic · 2021-01-01T15:59:41Z

Please open a new issue with a complete code sample

simerlec · 2021-01-01T16:04:33Z

No issue anymore, just thought it might help someone in this thread. Also here's a link to a working public repo https://github.com/simerlec/react-starter

adjenks · 2021-04-15T00:50:01Z

I agree this is a problem for me as well still. I just installed parcel@next and I can only get the process to work using the postcss key in package.json.

adjenks · 2021-04-15T00:53:43Z

Oh, actually, I can only get it to work when I use the key in package.json, or when I use .postcssrc. It doesn't work when the config file is javascript. It seems to open the file, but not use its contents. none of the calls to require() are actually made, but I can see the output of console.log() when I call it at the top of postcss.config.js. Strangely it will only call the js file once, after that I have to clear the cache folder each time.

adjenks · 2021-04-15T17:16:16Z

I was pulling my hair out for a while. I really wanted to use tailwindcss with parcel but I just couldn't edit the postcss config file. It really is working fine now because of the json only workaround. It just comes down to not being able to use a javascript config file for some reason, only json will work. It failed running a javascript config on both the latest version of parcel 1 and also on 2.0.0-beta.2.

Andrew-Dyachenko · 2021-06-17T07:15:02Z

Nothing above helps.
This error nightmares me: @parcel/transformer-postcss: _postcss(...).default.fromJSON is not a function

Andrew-Dyachenko · 2021-06-17T07:44:22Z

A build only works if I remove .postcssrc, but that's not my option

Andrew-Dyachenko · 2021-06-17T09:57:55Z

Since in [email protected] I have the issue: @parcel/transformer-postcss: _postcss(...).default.fromJSON is not a function and in [email protected] there is another issue: Uncaught Error: Cannot find module '7J0y1' in React app, to stop jumping between these versions and try to fix one of the issues to your taste - I managed to get around both of these issues by using packages in combination from different versions and i works!

here are some of the dependencies in my package.json

"devDependencies": {
    "@parcel/optimizer-cssnano": "2.0.0-beta.3.1",
    "@parcel/packager-css": "2.0.0-beta.3.1",
    "@parcel/packager-raw-url": "2.0.0-beta.2",
    "@parcel/transformer-postcss": "2.0.0-beta.3.1",
    "@parcel/transformer-pug": "2.0.0-beta.2",
    "@parcel/transformer-sass": "2.0.0-beta.2",
    "@parcel/transformer-vue": "2.0.0-beta.2",
    "@parcel/transformer-webmanifest": "2.0.0-beta.2",
    "parcel": "2.0.0-beta.2",
},
"dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
}

here is my .postcssrc

{
    "modules": false,
    "plugins": {
        "autoprefixer": {
            "grid": "autoplace",
            "flexbox": true,
            "cascade": false,
            "remove": false
        }
    }
}

So. Now the presence of my .postcssrc file does not cause an error during assembly, and after assembly my React application starts without giving an error stating that the module was not found.

adjenks · 2021-06-17T16:52:06Z

@Andrew-Dyachenko It requires more than just one package to be an old version?

Andrew-Dyachenko · 2021-06-18T06:47:48Z

Basically I used [email protected] and it sub-packages required to build all assets in the project then I upgraded for three sub-packages listed above to @parcel/[email protected] to prevent issue with postcss. That's it.

github-actions · 2021-12-15T12:02:34Z

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.

DeMoorJasper added the 🐛 Bug label Oct 11, 2018

github-actions bot added the Stale Inactive issues label Apr 9, 2020

github-actions bot removed the Stale Inactive issues label Apr 17, 2020

estevanmaito mentioned this issue Jun 3, 2020

Customizing z-index doesn't generate the css rules tailwindlabs/tailwindcss#1875

Closed

mischnic mentioned this issue Nov 4, 2020

Document that postcss-module should also be installed locally in the project parcel-bundler/website#758

Open

adjenks mentioned this issue Apr 15, 2021

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

Closed

github-actions bot added the Stale Inactive issues label Dec 15, 2021

github-actions bot closed this as completed Dec 29, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

postcss not working with config file, but with postcss key in package.json only #2120

postcss not working with config file, but with postcss key in package.json only #2120

9oelM commented Oct 10, 2018 •

edited

Loading

KirinHuang commented Oct 20, 2018

9oelM commented Oct 28, 2018

didimedina commented Mar 17, 2019

9oelM commented Mar 17, 2019

bard commented Mar 20, 2019

lvkins commented Oct 11, 2019

9oelM commented Oct 12, 2019 •

edited

Loading

ataucher commented Apr 17, 2020

StarpTech commented May 21, 2020 •

edited

Loading

ianwalter commented Jun 4, 2020 •

edited

Loading

berkant commented Jun 19, 2020 •

edited

Loading

DeMoorJasper commented Jun 19, 2020

pykenny commented Nov 3, 2020 •

edited

Loading

mischnic commented Nov 4, 2020

simerlec commented Jan 1, 2021 •

edited

Loading

mischnic commented Jan 1, 2021

simerlec commented Jan 1, 2021

adjenks commented Apr 15, 2021

adjenks commented Apr 15, 2021

adjenks commented Apr 15, 2021 •

edited

Loading

Andrew-Dyachenko commented Jun 17, 2021

Andrew-Dyachenko commented Jun 17, 2021

Andrew-Dyachenko commented Jun 17, 2021 •

edited

Loading

adjenks commented Jun 17, 2021

Andrew-Dyachenko commented Jun 18, 2021 •

edited

Loading

github-actions bot commented Dec 15, 2021

postcss not working with config file, but with postcss key in package.json only #2120

postcss not working with config file, but with postcss key in package.json only #2120

Comments

9oelM commented Oct 10, 2018 • edited Loading

🐛 bug report

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

🤔 Expected Behavior && Current Behavior

💁 Troubleshooting

💻 Code Sample

🌍 Your Environment

KirinHuang commented Oct 20, 2018

9oelM commented Oct 28, 2018

didimedina commented Mar 17, 2019

9oelM commented Mar 17, 2019

bard commented Mar 20, 2019

lvkins commented Oct 11, 2019

9oelM commented Oct 12, 2019 • edited Loading

ataucher commented Apr 17, 2020

StarpTech commented May 21, 2020 • edited Loading

ianwalter commented Jun 4, 2020 • edited Loading

berkant commented Jun 19, 2020 • edited Loading

DeMoorJasper commented Jun 19, 2020

pykenny commented Nov 3, 2020 • edited Loading

mischnic commented Nov 4, 2020

simerlec commented Jan 1, 2021 • edited Loading

mischnic commented Jan 1, 2021

simerlec commented Jan 1, 2021

adjenks commented Apr 15, 2021

adjenks commented Apr 15, 2021

adjenks commented Apr 15, 2021 • edited Loading

Andrew-Dyachenko commented Jun 17, 2021

Andrew-Dyachenko commented Jun 17, 2021

Andrew-Dyachenko commented Jun 17, 2021 • edited Loading

adjenks commented Jun 17, 2021

Andrew-Dyachenko commented Jun 18, 2021 • edited Loading

github-actions bot commented Dec 15, 2021

9oelM commented Oct 10, 2018 •

edited

Loading

9oelM commented Oct 12, 2019 •

edited

Loading

StarpTech commented May 21, 2020 •

edited

Loading

ianwalter commented Jun 4, 2020 •

edited

Loading

berkant commented Jun 19, 2020 •

edited

Loading

pykenny commented Nov 3, 2020 •

edited

Loading

simerlec commented Jan 1, 2021 •

edited

Loading

adjenks commented Apr 15, 2021 •

edited

Loading

Andrew-Dyachenko commented Jun 17, 2021 •

edited

Loading

Andrew-Dyachenko commented Jun 18, 2021 •

edited

Loading