8000 Allow parsing CSS variables with no value · Issue #4078 · sass/sass · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Allow parsing CSS variables with no value #4078

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.

Sign up for GitHub

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

Jump to bottom
Closed
nicolo-ribaudo opened this issue May 6, 2025 · 2 comments
Closed

Allow parsing CSS variables with no value #4078

nicolo-ribaudo opened this issue May 6, 2025 · 2 comments
Assignees
@nex3
Labels
bug Something isn't working CSS compatibility Support the CSS spec

Comments

@nicolo-ribaudo
Copy link
nicolo-ribaudo commented May 6, 2025 •
edited
Loading 
.foo {
  --some-var: ;
}

CSS variables can be set to "nothing". There is some discussion about having some more explicit syntax for it (w3c/csswg-drafts#10441), but right now the only way to do so it to literally put nothing in the value. You can read more about the use cases at https://css-tricks.com/the-css-custom-property-toggle-trick/.

PDF.js, a popular library for rendering PDFs in the browser, recently started relying on it (mozilla/pdf.js#19879). It did so indirectly, through the PostCSS transform to polyfill the CSS light-dark() function (https://github.com/postcss/postcss-dark-theme-class), which injects this code:
@media (prefers-color-scheme: dark){

:root{
  --csstools-color-scheme--light:;
}
}

SASS cannot parse that code.

This issue is conceptually similar to #3245: that one was about the CSS variable fallback being set to nothing, while this one is about the declaration.

I'm happy to submit a PR.
@nex3
Copy link
Contributor
nex3 commented May 6, 2025 •
edited
Loading

--some-var: ; is supported by Sass. It looks like support for --some- var:; was added to the spec after the fact, and we never caught up, but you're right that we should support it.

(Note: this doesn't require a spec update because we just follow the CSS spec here.)

@nex3 nex3 transferred this issue from sass/dart-sass May 6, 2025
@nex3 nex3 self-assigned this May 6, 2025
@nex3 nex3 added bug Something isn't working CSS compatibility Support the CSS spec labels May 6, 2025
@nex3 nex3 mentioned this issue May 6, 2025
Merged
nex3 added a commit to sass/dart-sass that referenced this issue May 6, 2025
@nex3
Support empty custom properties
400fab0 
See sass/sass#4078
@nex3 nex3 mentioned this issue May 6, 2025
Merged
nex3 added a commit to sass/dart-sass that referenced this issue May 8, 2025
@nex3
Support empty custom properties
2afc4fd 
See sass/sass#4078
nex3 added a commit to sass/dart-sass that referenced this issue May 8, 2025
@nex3
Support empty custom properties
6edc11e 
See sass/sass#4078
@nex3 nex3 closed this as completed May 9, 2025
@nicolo-ribaudo
Copy link
Author

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@nex3 nex3

Labels
bug Something isn't working CSS compatibility Support the CSS spec
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@nex3 @nicolo-ribaudo
0