[css-mixins] Allow mixins/functions to be called via custom properties

[sorvell]

Allow functions and mixins to be called via custom properties to support some additional interesting use cases. The syntax in the current proposal seems like it might need a little tweaking to support this. Here's a rough sketch that needs a lot more fleshing out if this idea doesn't have some obvious fatal flaw.

The suggestion in the current proposal is that functions/mixins are global, and while this allows some composition, it's limited since it must be determined at thte point of consumption, and it's cumbersome (requiring some companion variable) for the caller to do so.

Basic Idea

Introduce a way to "call" mixins/functions, say, using a built-in function called call that accepts var:

@mixin --hover-focus(--hover; --focus;) {
  &:hover {
    @apply call(var(--hover), 2);
  }
  &:focus {
    @apply call(var(--focus), 4;
  }
}

@function --shadow(--x: 0; --y: 0; --color: black; --calc-blur;) {
  @return var(--x) var(--y) call(var(--calc-blur, --x, --y)) var(--color);
}

Use Cases

• more robust composition of effects (the contrived examples above hint at this).
• passing nested content to mixins as noted in the explainer.
• as custom properties, mixins and functions could inherit down the tree to be applied elsewhere in the DOM, even cross-scope in Shadow DOM.

[tabatkins]

Marking this as "unknown/future spec", as if we address this it'll be in a future level. First-class functions (aka closures) are great, but you can get really far just using globally-defined functions.

[LeaVerou]

Btw I believe this should already be possible for parameter-less mixins, via ident(). For mixins with parameters, I think we need a way to construct function tokens, as use cases for that come up frequently and are not specific to mixins. I'll open a new issue.