[css-properties-values-api] [css-syntax] Syntax to set the initial value of an @property-registered custom property to a single space? · Issue #9078 · w3c/csswg-drafts · GitHub
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
bramus opened this issue Jul 18, 2023 · 4 comments
Closed

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

bramus opened this issue Jul 18, 2023 · 4 comments
Labels
Closed Accepted as Obvious Bugfix css-properties-values-api-1 css-syntax-3

Comments

@bramus
Copy link
Contributor

bramus commented Jul 18, 2023

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
Copy link
Member

andruud commented Aug 23, 2023

Oopsie.

@cdoublev
Copy link
Collaborator

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

@tabatkins
Copy link
Member

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

@tabatkins
Copy link
Member

Fixed.

@cdoublev cdoublev mentioned this issue Oct 21, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Closed Accepted as Obvious Bugfix css-properties-values-api-1 css-syntax-3
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@andruud @bramus @tabatkins @cdoublev