Re: [css-houdini-drafts] Proposal: Custom functions for modifying CSS values (#857)

This is excellent. I have some questions!

### Booleans?
As far as I know, CSS has no boolean type. But custom functions really need them as an intermediate value to allow custom functions to interoperate. Otherwise developers will end up with some sort of cargo-culted convention of using `true` and `false` idents but only be able to declare an input as accepting `<ident>` which is a much bigger input space.

### Optional Arguments?
Can trailing arguments be made optional? Can optional arguments be assigned a default value?

### Evaluation Order?
The ability to lazily evaluate input arguments, is required to implement something like conditional execution. E.g. `if(cond, if-true-val, if-false-val)` is a function that only evaluates either the second or the third argument based on the value of the first.

I'm curious whether custom functions that receive arguments that other custom functions would receive the output of that function or would receive a production that indicates it is a custom function invocation and could lazily evaluate that invocation. If the former, could the latter be enabled by a different input argument declaration.

### Type Generics

So that authors can write generic code that is correctly typed, it seems like there should be some concept of a type generic.

### Putting it all together

When we put all these ideas together we can write a generic if statement where the conditional checks whether the data being operated on is valid to be used in the `if-true` branch and handles that situation gracefully if it's not.

```js
class ConditionalEvaluation {
    static get genericTypeArguments() { return ['<T>']; }
    static get inputArguments() { return ['<boolean>', CSS.CustomFunction.lazyArgument('<T>'), CSS.CustomFunction.lazyArgument('<T>?')]; }
    static get returnType() { return '<T> | <null>'; }

    // evaluate the ifTrue condition if the condition is true,
    // evaluate the ifFalse condition if it's provided and if the condition is false
    // return null, causing the declaration to be dropped otherwise.
    conditional([condition, ifTrue, ifFalse], styleMap) {
        if(!!condition) {
            return CSS.CustomFunction.evaluate(ifTrue);
        } else if (ifFalse) {
            return CSS.CustomFunction.evaluate(ifFalse);
        } else {
            return null;
        }
    }
}

registerCustomFunction("--if", ConditionalEvaluation, "conditional");
```


-- 
GitHub Notification of comment by chriseppstein
Please view or discuss this issue at https://github.com/w3c/css-houdini-drafts/issues/857#issuecomment-500018392 using your GitHub account

Received on Friday, 7 June 2019 19:56:17 UTC