dx(runtime-dom): warn when a style value ends in a semicolon #7062
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 adds a warning when an object
style
value ends with a semicolon. e.g.:style="{ color: 'red;' }"
.When a value ends with a semicolon, the entire value gets discarded, with no apparent error or warning from the browser. If the style already has a previous value then that will be retained, leading to reports of 'reactivity' issues.
Typically when this has been reported on Vue Land it has been for complex values, such a gradients. Consider this example:
SFC Playground
I've already given away the punchline, the problem is the semicolon, but if you didn't already know, would that have been obvious? It might have been a misuse of
.value
, or a reactivity problem, or a mistake somewhere in thelinear-gradient()
syntax, or who knows what else?Compounding the problem, if you tweak the code above to use
:style="`background: ${background}`"
it works fine. The semicolon is just treated as a delimiter and does no harm. This leads to the impression that it's a problem with Vue not handling the style object correctly.We may not be able to fully validate all style values, but I think eliminating the semicolon problem would save a bit of frustration.
Browsers do allow semicolons at the end of style values, but as far as I'm aware this can only happen if they're escaped with a
\
. In practice I can't think of a legitimate use case for that, but I used custom properties to confirm that an escaped semicolon is retained, whereas an unescaped semicolon leads to the value being ignored. The RegExp in this PR will not match escaped semicolons.