IE 11 and cssnano

Unfortunately, IE 11 is not dead yet, and sometimes customers want that their sites work in it. And sometimes you have to add hacks targeted specifically at IE 11. It is not very difficult (at least comparing to IE 6), and BrowserHacks is to rescue.

For example, you can use this hack to target IE 11:

_:-ms-fullscreen, :root .selector {
    /* ... */
}

However, if you use cssnano in your build process, you will find that it breaks the hack:

$ echo '_:-ms-fullscreen, :root .selector {color: red}' | cssnano
:root .selector,_:-ms-fullscreen{color:red}

It places _:-ms-fullscreen after :root .selector, which breaks the hack.

Of course, it is better not to mix proper styles with hacks, but it was very interesting for me to find out how to make cssnano not break IE hacks.

It turned out that there are two rules in the standard preset that sort rules in a declaration:

1. minifySelectors
2. uniqueSelectors

You need to turn off both if you want cssnano not to break IE-specific styles.

echo '_:-ms-fullscreen, :root .selector {color: red}' | cssnano --no-uniqueSelectors --no-minifySelectors
_:-ms-fullscreen, :root .selector{color:red}

This is what postcss.config.js might look like:

module.exports = {
    plugins: [
        require('autoprefixer'),
        require('cssnano')({
            preset: ['default', {
                minifySelectors: false,
                uniqueSelectors: false,
            }],
        }),
    ],
};