Bug report: New CSS color formats/syntax unknown

[brandonmcconnell]

I am getting this error when using a very common (newer) CSS color syntax.

The errors

• rgb(255 0 0) throws Uncaught Error: unknown format: rgb(255 0 0)
• rgb(255 0 0 / .5) throws Uncaught Error: unknown format: rgb(255 0 0 / .5)
• hsl(240deg 100% 50%) throws Uncaught Error: unknown format: hsl(240deg 100% 50%)
• hsl(240deg 100% 50% / 25%) throws Uncaught Error: unknown format: hsl(240deg 100% 50% / 25%)

These would be their older equivalents

• rgb(255, 0, 0) → * rgb(255 0 0)
• rgba(255, 0, 0, .5) → * rgb(255 0 0 / .5)
• hsl(240, 100%, 50%) → * hsl(240deg 100% 50%)
• hsla(240, 100%, 50%, .25) → * hsl(240deg 100% 50% / 25%)

This new syntax and its different nuances should be supported. In many browsers, this new color syntax is already the default.

Gotchas

• The final & fourth value in this new syntax (alpha channel) is a percent which can be represented either as a decimal or as a full percent, so both .25 and 25% are accepted values and are treated the same.
• All modern browsers appear to support this new syntax even when used with the old color function keywords (e.g. rgb vs. rgba), so these would also work and be treated the same:
  • hsla(240, 100%, 50%, .25) === hsla(240deg 100% 50% / .25) === hsl(240deg 100% 50% / .25)

[wawyed]

Is this something that could be looked at? @gka

[Ambient-Impact]

I'd open a pull request if I had more experience with this package and colours in general. This really tripped me up when trying to debug why https://github.com/larsenwork/postcss-easing-gradients was failing on certain colour values, and specifically hsl()/hsla() that had the deg unit. Maybe I'll come back to this on another day and give it a shot.

[akicho8]

I'm struggling with the same issue.
I've been using chroma.js in many places as it's very convenient.
However, it's difficult to migrate to a new format because chroma.js doesn't support it yet.

[gka]

I believe this is fixed in v3.0.0 which got released today. We also added support for parsing lab(), lch(), oklab(), and oklch() CSS colors.

However, I just saw that the alpha channel is also supported as a percentage, which chroma.js currently does not support. Will leave this open until the full syntax is supported.