Re: [csswg-drafts] [css-mixins-1] A var()-based model for mixin parameters (#12927)

I like the new spec but I'm not convinced the hygenic variable renaming is fully fleshed out or does the right thing in its current form. Consider this example:

```html
<style>
@mixin --two-divs-in(--col) {
  @result {
    & > div > div {
      color: var(--col)
    }
  }
}

div[data-two-in-color] {
  @apply --two-divs-in(attr(data-two-in-color type(<color>)));
}

</style>
<div data-two-in-color="red">black
  <div data-two-in-color="green">black
    <div data-two-in-color="blue">Am I red or blue?
      <div data-two-in-color="yellow">Am I green or yellow?
</div></div></div></div>
```

Based on [Example 14](https://drafts.csswg.org/css-mixins-1/#example-92ef4f0c) it appears the css would be changed to something like this:

```css
div[data-two-in-color] {
  --col-abc123d4: attr(data-two-in-color type(<color>));
  @scope (&) {
    :scope > div > div {
      color: var(--col-abc123d4);
    }
  }
}
```

This would not apply the color two divs in, as the variable would be overridden by inner applications, so the text would be blue and yellow.

A hygenic renaming that would get the value from where the mixin was applied would be:

```css
div[data-two-in-color] {
  --col-abc123d4: attr(data-two-in-color type(<color>));
  @scope (&) {
    :scope > div {
      --col-bcd234e5: inherit(--col-abc123d4);
    }
    :scope > div > div {
      --col-cde345f6: inherit(--col-bcd234e5);
      color: var(--col-cde345f6);
    }
  }
}
```

In this case the text would be red and green.

Is it worth speccing out this behavior? The difference is between

 - `var(--local-var)` returns the value from the closest `@apply` of this mixin

vs

 - `var(--local-var)` returns the value from the closest `@apply` of this mixin that would have resulted in the application of this nested rule

I'm not sure how often this will come up in practice but the latter seems more intuitive to me.

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


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

Received on Thursday, 5 March 2026 13:50:38 UTC