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

> A common problem for them all: currently, most of them (all? I did not check) are [tree-scoped](https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-name).

> This means that it is very easy to have a name clash between libraries, components, and other CSS things, where it is very easy to accidentally reuse the same name.

Is the problem you are describing mostly name clashes?
I didn't see any other use case mentioned.
If so, I don't think `@scope` is the right approach.

Authors will want to mix and match things defined in different sources on the same element.

------

Some ideas I've been considering:

### Add a block syntax to `@import` to declare aliases.

```css
@import "lib.css" {
  @keyframe BOUNCE as LIB_BOUNCE;
}
```

Lot's of questions with this one:
- does it still import everything, including `BOUNCE` as `BOUNCE`?
- what happens if `BOUNCE` uses variables that also have a naming conflict?


### Have multiple isolated lists/registries of user defined idents.

```css
@import "lib.css" namespace(foo);
```

Every name defining thing (at rules, custom props, grid template area's, ...) from `lib.css` (including more imports) would be isolated in their own registry.

From the perspective of `lib.css` everything appears to be normal and unaltered.
But no user defined ident can conflict with anything on the outside.

Referencing things would require some method of constructing the namespaced ident.
Maybe something like `ident(namespace(foo) --bar)`?

```css
.foo {
  width: var(ident(namespace(foo) --bar));
}
```

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


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

Received on Sunday, 2 March 2025 21:55:19 UTC