tony-k
tony-k

Reputation: 75

Can't properly configure Autoprefixer in npm scripts

I'm trying to configure PostCSS Autoprefixer but it doesn't work. It should output new style.prefix.css file in the same 'css' folder. Please help me to understand, what is wrong with my npm script/setup

Here is my package.json

{
  "name": "sb-demo-website",
  "version": "1.0.0",
  "description": "demo website",
  "main": "index.js",
  "scripts": {
    "sass": "node-sass-chokidar sass/main.scss css/style.css -w --recursive --skip-initial",
    "compile-sass": "node-sass-chokidar sass/main.scss css/style.comp.css",
    "prefix-css": "postcss css/style.comp.css -o css/style.prefix.css --use autoprefixer"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "tk",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "browserslist": "last 3 versions",
  "devDependencies": {
    "autoprefixer": "^10.0.0",
    "node-sass": "^4.14.1",
    "node-sass-chokidar": "^1.5.0",
    "postcss": "^8.0.5",
    "postcss-cli": "^7.1.2"
  }
}

and here is output when I run my script:

$ npm run prefix-css

> [email protected] prefix-css C:\Users\tk\Documents\Study\web\css\demo1
> postcss css/style.comp.css -o css/style.prefix.css --use autoprefixer

Error: PostCSS plugin autoprefixer requires PostCSS 8. Update PostCSS or downgrade this plugin.
    at Processor.normalize (C:\Users\tk\Documents\Study\web\css\demo1\node_modules\postcss-cli\node_modules\postcss\lib\processor.js:167:15)
    at new Processor (C:\Users\tk\Documents\Study\web\css\demo1\node_modules\postcss-cli\node_modules\postcss\lib\processor.js:56:25)
    at postcss (C:\Users\tk\Documents\Study\web\css\demo1\node_modules\postcss-cli\node_modules\postcss\lib\postcss.js:55:10)
    at C:\Users\tk\Documents\Study\web\css\demo1\node_modules\postcss-cli\index.js:216:14
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] prefix-css: `postcss css/style.comp.css -o css/style.prefix.css --use autoprefixer`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] prefix-css script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\tk\AppData\Roaming\npm-cache\_logs\2020-09-18T17_50_55_597Z-debug.log

Any help is much appreciated

Upvotes: 0

Views: 1358

Answers (1)

tony-k
tony-k

Reputation: 75

Looks like latest Autoprefixer v10.0.0 is kinda broken right now. Downgrading it to version 9.8.6 resolved mentioned above issue.

I'm posting this as an answer in case someone else experience similar errors.

Upvotes: 5

Related Questions