LightningCSS 颜色混合转换问题解析与修复

在 CSS 预处理工具 LightningCSS 中，开发人员发现了一个关于颜色空间转换的有趣问题。当使用 color-mix 函数在 oklab 颜色空间混合颜色时，输出的 oklab 函数参数出现了异常的双负号问题。

问题现象

当开发者尝试将十六进制颜色 #101010 与透明色在 oklab 颜色空间以 85% 的比例混合时：

body {
  background: color-mix(in oklab, #101010 85%, transparent);
}

LightningCSS 生成的输出结果中，oklab 函数的第二个参数出现了异常：

body {
  background: oklab(17.3042% --7.45058e-9 1.49012e-8 / .85);
}

可以看到，输出结果中出现了双负号"--"的异常情况，这在 CSS 规范中是不合法的语法。

技术背景

oklab 是 CSS Color Module Level 4 引入的一种新型颜色空间，它基于人类视觉感知进行了优化，能够提供更均匀的颜色渐变。color-mix 函数则是用于在不同颜色空间中进行颜色混合的强大工具。

在颜色转换过程中，LightningCSS 需要将颜色值从一种表示形式转换为另一种表示形式。当处理接近零的负值时，转换逻辑出现了边界条件处理不当的问题。

问题根源

经过代码分析，这个问题源于对极小负数的字符串格式化处理。转换算法错误地假设所有负数的字符串表示都会以"-0"为前缀，而实际上对于极小的负值（如科学计数法表示的数），这种假设并不成立。

解决方案

修复方案主要涉及以下几个方面：

1. 修改数值格式化逻辑，正确处理极小负数的字符串表示
2. 确保科学计数法表示的负数也能正确格式化
3. 保持与 CSS 规范的兼容性
4. 不引入性能损耗

修复后的输出应该类似于：

body {
  background: oklab(17.3042% -7.45058e-9 1.49012e-8 / .85);
}

影响范围

这个问题主要影响以下场景：

1. 使用 oklab 颜色空间进行颜色混合
2. 混合结果中包含接近零的负值分量
3. 特别是从十六进制颜色转换为 oklab 空间时

总结

颜色空间转换是 CSS 预处理中的重要环节，正确处理边界条件对于保证输出质量至关重要。这个问题的修复不仅解决了语法错误，也为 LightningCSS 的颜色处理能力提供了更健壮的基础。对于开发者而言，这意味着可以更可靠地使用现代 CSS 颜色功能，特别是在使用 TailwindCSS 等基于 LightningCSS 的工具链时。