-webkit-box-orientがなくなった、webkitとautoprefixerの穴

2197 ワード

autoprefixer
Autoprefixerは-webkit-などのprefixerを加えるだけでなく、css/sass/lessに書いたスタイルを削除してくれます.すごいですね.
Autoprefixerの自動削除機能をオフにします.
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

コメントで包まれた真ん中の一言は削除されません
もう少し詳しく調べる
1.autoprefixerは古い古いコードを削除します.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:
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