Re: [csswg-drafts] [css-mixins] custom mixins & functions should have some access to custom properties on the calling element. How much? (#9938)

If, in Tab’s example, `--foo` should not be visible inside `--inner()`, then why would `--inner()` be accessible inside `--outer()`? 

If the answer is: ”duh, because it’s declared with the `@function` at-rule and not like a custom property within a ruleset“, we effectively are introducing global constants (with awkward parentheses to distinguish them from custom properties):

~~~~ css
@function --phi() {
  result: calc(0.5 + sqrt(1.25));
}
.foo {
--phi: 1.618; /* unused */
  aspect-ratio: var(--phi, 1.6); /* legacy */
  aspect-ratio: --phi();
}
~~~~

I’m not saying this was bad or unexpected, but I think I vaguely remember some arguments being raised against this when variables had been proposed – using an at-rule – and hence ended up as custom properties.  

Nobody wants to define the function body within a property value, I guess:

~~~~ css
:root {
--parameter: 1; /* initial */
--function(): calc(1em * arg(1, 1) * pow(2, var(--parameter, 0) / 2));
}
.foo {
--parameter: 2;
  font-size: func(--function, 3); /* = 1em * 3 * pow(2, 2 / 2) */
}
~~~~
(It’s non-obvious whether the second argument to `func()` would be passed to the custom function or if it was the fallback value as in `var()`.)

----

I agree that global functions would be hardly manageable if local ”variables“ would intrude their scope. That is one reason why I suggested that, inside functions, named variables needed to be declared explicitly in the usual way  as custom properties and would need `arg()` to use the value of parameters passed to the function.

Although I’m not sure it’s a good idea, you could then still allow external variables to bleed in, but it would be obvious that the closest definition wins. Basically, the function at-rule would behave as if it inherited the custom properties from the ruleset it is used within, and could also overwrite them.

~~~~ css
@function --outer() {
--foo: arg(1);
  result: calc(var(--foo) + --inner());
}
@function --inner() {
  result: calc(var(--foo) / 2);
}
.foo {
--foo: 1;
  width: calc(--outer(10) * 1px); /* = 15px */
  height: calc(--inner(10) * 1px); /* = 0.5px */
}
~~~~

Arguments could also be pre-named, but would live in a different namespace as custom properties and therefore could not be used directly in `var()`:

~~~~ css
@function --outer(--foo) {
--foo: arg(--foo); /* for --inner() */
  result: calc(arg(--foo) + --inner());
}
~~~~


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


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

Received on Thursday, 15 February 2024 06:56:03 UTC