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

> What does it mean to define a value inside a mixin?

I think this is an interesting question indeed. 

There will be more research required to gauge how common this use case is.

I will assume that the conflicts like this one is something that we need to handle, but it is a rare enough case to grant a more verbose solution, allowing to make the common cases more simple.

I assume that most developers will want to treat any variables defined inside functions or mixins as being as the “pseudo-ancestors” of any nested function or mixin calls. Again — I assume based on how I think I'll treat it, but this is likely a case where some polling might be required.

Here is how I'd think of the above example (adding some extra stuff to complicate things even more)

```CSS
@mixin --bar(--b: 5px;) {
  outline: arg(--b) solid; /* 5px as the default value for the --b argument */
  border-width: var(--b); /* 2px as overrided from the `--foo` */
  padding-left: var(--a); /* 0px from the `.foo`, as the `--a` on the `foo` is an argument, not a variable */
  margin: var(--c); /* 1px as we passed the outer --b via `using`, and then passed it to `--bar` via `with` with the `--c` name */
}

@mixin --foo(--a: 1px;) using (--b as --b-outer) {
  --b: 2px; /* custom property override */
  --c: var(--b-outer); /* we can access the outer `--b` by renaming it with `using` */
  div {
    @apply --bar() with(--b-outer as --c);
  }
}

.foo {
  --a: 0px;
  --b: 1px;
  @apply --foo();
}
```

Basically:

1. We can separate arguments and variables via `arg()` and `var()`. We're getting more and more dashed idents everywhere, so I think it is perfectly fine to have these types of separation.

2. If we want to define a local variable with the same name as the outer, while still having access to the outer, we can introduce `using(--a as --b)` for renaming the variables. 

3. If we'd want to override the value of some variable consumed by some mixin, we could introduce something like `with(--a as --b)`.

- - -

Note that this is more of a brainstorming around the issues while assuming that the most cases won't require either `using` or `with` and will be fine with variables being completely transparent, and being overrideable on the nested scopes. Also note that the example is very abstract and is non-practical — to understand what works or not, we'd need to write some pseudocode for some more practical examples of different types of complexity, from more simple DRY mixins and functions, to more complicated constructions and abstractions.

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


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

Received on Friday, 23 February 2024 20:52:44 UTC