关于一个小菜鸡是如何通过自定义 postcss 插件解决 color-mix 兼容问题的

关于一个小菜鸡是如何通过自定义 postcss 插件解决 color-mix 兼容问题的

最近客户反映他们电脑上的颜色展示不正常，经过排查之后发现是引用的第三方组件中，css包含 color-mix 函数。

在 can i use 上面搜索了一下，刚好客户机器 chrome 是 102 版本的。不支持 color-mix

1. 使用第三方插件 @csstools/postcss-color-mix-function

于是我首先搜索了下 postcss 相关兼容插件，找到了这个 @csstools/postcss-color-mix-function 插件。

www.npmjs.com/package/pos...

但是应用上去并不能生效。估计是因为需要转换的 css 像下面这样

color-mix(in srgb, var(--p-primary-color) calc(100% * 1), transparent)

但是好像不兼容 isrgb 这种类型

2. 自定义 postcss 插件

这个插件主要就是通过计算，把 color-mix 计算成为定值，然后应用上去以兼容老版本。

由于不想弄得太复杂精细，这里准备直接抽取其中变量作为css定值,不再考虑透明度的情况。 也就是

color: color-mix(in srgb, var(--p-primary-color) calc(100% * 1), transparent)
转换为
color： var(--p-primary-color)；

如果是这样那就简单多了。只需要通过正则提取出 color-mix 中的 var 变量就完成了。

export default (options = {}) => {
   return {
       postcssPlugin: 'color-mix',
       Declaration(decl) {
           // 跳过已处理过的节点
           if (decl.processed) return;

           const originalValue = decl.value;
           
           // 判断是否是 color-mix
           if (originalValue.indexOf('color-mix') < 0) {
               return;
           }

           console.log(`处理css: ${originalValue}`);

           const result =  replaceColorMix(originalValue)
           console.log(result)
           // 标记为已处理并替换
           decl.value = result;
           decl.processed = true;

       }
   };
};

// 提取出var变量替换
function replaceColorMix(cssCode) {
   const regex = /var(--[\w-]+)/;
   const match = cssCode.match(regex);
   if (match) {
       return match[0]
   } else {
       return cssCode
   }
}

export const postcss = true;

这样就直接兼容了之前浏览器了