CODEWITHSUNDEEP
windowsnpmsasspostcssautoprefixer
Jan
Jan

Reputation: 1049

PostCSS Autoprefixer does not add grid prefixes for Internet Explorer 11

We're using sass to compile scss-files to css. We want to support IE11 including grid using the -ms-grid prefixes. In order to reach that goal, we are using the (npm) postcss autoprefixer on Windows. Our current package.json file looks like this:

{
  "name": "project name",
  "version": "1.0.0",
  "description": "project description",
  "main": "index.js",
  "scripts": {
    "watch-sass": "node-sass scss/style.scss css/style.css --watch",
    "compile-sass": "node-sass scss/style.scss css/style.comp.css",
    "prefix-css": "postcss --use autoprefixer -b \"last 5 versions\" css/style.comp.css -o css/style.prefix.css",
    "compress-css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
    "build-css": "npm-run-all compile-sass prefix-css compress-css"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie < 11"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.7.3",
    "compile-sass": "^1.0.3",
    "cross-env": "^6.0.3",
    "npm-run-all": "^4.1.5",
    "postcss-cli": "^6.1.3",
    "prefix-css": "0.0.6"
  }
}

In addition to that file we hold a postcss.config.js in the project-directory with the above content:

module.exports = {
    plugins: { autoprefixer: { grid: true } }
}

When we now run the build-css script, we would expect the output file to generate the grid prefixes for IE11. All other prefixes are output (e.g. -ms-flex).

Exmaple input:

div.class1 {
    display: grid;
}
div.class2 {
    display: flex;
}

Output:

div.class1 {
    display: grid;
}
div.class2 {
    display: -ms-flex;
    display: flex;
}

We're aware that the missing autoprefixer option is grid: true, but we do not know how to properly pass that option. What do we have to change in our setu?

(Node version 8.9.4, npm version 5.6.0)

Upvotes: 1

Views: 2799

Answers (1)

Tommygun
Tommygun

Reputation: 11

plugins: () => [autoprefixer({ browsers: ["> 1%", "last 2 versions", "not ie <= 8"], grid: true })],

I am using webpack and my config looks like this:

My package.json

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
],

My webpack.config.js

 const package = require('./package.json');

  {
     loader: 'postcss-loader',
     options: {
           ident: 'postcss',
           plugins: () => [autoprefixer({ browsers: package.browserslist, grid: true })],
      },
 },

I hope It was helpful for you.

Upvotes: 0

Related Questions