[csswg-drafts] [css-properties-values-api] [css-syntax] Syntax to set the initial value of an @property-registered custom property to a single space? (#9078)

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

== [css-properties-values-api] [css-syntax] Syntax to set the initial value of an @property-registered custom property to a single space? ==
An often used hack with `@property` is [the space toggle hack](https://github.com/propjockey/css-sweeper#space-toggle-has-been-independently-discoverd-a-handful-of-times) where you flip a custom property between a single space and `initial` to [all some clever things with it](https://lea.verou.me/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/).

While looking into registering a custom property with a space as a default value, I found that it is not possible to do so. The code below does not work _(tested in Safari TP 174 and Chrome Canary 117)_:

```css
@property --registered {
  syntax: '*';
  initial-value: ;
  inherits: true;
}
```

With the code above, it is as if `--registered` is not registered at all.

Its JS counterpart – using `CSS.registerProperty(…)` – does work, but that’s not what I was aiming at … I wanted a pure CSS version.

```js
// This works …
CSS.registerProperty({
  name: '--registered',
  syntax: '*',
  initialValue: String.fromCharCode(0x20), // (or just use ' ')
  inherits: true
});
```

Furthermore, for the CSS version, I [tried](https://codepen.io/bramus/pen/bGjQVEm) all these variations, none of which worked:

```css
  initial-value: ; /* Single space, right? */
  initial-value:  ; /* Maybe two spaces will work? */
  initial-value: \ ; /* Maybe escaping it will work? */
  initial-value: '\ '; /* Maybe quoting it will work? */
  initial-value: ' '; /* Oh, this is just a string "' '" */
  initial-value: " "; /* If single quotes don’t work, double ones might? */
  initial-value: 0020; /* Charcode, maybe? */
  initial-value: \0020; /* O yeah, hex must have a leaving \ */
  initial-value: "\0020"; /* Maybe quote it? */
  initial-value: \\0020; /* Escaped \ before the charcode, maybe? */
  initial-value: U+0020; /* Or a codepoint maybe? */
  initial-value: "U+0020"; /* What if I quoted it? */
  initial-value: 0000; /* This miraculously works for colors but not for anything else */
  initial-value: ​; /* A zero width space perhaps? */
```

So now I’m wondering, what is the syntax to set the initial value of an `@property`-registered custom property to a single space? I don’t see any special mentions in the syntax for [descriptor declarations](https://drafts.csswg.org/css-syntax-3/#declaration), so expected it to behave like property declarations. Or is this a parser bug in both Chrome Canary and Safari TP?

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


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

Received on Tuesday, 18 July 2023 00:50:00 UTC