Re: [csswg-drafts] [css-mixins-1] Alternatives to using a scoping rule (#13727)

@andruud I think there may be a misunderstanding of what I'm proposing here because your example seems pretty straightforward to me. 

The rule the mixin injects would become:

```css
& {
 --arg-c5f2d35: inherit(--arg-c5f2d35, 10em);
 --arg-c5f2d35-length: var(--arg-c5f2d35);
 width: var(--arg-c5f2d35-length);

 #ancestor:has(&) {
  --arg-c5f2d35: inherit(--arg-c5f2d35, 10em);
  --arg-c5f2d35-length: var(--arg-c5f2d35);
  width: var(--arg-c5f2d35-length);
 }
}
```

Which would make the CSS:

```css
#ancestor {
 font-size: 20px;
}

#descendant {
 font-size: 10px;

 & {
  --arg-c5f2d35: inherit(--arg-c5f2d35, 10em);
  --arg-c5f2d35-length: var(--arg-c5f2d35);
  width: var(--arg-c5f2d35-length);
 
  #ancestor:has(&) {
   --arg-c5f2d35: inherit(--arg-c5f2d35, 10em);
   --arg-c5f2d35-length: var(--arg-c5f2d35);
   width: var(--arg-c5f2d35-length);
  }
 }
}
```

Which would resolve to something equivalent to:

```css
#ancestor {
 font-size: 20px;
}

#descendant {
 font-size: 10px;
 width: 10px;
}

#ancestor:has(#descendant) {
 width: 20px;
}
```

>    --arg-c5f2d35-length: var(--arg-c5f2d35); /* 100px for div, 200px for > figure, 300px for & + p! */
> Isn't this the result we want to _avoid_?

Is it? If we're not sure then we need developer research *way* before we think about implementation. Personally, I would find it extremely surprising if all of these resolved to 100px, or if `#ancestor` in your example got `width: 10px` even if it *were* possible to implement it that way.

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


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

Received on Thursday, 26 March 2026 22:00:55 UTC