[css-variables][cssom] Empty value doesn't round-trip

Loirooriol commented 7 months ago

<!DOCTYPE html>
<div style="--a: ; width: var(--a) 100px; height: 100px; background: cyan;"></div>
<script>
var el = document.querySelector("div");
el.style.setProperty("--a", getComputedStyle(el).getPropertyValue("--a"));
</script>

I would expect the JS to be no-op as per the round-tripping principle.

However, an empty string has a special meaning in setProperty: it behaves as removeProperty, even though it's valid for custom properties.

Some reasonable possibilities:

Don't redirect setProperty to removeProperty for custom properties, since empty string is a valid value. Authors could explicitly use removeProperty if they want to remove. I suspect this may not be web compatible at this point.
Serialize empty values as " " instead of "" so that they can be safely used in setProperty, as @prjnt proposed in https://github.com/w3c/csswg-drafts/issues/774#issuecomment-515329876

bkardell commented 7 months ago

The latter seems better, right?

cdoublev commented 3 months ago

The first seems more appropriate and easier to implement.

I suspect this may not be web compatible at this point.

Why authors would use .setProperty() instead of .removeProperty() to remove a declaration?

Loirooriol commented 3 months ago

@cdoublev I imagine authors using jQuery like

$(".foo").css({
  display: "block",
  "--foo": "",
})

which I think ends up using https://github.com/jquery/jquery/blob/527fb3dcf0dcde69302a741dfc61cbfa58e99eb0/src/css.js#L253C1-L257C6

if ( isCustomProp ) {
  style.setProperty( name, value );
} else {
  style[ name ] = value;
}

cdoublev commented 3 months ago

Ok. They expect property values that include var(--foo) to become invalid. I cannot say how many would remain invalid if it was substituted with an empty string.

w3c / csswg-drafts

[css-variables][cssom] Empty value doesn't round-trip #9847