CSS variable (custom property) with fallback as nothing compiles to no fallback

[yairEO]

• Spec
• Tests
• Dart Sass

---

https://www.sassmeister.com/gist/64d412cd7fcc65d2fd09d10c89cb2e0f

div {
    transform: translate(100px) var(--transform-y, );
}

The , at the end is valid CSS and is no mistake and should not be removed after compiling.

---

Read more about the use-case in this article:

https://css-tricks.com/optional-custom-property-values-trick/

W3 ref:

https://www.w3.org/TR/css-variables-1/#using-variables

In an exception to the usual comma elision rules, which require commas to be omitted when they’re not separating values, a bare comma, with nothing following it, must be treated as valid in var(), indicating an empty fallback value.

[nex3]

At first I thought this was really bad: the spec parses the second argument as a <declaration-value> which allows essentially any string, but Sass has historically parsed it as a SassScript value, which means that we'd have to do a deprecation process to become CSS-compatible. Fortunately, I think we can dodge that bullet: unlike custom property values (whose behavior we did have to deprecate), var() functions can only be used in CSS properties rather than being directly accessible to JavaScript. This means that while arbitrary values are valid syntax for the second argument, only "normal" CSS values are actually meaningful.

The only exception to this is var() functions that are called in custom property values, which are resolved before the values are made accessible to JavaScript and as such do make their second arguments directly accessible. Fortunately, those are already parsed as <declaration-value>s by virtue of the fact that they're already in custom property values.

The upshot of all this is that we can get away with simply adding special-case logic for an empty second argument without having to deprecate the way we parse the second argument when it does exist.

[yairEO]

Hi @nex3 - any news? :)

[nex3]

When there's news, we'll update this issue. If you'd like the process to move more quickly, please feel free to contribute a spec update.

[nex3]

This is now out for review as a fast-track proposal in #3338. I'll leave it open until Tuesday unless anyone has any objections or suggestions.