利用 AST 和 PostCss 处理 CSS

想必有遇到过部分CSS 在 各大浏览器表现不一致，因为各大浏览器对某些属性支持程度不一样，如何高效的解决这个问题呢？

转化为易操作的 AST 进行处理，postCSS的插件机制支持完成这样的扩展功能。

如此我们就可以实现一个 AutoPrefixer：

import postcss from 'postcss';

/** 假设这是浏览器兼容数据 */
const mockPrefixerConfig = {
  key: ['transform', 'opacity'],
  values: [{
    name: 'display',
    preValue: 'flex',
    newValue: ['-webkit-box', '-webkit-flex', '-moz-box', '-ms-flexbox']
}

const myPrefixPlugin = postcss.plugin('myPrefixPlugin', opt => {
  return (ast) => {
    opt = opt || {};
    ast.each(node => {
      /** node 是每一个 selector 的节点 */
      node.each(decl => {
        /** decl 是当前selector 的每一条规则声明 */
        if (mockPrefixerConfig.key.includes(decl.prop)) {
          decl.cloneBefore({ prop: '-webkit-' + decl.prop});
        }
        const item = mockPrefixerConfig.values.find(obj => obj.name === decl.prop);
        const isReplace = item?.preValue === decl.value || false;
        isReplace && item.newValue.forEach(newVal => {
          decl.cloneBefore({ value: newVal });
        });
      }
    }
  }
})

用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。  Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。