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

[fix] do not collapse whitespace-only css vars #7303

Merged
merged 3 commits into from Mar 3, 2022

Conversation

geoffrich
Copy link
Member

Fixes #7152, see also #7288

--foo:; used to be an invalid CSS custom property value, while -foo: ; was valid. By collapsing the whitespace in these declaration values, we were breaking scenarios where an empty custom property was desired.

Note that the spec was updated to trim whitespace and treat these values identically, but Chromium browsers still treat --foo; as invalid. This was recently fixed and will be released in Chrome 99, but this would still be a good fix to maintain backwards compatibility.

Before submitting the PR, please make sure you do the following

  • It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
  • Prefix your PR title with [feat], [fix], [chore], or [docs].
  • This message body should clearly illustrate what problems it solves.
  • Ideally, include a test that fails without this PR but passes with it.

Tests

  • Run the tests with npm test and lint the project with npm run lint

@geoffrich
Copy link
Member Author

This should also fix the issue with !important mentioned in the linked issue. This PR will no longer collapse whitespace for --foo: !important, since Chrome currently treats --foo:!important as invalid. Added a test to reflect that.

Copy link
Member

@baseballyama baseballyama left a comment

Choose a reason for hiding this comment

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

I commented on a related issue, so I could understand this PR.
And I think it's LGTM!

@@ -145,6 +145,8 @@ class Declaration {
? this.node.value.children[0]
: this.node.value;

if (first.type === 'Raw' && /^\s+$/.test(first.value)) return;
Copy link
Member

Choose a reason for hiding this comment

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

I checked that the below statement is a syntax error. So this regex is ok.

div {
  --foo:;
}

Copy link
Member

Choose a reason for hiding this comment

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

@geoffrich Perhaps it would be useful to put a code comment here as to why we check this, since this applies specifically to chrome only.

Copy link
Member Author

Choose a reason for hiding this comment

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

I added an explanatory comment, thanks for the suggestion!

@dummdidumm dummdidumm merged commit 0a3353b into sveltejs:master Mar 3, 2022
himanshiLt pushed a commit to himanshiLt/svelte that referenced this pull request Mar 3, 2022
Fixes sveltejs#7152, see also sveltejs#7288

--foo:; used to be an invalid CSS custom property value, while -foo: ; was valid. By collapsing the whitespace in these declaration values, we were breaking scenarios where an empty custom property was desired. The spec was updated to trim whitespace and treat these values identically, but Chromium browsers still treat --foo; as invalid. This was recently fixed and will be released in Chrome 99, but this would still be a good fix to maintain backwards compatibility.
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.

whitespace and !important token valid in css custom properties but not in svelte
4 participants