关于一个小菜鸡是如何通过自定义 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 像下面这样

scss 复制代码
color-mix(in srgb, var(--p-primary-color) calc(100% * 1), transparent)

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

2. 自定义 postcss 插件

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

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

css 复制代码
color: color-mix(in srgb, var(--p-primary-color) calc(100% * 1), transparent)
转换为
color: var(--p-primary-color);

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

ini 复制代码
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;

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

相关推荐
烛阴3 分钟前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子10 分钟前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...19 分钟前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码1 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw51 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !1 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
Burt1 小时前
tsdown vs tsup, 豆包回答一坨屎,还是google AI厉害
前端
群联云防护小杜2 小时前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构
ohMyGod_1233 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜053 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js