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.

Piet

It might help, if you can figure out, what has changed in your CSS. – Karli

Well my minified css output file in my dist folder is super hard to read, but I can see the prefixes, because before i had none. It's a disaster! Almost all of the styling is broken, all margins, padding, positions etc. Even background colors and such. – Piet

You could check for CSS errors in dev tools, if you haven't already. – Karli

@Fee-fi-fo-fum...I just checked and all styles are removed from every section apart from my footer, and even the footer is not as it was. All that has remained is the universal resets that i applied and the font-import. – Piet

I haven't fixed the issue yet, but i found a chunky section of the documentation explaining that things can go very wrong if you use the grid: autoplace option on already established/deployed websites. – Piet

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.

Paige

Cheers, just a typo to fix, it's "ie >= 9" instead of "ie => 9". – Soane

@Olivier thanks for the catch. Too many arrow functions lately :) – Paige

A good way to avoid a lot of trouble of manual configuration. – Hemo

Answer 2

Try only with this:

{  
  "plugins": {
    "autoprefixer": true
  }
}

Simonides

Answer 3

I got the same issues. Actually after I checked the css, my classes got renamed with hash at the end.

The issues is described here: https://github.com/parcel-bundler/parcel/issues/644

It is caused by the paramters modules: true. Set it to false and it works !

Osseous