Fix bug replacing modifier variable shorthand syntax underscores #17889
Conversation
|
Hey!
In the event that we want to re-introduce this (where the variable doesn't require underscores), then we have some more work to do because the fallback value can also contain underscores where we do want to convert them to spaces. E.g.: <div class="bg-(--my_variable,rgb(0_2_3))"></div>Which already parses properly as: .bg-\(--my_variable\,rgb\(0_2_3\)\) {
background-color: var(--my_variable,rgb(0 2 3));
}But looking at the reproduction, I do feel like there is a bug with the modifier. <div class="bg-(--my_variable,rgb(0_2_3))/(--my_opacity,some_fallback_value)"></div>Compiles to: .bg-\(--my_variable\,rgb\(0_2_3\)\)\/\(--my_opacity\,some_fallback_value\) {
background-color: color-mix(in oklab, var(--my_variable,rgb(0 2 3)) var(--my opacity,some fallback value), transparent);
}So the spaces int he fallback should be kept, but not in the actual variable (first argument). |
These tests include CSS variables with underscores that should not be replaced, but also fallback values that should be replaced.
This now has the same behavior as arbitrary value shorthand where `(--my-value)` is wrapped in a `var(--my-value)` behind the scenes. Doing this, allows us to perform 2 things: 1. We can check early if the value is an actual CSS variable — aka, an arbitrary modifier shorthand starts and ends with `(` and `)` respectively and starts with `--` inside the parens. E.g.: `(--…)` 2. Wrapping in `var(…)` allows us to use the `decodeArbitraryValue` which handles CSS variables (and fallbacks) already for us.
Essentially if we had `value[0] !== '-' && value[1] !== '-'`, a value such as `_-` would pass. E.g.: `var(_--foo)` Instead, we have to ensure that both the first and second character are `-` characters. Alternatively, we could write `!(value[0] === '-' && value[1] === '-')`, but applying De Morgan's law means: `!(value[0] === '-' && value[1] === '-')` Becomes: `value[0] !== '-' || value[1] !== '-'`
In value position instead of modifier position
E.g.: `bg-(--foo)`
|
I appreciate the quick turnaround on this, @RobinMalfait and @thecrypticace. Thanks! |
Resolves #17888
Reproduction URL: https://play.tailwindcss.com/YvIekuzVRd
Changes:
decodeArbitraryValuewhen parsing variable shorthand syntax in modifiersdecodeArbitraryValue(modifier.slice(1, -1))withmodifier.slice(1, -1)Edit by maintainer:
This PR fixes an issue where the arbitrary modifier shorthand (e.g.:
bg-red-500/(--my_variable)) was incorrectly replacing the_with aIt's important that we still decode the arbitrary value and replace
_withFor example, if you have this:
You would expect the following CSS:
Where the
_in the variable is not replaced, but the_in the fallback value is being replaced.