[css-conditional] Custom @if conditions via JavaScript

[SebastianZ]

In #3559 we were searching for a way to check for contextual support of features like gap in Flexbox, align-content in Block layout and similar things.

At some point in the discussion I then came up with the idea to solve this via of script-based custom @supports rules. I also provided an example for how those could be used to check whether gap is working in the context of a Flex layout.
@fantasai then pointed out in a call that those conditional checks can be thought broader and might be added to the @when (she said @if back then) instead.

The concept behind that is to allow to register a named condition worklet, which can then be used as condition in @when rules. Its way of working would be similar to other worklets like Paint Worklets.

This makes conditionally applying styles very versatile and covers a lot of use cases like the mentioned contextual feature check, time- and date-based styling, allow to apply styles based on scroll direction, or might even be a way to solve layout-dependent styling.

The concrete proposal is to add a worklet that looks like this:

class Condition {
    static get inputProperties() { return []; }
    static get inputArguments() { return []; }
    static get contextOptions() { return {once: true, currentDocument: false}; }

    check(document, styleMap) {
        // Do check
    }
}

registerCondition('--condition', Condition);

Where the context option once: true means the check is only executed a single time right after the rule is parsed. So it works like an @supports check. If it is set to false, the check is executed continuously like in different @media conditions.
Maybe instead of running continuously, some way to execute only once specific DOM properties change could be introduced. E.g. only execute once document.location changes.

The context option currentDocument indicates whether the document parameter of the check() method refers to the current page's document or is independent from it.
For some use cases like feature support checks you only need access to an independent DOM. Though in many use cases access to the current DOM is necessary.

Both of those options definitely require some deeper thought on performance, privacy, and security.

The worklet can then registered like that:

CSS.conditionWorklet.addModule('condition.js');

And finally, in CSS you'll use it like this:

@when --condition {}

Sebastian