Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

merged 3 commits into from Mar 24, 2022


Copy link

@RobinMalfait RobinMalfait commented Mar 24, 2022

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:

Fixes: #7909

Comment on lines +5 to +7
let VALUE = /(?:\d+|\d*\.\d+)%?/
let SEP = /(?:\s*,\s*|\s+)/
let ALPHA_SEP = /\s*[,/]\s*/
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@RobinMalfait RobinMalfait merged commit 315e3a2 into master Mar 24, 2022
@RobinMalfait RobinMalfait deleted the custom-properties-in-color-functions branch March 24, 2022 11:43
Copy link

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:


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


Is there a known incompatibility with prefix?

Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.

arbitrary value for color needs hint but should arguably be detectable without it.
2 participants