Autoprefixer: 'Output IE hacks in a separate file' option

[CyberAP]

It would be great to have an autoprefixer option to provide 2 files:

• Processed CSS with all the hacks except IE
• One with just IE hacks

Also, introduce new IE control comments:

/* autoprefixer: ie < 11 */

The benefits are quite obvious: you skip all the extra IE code that other browsers don't need.
In the final markup it could look like this:

<link rel="stylesheet" href="/bundle.css" />
<!--[if IE ]>
  <link rel="stylesheet" href="/ie.css" />
<![endif]-->

[ai]

PostCSS API has only one input file and one output file.

Autoprefixer is PostCSS plugin and should work with this API.

But you don’t need some special support from Autoprefixer. Just use Gulp and run Autoprefixer twice with different browsers options.

[Dan503]

This issue may end up suppressing prefixing https://github.com/postcss/autoprefixer/issues/1110

If that is the case, then you will be able to suppress IE prefixes using @supports statements instead of an IE specific Autoprefixer control comment.

[Dan503]

Just use Gulp and run Autoprefixer twice with different browsers options.

This will leave non-grid-prefix CSS in the IE style sheet.

A new PostCSS plugin would need to be created that strips out all of the non-ie-prefix styles. It wouldn't be that difficult. Basically create a white list of IE grid properties. Any property that is not on that list gets removed. Done.

The method you hoped to load up this theoretical prefix-only style sheet wouldn't work.

IE prefixes only work in IE 10 & 11. Those IE comments don't work in IE 10 & 11 though. I think IE 9 was the last browser that supported them. You will need to use JS to detect IE and then inject the extra stylesheet into the page.

Also, just to be clear, this would require 2 seperate gulp.src chains. You can't do what you want in a single gulp.src chain.

[CyberAP]

Thanks for a great explanation, @Dan503. Sticking with the complete stylesheet.