[css-houdini-drafts] [proposal] New CSS conditional rule to detect registration events (#882)

AmeliaBR has just created a new issue for https://github.com/w3c/css-houdini-drafts:

== [proposal] New CSS conditional rule to detect registration events ==
## Rationale

Currently, using custom properties or worklets short-circuits many of CSS's normal fallback mechanisms.  The JS registration happens asynchronously compared to CSS parsing, so at parse time there is no way to know what will or won't be valid after registration. The chosen approach is to accept all possible custom things as valid at parse time, and invalidate them at computed-value time. But that means that the options for invalidation don't include falling back to other declarations for the same property.

For non-registered custom properties, authors can use an `@supports` test coupled with their own knowledge of their custom properties.  For example, to test that a `var()` function will work in a given property, they can construct a supports test that uses a sample literal value instead:

```css
@supports (text-decoration: red) {
  :link { text-decoration: var(--accent-color) underline; }
}
```

But that doesn't address cases where you might want different fallback values depending on whether or not relevant Houdini code has successfully run.  For example, maybe you want to change an animation if your custom property won't be able to interpolate in a type-aware manner. Or you want a specific fallback `display` value if a Layout Worklet fails to load.

Currently, the only ways to handle these cases are to add or remove style rules from JS itself, or to use JS to set a document-level class after the registrations are complete (and use that class in all your selectors).

## Proposal: `@registered` conditional rule

`@registered` would be a new [conditional group rule](https://drafts.csswg.org/css-conditional-3/#conditional-group-rule) similar to `@media` and `@supports`.  It would limit the application of the child rules depending on whether or not a given registration event has been processed:

- `@registered --prop {}` tests if `--prop` has been [registered as a custom property](https://drafts.css-houdini.org/css-properties-values-api/#registering-custom-properties).

- `@registered layout(lo) {}` tests if `lo` has been [registered as a custom layout name](https://drafts.css-houdini.org/css-layout-api/#registering-layout).

- `@registered paint(p) {}` tests if `p` has been [registered as a custom paint source name](https://drafts.css-houdini.org/css-paint-api/#registering-custom-paint).

Other syntaxes could be added as necessary, e.g., for custom functions (as proposed in #857), or if a declarative version of [Animation Worklets](https://drafts.css-houdini.org/css-animationworklet/) is ever defined.

Just like the existing conditional rules, you could combine multiple tests with parentheses and Boolean operators.

Note: the likely place for spec'ing this rule would be [CSS Conditional Rules Level 4](https://drafts.csswg.org/css-conditional-4/). But since the details and use cases are all Houdini-related, I figured it made sense to open the discussion here. 

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

Received on Friday, 3 May 2019 20:55:28 UTC