Re: [csswg-drafts] [css-scoping] Scoping of functions, other name-defining at-rules and custom idents (#11798)

Issue from Emilio regarding custom props. Consider the following:

```css
@namespace foo { 
  @keyframes my-ident { ... } 
  div { 
    --custom: my-ident; 
    animation-name: my-ident; /* works */; 
    animation-name: var(--custom); /* ? */ 
  }
}
```

If we resolve lexically, then custom props can't work - you have no idea that a given keyword is going to be used in a namespace-able way, nor what *type* of ident it'll end up being - the same var() can be used for a keyframes and a font-face, which can be defined at different namespace levels.

My immediate idea is that, in addition to the `foo|name` syntax, we can offer a functional form, `scoped-name(foo, ident)`, which is an [arbitrary substitution function](https://drafts.csswg.org/css-values-5/#arbitrary-substitution) and will "substitute" itself into a name + the surrounding lexical scope.

So the above code would have to be written:

```css
@namespace foo { 
  @keyframes my-ident { ... } 
  div { 
    --custom: scoped-name(my-ident); 
    animation-name: my-ident; /* works */; 
    animation-name: var(--custom); /* works */ 
  }
}
```

I'm not 100% sure this works, tho. Hmm.

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


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

Received on Thursday, 13 November 2025 01:16:54 UTC