Allow for custom properties in rgb, rgba, hsl and hsla colors

[RobinMalfait]

This PR will allow for custom properties to exist inside the rgb, rgba, hsl and hsla color functions.

This is useful if you want to do things like this:

<div class="bg-[hsl(var(--foo),50%,50%)]"></div>

Previously this didn't work and wouldn't generate anything because we didn't correctly parse this as a color. You could force it by using a color type hint:

<div class="bg-[color:hsl(var(--foo),50%,50%)]"></div>

The only issue with this is that it doesn't compose well with the opacity modifiers. This should now be fixed, where this:

<div class="bg-[hsl(var(--foo),50%,50%)]/75"></div>

... resolves to:

.bg-\[hsl\(var\(--foo\)\2c 50\%\2c 50\%\)\]\/75 {
  background-color: hsl(var(--foo) 50% 50% / 0.75);
}

While the class itself looks strange, it is valid and works as aspected: https://play.tailwindcss.com/ImyUO7n2XU?file=css

Fixes: #7909

[RobinMalfait]

Only changes here are moving from string-based regex to an actual regex. Makes it a bit easier to reason about because of the otherwise confusing double escapes.

Later you can use SEP.source to get the string based value again if you want to compose it inside a RegExp.

[bakura10]

Hi @RobinMalfait ,

I am not sure if this is because I am using a prefix (I found a lot of issues when using prefix), but on the latest insider version, this does not work and no CSS is generated:

tw-bg-[rgb(var(--background))]
tw-text-[rgb(var(--text-color))]

I am still required to use the color prefix as shown below:

tw-bg-[color:rgb(var(--background))]
tw-text-[color:rgb(var(--text-color))]

Is there a known incompatibility with prefix?

[bakura10]

I am opening an issue as it will be easier to track :)