Adding Autoprefixer in parcel.js for deployed website broke all website styles?

Question

I have a deployed project built with the Parcel.js bundler.

After applying CSS Autoprefixer and redeploying the website almost all of my website's styles are broken. I'm really not sure what has caused this and unfortunately I could not find even one similar question for the problem I'm having.

I first added Autoprefixer in my dev-dependencies:

"devDependencies": {
    "autoprefixer": "^9.5.1",
    "parcel-bundler": "^1.12.3",
    "postcss-modules": "^1.4.1"
  },

Then I created a .postcssrc config file in my root folder containing: (I used quite a bit of CSS-Grid for layouts in the site hence the following configurations)

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": "autoplace"
    }
  }
}

I also created a .browserslistrc config file for browser targets also in the root folder containing:

defaults

I chose the defaults configuration for the browser targets because it was mentioned in the Autoprefixer documentation that the defaults option contains a good variety of browsers and because i didn't have any specific needs this seemed like the best option to go for.

I've tried my best to give an accurate description of the events, if you need more information please let me know.

UPDATE: I thought the problem is the "autoprefixer": { "grid": "autoplace" as mentioned in the autoprefixer documentation, that going for this option can cause problems to already deployed/established websites that didn't have autoprefixer. So I rolled back my changes to it's pre-autoprefixer state wen't through all the steps again but this time I did not enable the grid: autoplace option and went for the default grid: true BUT again I have the same problem.

I think this might have something to do with Parcel or how I am using postcss in Parcel.

Answer 1

Post-css comes with autoprefixer out of the box.

Parcel bundler comes with Post-css out of the box.

So the only package you need is parcel-bundler in your package.json. The extra package installations may be what's causing the problem.

To configure it all correctly try this sample postcss setup, where crucially the autoprefixer object and the overrideBrowserslist array are not empty, or like the other answer here where it is just set to true, that didn't work for me. Adding the browserslist (recently updated to overrideBrowserslist) array makes the prefixes work:

{
  ...

  "devDependencies": {
    "parcel-bundler": "^1.12.4",
    "sass": "^1.25.0"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {
        "overrideBrowserslist": [
          "> 1%",
          "last 4 versions",
          "ie >= 9"
        ]
      }
    }
  }
}

After adding a transition to an element in the CSS, the prefixes showed after inspecting and looking at the styles in dev tools.