esbuild css minify breaks relative color syntax in safari.

[EamonNerbonne]

The fairly new https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors syntax is quite nice, but unfortunately browser support is spotty. In particular, Safari's supported syntax isn't entirely the same as Chrome+FF's. When minifying, esbuild replaces things like calc(l * 0.5) with calc(l/2), but this breaks Safari suport, alas.

I don't think it's reasonable for minify to unstandard the current browser vagaries; but is it possible to disable minification for all relative color syntax expressions, or, perhaps more simply, for all CSS in general (this isn't the first CSS browser quirk with this kind of minification interaction, and likely won't be the last)?

The build API does not appear to support selective CSS vs. JS minification, even though the transform API does: https://esbuild.github.io/api/#minify - is there an way to suppress CSS minification (whether selectively or globally) without losing JS minification?

[evanw]

Sorry, I'm not able to reproduce this. Here's what I tried:

<style>
  body {
    background-color: lch(from orange calc(l/2) c h);
  }
</style>

I tried Safari 18.0. Which version of Safari is required to reproduce the bug? I'm asking because without a way to reproduce this, I'm not sure what the appropriate workaround would be. For example, is the division operator broken for all calc() expressions in Safari, not just those with relative colors? Does esbuild need a way to disable that? Or maybe it's something else instead.

[EamonNerbonne]

Sorry; you're right.

(I must have conflated this harmless minification with an unrelated issue concerning the need for deg units in relative colors in safari, and when the user's problems were resolved drawn the incorrect conclusion.)