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

Improve type detection for arbitrary color values #8201

Merged
merged 1 commit into from
Apr 28, 2022
Merged

Conversation

bradlc
Copy link
Contributor

@bradlc bradlc commented Apr 26, 2022

Fixes #8171

This PR improves type detection for arbitrary color values. Previously the following classes would not be generated because the type of the values could not be determined:

bg-[rgb(var(--bg-color))]
bg-[rgb(var(--red-green),40)]
bg-[rgb(12,var(--green-blue))]

Instead you would have to provide a type hint:

bg-[color:rgb(var(--bg-color))]
bg-[color:rgb(var(--red-green),40)]
bg-[color:rgb(12,var(--green-blue))]

The hint should not be necessary here because we can tell the values are colors based on the use of rgb().

This PR adds a loose mode to the parseColor function that allows colors with fewer than 3 parts (like the above examples) as long as at least one of the parts is variable. We then use this parsing mode when looking for colors in arbitrary values.

Comment on lines 10 to 15
let RGB = new RegExp(
`^rgba?\\(\\s*(${VALUE.source}|${CUSTOM_PROPERTY.source})${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source})${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
`^(rgb)a?\\(\\s*(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
)
let HSL = new RegExp(
`^hsla?\\(\\s*((?:${VALUE.source})(?:deg|rad|grad|turn)?|${CUSTOM_PROPERTY.source})${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source})${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
`^(hsl)a?\\(\\s*((?:${VALUE.source})(?:deg|rad|grad|turn)?|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\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.

The second and third color parts have been made optional, and the amount of parts is validated later instead (line 55)

Copy link
Member

@RobinMalfait RobinMalfait left a comment

Choose a reason for hiding this comment

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

Oh beautiful, seems to work as expected even if you provide multiple var() values.

@bradlc bradlc merged commit cc69633 into master Apr 28, 2022
@bradlc bradlc deleted the detect-colors branch April 28, 2022 10:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Color custom properties still require hint
2 participants