Re: [csswg-drafts] Declarative custom functions (#7490)

Is there a need for a result syntax and a fallback value?

If declarative custom functions were to be used in animations, the result should have a declared syntax. 

In addition, one should probably be able to provide a fallback value if the result expression is invalid.

```CSS
@custom-function --flat-color(--color) {
   arg-syntax: --color "<color>";
   result: var(--color), var(--color);
   result-syntax: "<color>#";
   fallback: red, red;
} 

.valid-use {
   background: linear-gradient(--flat-color(green)); /* green */
}

.invalid-use {
   background: linear-gradient(--flat-color()); /* red */
}
```

Would a single space be allowed as an argument, similar to a space in a custom property declaration?

```CSS
--valid-declaration: ; /* single whitespace */

@custom-function --identity(--input) {
   arg-syntax: --input "*";
   result: var(--input);
}

.use {
   --valid-declaration: ; /* single whitespace */
   --also-valid-declaration: --identity( ); /* single whitespace */
   --invalid-declaration: --identity(); /* no argument, guaranteed-invalid */
}
```

If so, I guess this could be used to create an --if-else function using the space toggle trick (_not that we want to do this_):

```CSS
@custom-function --if-else(--condition, --result-if-true, --result-if-false) {
   arg-syntax: --condition "*", --result-if-true "*", --result-if-false "*";
   result: var(--condition) var(--result-if-true);
   result-syntax: "*";
   fallback: var(--result-if-false);
} 

.use-with-true-condition {
   background: --if-else( , green, red); /* green */
}

.use-with-false-condition {
   background: --if-else(initial, green, red); /* red */
}
```

-- 
GitHub Notification of comment by johannesodland
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7490#issuecomment-1193102161 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 23 July 2022 10:26:03 UTC