Re: [csswg-drafts] Proposal: Custom CSS Functions & Mixins (#9350)

@tabatkins

> the strong convention of nearly every programming language in the world suggests that going completely lexical is ideal - the only names visible to the function body are listed in its arg list.  

I don't think it is useful to compare most programming languages with the declarative way CSS handles things as applied over HTML, or maybe I don't see which exact issues requiring the `using()` will prevent.

> This also puts us in a good spot for future expansion into JS-backed custom functions, since JS is strictly lexical as well.

When thinking about CSS functions called from JS, I'd think they'd require passing the element context to them to evaluate over; otherwise I'm not sure how useful they could be?

> The scope it's called in. In your example, `--foo()` will see an undefined `--var1` (aka the guaranteed-invalid value) and a `--var2` of 10.
> […]
> If we had to explicitly pass all of them as variables, I'd definitely agree. As written, tho, you just have to state them once per function definition.

That will mean that any function that _uses_ something will require any other function that will want to include it inside to also list all the dependencies.

> Also, design tokens are generally going to be global

In my practice, there were common cases where some semantic design tokens are not, in fact, global, but can be overridden on any element in the DOM. The simplest example of this is theming: we could swap the dark & light theme on some element (swapping the values of hundreds of tokens), and will want nested functions to take this into account. Other example: typography, where we could want to set the “size” for some container, and then apply different set of dependent tokens that will be used inside.

- - -

Re: `using()`, I would really want to look at the examples of practical problems it will solve. Let me try to ask it in a different way.

Let's look at an example with `using` and without:

```CSS
@function --foo() {
  @return var(--bar);
}
```

```CSS
@function --foo() using (--bar) {
  @return var(--bar);
}
```

As I see it: without `using`, the `var(--bar)` in the first example will be _always_ guaranteed-invalid, right? I don't think this is ever useful? Wouldn't requiring `using` here be redundant?

The only useful case for having something like `using` will be if we'd want to grab some variable and _redefine_ it, like if we'd have another function that would want to _use_ a variable which name clashes with what we'd want to retrieve from the outside.

```CSS
@function --foo() {
  @return var(--bar);
}

@function --baz() using (--bar as --outer-bar) {
  --bar: something;
  --a: --foo(); // will be `--a: something`
  --b: var(--outer-bar); // We can still access outer `--bar`
}
```


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


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

Received on Monday, 12 February 2024 22:58:15 UTC