Bun项目中Tailwind v4的rounded-full样式打包问题解析

在Bun项目的开发过程中，我们发现了一个与Tailwind CSS v4版本相关的样式打包问题。这个问题主要出现在使用Bun构建工具打包包含rounded-full类的项目时，导致生成的CSS值在Safari浏览器中出现兼容性问题。

问题现象

当开发者使用Bun构建工具打包包含Tailwind v4的rounded-full类时，生成的CSS样式为：

.rounded-full {
    border-radius: 1e999px;
}

然而，正确的期望值应该是：

.rounded-full {
    border-radius: 3.40282e38px;
}

这个差异在Chrome浏览器中表现正常，但在Safari和Arc iOS浏览器中会导致圆角效果失效，因为这些浏览器无法正确解析1e999px这样的值。

技术背景

Tailwind CSS v4中，rounded-full类的实现从v3的9999px改为了使用CSS的calc(infinity * 1px)表达式。这种变化是为了提供更灵活的样式控制，但在不同浏览器引擎中的解析方式存在差异。

在CSS规范中，infinity表示无限大，但不同浏览器引擎对其具体数值的实现有所不同：

• WebKit(Safari)引擎期望的无限大近似值为3.40282e38px
• Blink(Chrome)和Gecko(Firefox)引擎可以正确处理1e999px这样的值

问题根源

通过分析Bun的源代码和测试用例，我们发现这个问题源于Bun的CSS处理逻辑中对无限大值的处理方式。Bun内部将calc(infinity * 1px)转换为1e999px，而实际上应该转换为3.40282e38px以保证跨浏览器兼容性。

在Bun的测试用例中，甚至有一个专门测试这种边界情况的用例，但当前实现与期望输出不符：

test("calc edge case", () => {
    minify_test(
      `.rounded-full {
  border-radius: calc(infinity * 1px);
  width: calc(infinity * -1px);
}`,
      `.rounded-full{border-radius:1e999px;width:-1e999px}`
    );
});

临时解决方案

对于急需解决问题的开发者，可以考虑以下临时方案：

1. 覆盖Tailwind的主题配置：

@theme {
  --radius-full: 9999px;
}

2. 直接使用具体值替代rounded-full类：

<div class="rounded-[9999px]">...</div>

长期解决方案

Bun开发团队已经确认这是一个需要修复的bug。理想的修复方案应该是：

1. 修改CSS处理逻辑，将无限大值统一转换为3.40282e38px
2. 更新相关测试用例以反映正确的期望输出
3. 确保与主流CSS处理工具(如lightningcss)的输出保持一致

总结

这个问题展示了前端开发中浏览器兼容性挑战的一个典型案例。CSS规范中的某些特性在不同浏览器引擎中的实现差异，需要构建工具特别注意处理。对于使用Bun和Tailwind CSS的开发者，建议关注此问题的官方修复进展，同时可以使用上述临时解决方案确保项目在Safari浏览器中的正常表现。

作为现代前端工具链的一部分，构建工具对CSS特殊值的正确处理至关重要，这直接影响到最终生成的样式在不同浏览器环境中的一致性。