How to tell Autoprefixer to prefix CSS grid in an Angular 8 project

Question

I have to support IE 11 in an Angular project where we use the latest version of it. I really like to use CSS grid features that IE 11 is capable of. But I can't figure out how to get Autoprefixer work properly.

My problem is quite the same as in another question, but that deals with another version.

I created a minimal test case on Stackblitz.

I configured the browserslist file like so:

> 1%
IE 11

And I included a control comment to enable grid feature of Autoprefixer:

/* autoprefixer grid: on */

(I have done that in both CSS files, the global styles and the component styles)

My expectation with this configuration of browserslist and the control comment in the CSS file is, that Autoprefixer adds display: -ms-grid; to the CSS output. But it doesn't.

Answer 1

I don't know how its config should be in angular CLI. But in Webpack loader it configure like this:

// postcss.config.js

module.exports = {
    plugins: {
        'postcss-preset-env': {
            autoprefixer: {
                grid: 'autoplace'
            },
            browsers: [
                'IE >= 11',
                '> 0.1%'
            ]
        }
    }
};

It is too important to set grid: 'autoplace', not grid: 'on'. In Angular project in package.json you can add AUTOPREFIXER_GRID=autoplace. It will be something like this:

"build": "AUTOPREFIXER_GRID=autoplace ng build",

We recently used grids in one of our project and we also support IE11. And hopefully autoprefixer saved us. So be sure, it will definitely work if you configure it properly.