-webkit-box-orient不见了， webkit 和 autoprefixer 的坑

autoprefixer

autoprefixer不仅会帮你加-webkit-之类的prefixer，
它还会帮你删除你自己写在 css/sass/less里的样式，
真是厉害了

关闭autoprefixer的自动删除功能，这样：

/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

用注释包裹的中间这一句就不会被删除

再深究一下

1.autoprefixer会帮你删除老式过时的代码
2.autoprefixer也会帮你增加新前缀

你可以增加remove: false这个配置项，就不会开启自动移除功能

postcss([ autoprefixer({ remove: false }) ]);

不仅如此，你还可以只让它移除老前缀，不自动增加新前缀

postcss([ autoprefixer({ add: false, browsers: [] })]);

---

原文引用：

Outdated Prefixes

By default, Autoprefixer also removes outdated prefixes.

You can disable this behavior with the remove: false option. If you have no legacy code, this option will make Autoprefixer about 10% faster.

Also, you can set the add: false option. Autoprefixer will only clean outdated prefixes, but will not add any new prefixes.

Autoprefixer adds new prefixes between any unprefixed properties and already written prefixes in your CSS. If it will break the expected prefixes order, you can clean all prefixes from your CSS and then add the necessary prefixes again:

扫描二维码关注公众号，回复： 1017533 查看本文章

var cleaner  = postcss([ autoprefixer({ add: false, browsers: [] }) ]);
var prefixer = postcss([ autoprefixer ]);

cleaner.process(css).then(function (cleaned) {
    return prefixer.process(cleaned.css);
}).then(function (result) {
    console.log(result.css);
});

https://www.npmjs.com/package/autoprefixer