[csswg-drafts] [cssom-1] Setting a custom property value to empty string (#10278)

cdoublev has just created a new issue for https://github.com/w3c/csswg-drafts:

== [cssom-1] Setting a custom property value to empty string ==
This is a follow-up on [this comment](https://github.com/w3c/csswg-drafts/issues/774#issuecomment-515329876).

  > Regarding serialization: a problem [...] is that `setProperty("--foo", "", ...)` is currently defined as being equivalent to `removeProperty("--foo")`.

For example:

```js
el.style.setProperty('--custom', '')
el.style.border = '1px solid var(--custom)'
getComputedStyle(el).border // '0px none rgb(0, 0, 0)'
el.style.setProperty('--custom', ' ')
getComputedStyle(el).border // '1px solid rgb(0, 0, 0)'
```

`--custom` is first unset. The `border` declaration is invalid at computed value time because the initial `--custom` value is the guaranteed-invalid value. Then `--custom` is set to empty string from a whitespace in the input. The `border` declaration computes to `1px solid` with the initial `border-color`.

**Option 1:** (proposed in the comment)

  > changing the second argument to a space might be enough to avoid that.

But it does not round-trip:

  > If so, then I wonder whether `getProperty` on a custom property should similarly return a space if the value is an empty sequence of tokens, so as to reduce bugs where a subsequent `setProperty` fails to restore the value current at the time of `getProperty`.

**Option 2:**

Do not remove a custom property when provided an empty string; use `.removeProperty()` instead.

```diff
  2. If property is not a custom property, follow these substeps:
    1. Let property be property converted to ASCII lowercase.
    2. If property is not a case-sensitive match for a supported CSS property, then return.
- 3. If value is the empty string, invoke removeProperty() with property as argument and return.
+   3. If value is the empty string, invoke removeProperty() with property as argument and return.
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10278 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 3 May 2024 06:31:05 UTC