1. 程式人生 > >-webkit-box-orient不見了, webkit 和 autoprefixer 的坑

-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:

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);
});