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

[bramus]

An often used hack with @property is the space toggle hack where you flip a custom property between a single space and initial to all some clever things with it.

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):

@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.

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

Furthermore, for the CSS version, I tried all these variations, none of which worked:

  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, so expected it to behave like property declarations. Or is this a parser bug in both Chrome Canary and Safari TP?

[andruud]

Oopsie.

[cdoublev]

The value definition of initial-value should be <declaration-value>? rather than <declaration-value>, no?

[tabatkins]

Sigh, yeah, it should have a ?, same as custom properties.

[tabatkins]

Fixed.