Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds migrations for the recent changes to the
--spacing
scale done in #12263.There are a few steps that we do to ensure we have the best upgrade experience:
spacing
theme with custom values, we now check if the new values are multiplies of the default spacing scale. When they are, we can safely remove the overwrite.spacing
theme, we will unset the default--spacing
scale and only use the values you provided.theme()
function calls are replaced withcalc(var(--spacing) * multiplier)
unless the values are extending the default scale.One caveat here is for
theme()
key which can not be replaced withvar()
(e.g. in@media
attribute positions). These will not be able to be replaced withcalc()
either so the following needs to stay unmigrated:Test plan
We are mainly testing two scenarios: The JS config extends the
spacing
namespace and the JS config overwrites thespacing
namespace. For both cases we have added an integration test each to ensure this works as expected. The test contains a mixture of keys (some of it matching the default multiples, some don't, some have different scales, and some use non-numeric identifiers). In addition to asserting on the created CSS@theme
, we also ensure thattheme()
calls are properly replaced.