themeVariable validation not allowing valid CSS attributes with dashes #6256
Labels
Status: Triage
Needs to be verified, categorized, etc
Type: Bug / Error
Something isn't working or is incorrect
Description
When I try to use either the css function
light-dark()
or css variables likevar(--bs-blue)
to help make the diagrams I'm creating react well with light mode/dark mode changes in the hosting application, the validation is removing them.Steps to reproduce
light-dark()
function such as this:Screenshots
Code Sample
Setup
Suggested Solutions
I think the issue is with the validation code found in sanitizeDirective.ts. It loops through with a regex and blanks out anything not matching the regex as so:
I think it should be sufficient to add the dash character as a valid match, but I'm not sure if it was omitted for a specific reason. I think changing it to something like this would work for allowing the CSS variables and the
light-dark()
function:Here is a quick test I ran to verify expected behavior
Additional Context
No response
The text was updated successfully, but these errors were encountered: