lightningcss icon indicating copy to clipboard operation
lightningcss copied to clipboard

sRGB color notations converting to hex with option disabled

Open keithjgrant opened this issue 2 years ago • 3 comments
trafficstars

The documentation states, "By default Lightning CSS does not perform any transpilation of CSS syntax for older browsers. This means that if you write your code using modern syntax or without vendor prefixes, that’s what Lightning CSS will output."

However, if I leave target browsers list empty and don't include any features, some colors are getting converted to hex notation. This happens for rgb(), hsl(), and hwb() colors, but not for newer wide-gamut notations like oklch() and oklab().

Expected result: colors should be left as authored in the final output

Actual result: Most color notations are being converted to hex

Example in online playground

keithjgrant avatar Nov 02 '23 00:11 keithjgrant

The purpose of this is not to transpile for older browsers but to minify the size. Hex colors are semantically equivalent to any other RGB notation, whereas something like oklch can represent colors that RGB cannot. That's why those colors are preserved and RGB colors are minified using the shortest notation possible. So this is is a feature not a bug. Any reason you need the longhand notation instead of hex?

devongovett avatar Nov 08 '23 00:11 devongovett

During development, I want to be able to play with those values in the browser DevTools, so it would be great if they were the same format as authored. (I primarily use Firefox, which doesn't yet support conversion to oklch in DevTools)

Ideally, I would want them to convert to the shorter syntax when minification is enabled, but not when it is turned off (though I understand this is probably handled in a different part of the pipeline than minification)

keithjgrant avatar Nov 11 '23 18:11 keithjgrant

On a related note, in some cases it converts oklch to oklab despite oklab being markedly more verbose:

--slate-1: oklch(98% 0.006 251deg);

is getting converted (inside a feature query) to:

--slate-1: lab(97.6739% -.628799 -2.15917);

This happens whether minification is enabled or not.

Example

keithjgrant avatar Jun 12 '24 21:06 keithjgrant