rgb 颜色小数兼容问题

在兼容旧版浏览器的路上，确实有好多细节的内容。今天在兼容 chrome80 的时候，发现界面中颜色突然没了，打开 F12 查看，发现 rgb 失效了。我心想，咋的，#RGBA 不能用，连 rgba(x,y,z,a) 也不能用了？头大。。。

然后突然发现，奇怪的是有一些 rgb 可以用，有一些 rgb 不能用。这就奇了怪了，才发现原来失效的是包含小数的颜色，如：rgba(205.5, 211.5, 211.5, 0.5)

于是乎，需要在打包的时候将它们转成相近的整数。这种简单的内容，直接在配置文件中些就好了，就不用插件了。

直接在 vite.config.ts 中添加 plugin 内容：

export default defineConfig(() => {
  return {
    css: {
      postcss: {
        plugins: [
          {
            postcssPlugin: "postcss-color-rounding",
            Declaration(decl) {
              if (decl.value.includes("rgb")) {
                decl.value = decl.value.replace(
                  /rgb\((\d+(\.\d+)?), (\d+(\.\d+)?), (\d+(\.\d+)?)\)/g,
                  (match, p1, p2, p3, p4, p5, p6) => {
                    return `rgb(${Math.round(p1)}, ${Math.round(p3)}, ${Math.round(p5)})`;
                  }
                );
              }
              if (decl.value.includes("rgba")) {
                decl.value = decl.value.replace(
                  /rgba\((\d+(\.\d+)?), (\d+(\.\d+)?), (\d+(\.\d+)?), (\d+(\.\d+)?)\)/g,
                  (match, p1, p2, p3, p4, p5, p6, p7, p8) => {
                    return `rgba(${Math.round(p1)}, ${Math.round(p3)}, ${Math.round(p5)}, ${p7})`;
                  }
                );
              }
            }
          }
        ]
      }
    }
  }
})

直接打包，这样打包后的所有 rgb 颜色就都是整数了。