[css-properties-values-api-1] Allow @property syntax checking to work with fallback value

[miragecraft]

I'm experimenting with the new @property at-rule and feel that it should include the ability to use syntax in conjunction with custom property fallback value.

For example, let's say I want to create a special --width custom property that accepts fractions (such as 1/2, 2/5) in addition to all the values allowed by the built-in width property including the unitless 0, <percentage-length>, as well as all the keywords such as auto, min-content, max-content, fit-content.

Currently it's not possible to do so, but if we allow syntax checking with fallback, we can do:

div {
  --width-percent: calc(var(--width) * 100%);
  width: var(--width-percent, var(--width));
}

@property --width-percent {
  syntax: "<percentage>";
  inherits:false;
}

So this is why I would like the spec to allow combining fallback with syntax checking.

[Loirooriol]

This should probably be in https://github.com/w3c/css-houdini-drafts/issues/

And I don't really understand what you are proposing.

[miragecraft]

And I don't really understand what you are proposing.

Currently, once you specify @property for a custom property, you can no longer use a fallback value because @property mandates an initial-value if you define a syntax other than syntax: "*".

The initial-value takes over the functionality of the fallback value.

This leaves two gaps in functionality:

1. You can no longer use different fallback values for the same custom property, because the initial-value is defined once globally.
2. You can no longer use custom property within the fallback (initial-value) of another custom property, because @property does not support it.