IE 11 and cssnano

Unfortunately, IE 11 is not dead yet, and sometimes customers want their sites to work in it. And sometimes you have to add hacks targeted specifically at IE 11. It is not very difficult (at least compared 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 exciting 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,
            }],
        }),
    ],
};