CODEWITHSUNDEEP
postcssautoprefixerparceljs
user9013856
user9013856

Reputation: 328

post css autoprefixer issue on parcel not showing prefixes

Autoprefixer not working on parcel 1.9.7: I have my src folder and I have .postcssrc file and styles file in the same folder content inside the .postcssrc file: { "plugins": { "autoprefixer": true } }

parcel was installed with npm install -g parcel-bundler pacckage json dev depenndacies:

"devDependencies": {
 "autoprefixer": "^9.1.3",
 "node-sass": "^4.9.3",
 "postcss-modules": "^1.3.2"
},

maybe anyone knows what could be the issue?

Upvotes: 6

Views: 1893

Answers (3)

Young Developer
Young Developer

Reputation: 61

Feb 2022 parcel 2.3.1 and autoprefixer 10.4.2

I solved my problem by moving config into the package.json instead of .postcssrc or other, btw the parcel docs does not say about this, but the prefixes appeared only after inserting the configuration directly into package.json.

There is a possibility that for autoprefixer to work, the browserlist must be specified.

package.json

    "postcss": {
        "plugins": {
          "autoprefixer": {
            "browsers": [
              ">1%",
              "last 4 versions",
              "Firefox ESR",
              "not ie < 9"
            ]
          }
        }
      }

Upvotes: 2

StefanBob
StefanBob

Reputation: 5128

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. (Also you just need the "sass" package not "node-sass". The extra packages 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:

{
  ...

  "devDependencies": {
    "parcel-bundler": "^1.12.4",
    "sass": "^1.25.0"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {
        "overrideBrowserslist": [
          ">1%",
          "last 4 versions",
          "Firefox ESR",
          "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.

Upvotes: 2

a11
a11

Reputation: 21

A bit late, but can be helpful maybe for someone else. The only thing that works is putting

"postcss": {
    "plugins": {
      "autoprefixer": {}
    }

directly in package.json

So, package.json looks like this:

{
  "name": "parcel",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "parcel src/index.html",
    "prod": "parcel build src/index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "abstracts": "^0.2.3",
    "postcss-modules": "^1.4.1"
  },
  "devDependencies": {
    "autoprefixer": "^9.7.1",
    "sass": "^1.23.3"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "description": ""
}

Upvotes: 2

Related Questions