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

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

I mention that named scopes could cover this use case, although it could be not ideal.

- - -

Handling this with imports is an option, but I think it should be only as an _additional_ option, like with an ability to add a layer to an import. There was a proposal for being able to use `@scope` when importing something: https://github.com/w3c/csswg-drafts/issues/7348 which could allow doing this in some way as well (but also cumbersome).

Why I don't think imports-only way is good: there are use cases for doing this inside a single file. Even aside from bundled stylesheets, you could want to have something like this for two components in a single file. There is no reason to restrict this to an import-level definition.

- - -

That said, maybe `@scope` is not the best option as well. I like how the import option is close to how this is handled in things like [CSS Modules](https://github.com/css-modules/css-modules), where the idents are not tied to some _element tree_, but are scoped for a whole _file_. I think, this is what @mayank99 means by a module-like system?

What if we could do this with block-level scoping, somehow? Any idents that share their name inside one block are treated as the same, but idents in different blocks are not.

- - -

I wonder if we could somehow adopt the [`@namespace`](https://drafts.csswg.org/css-namespaces/#declaration) for this? I don't remember when was the last time I saw them used in its current form, but maybe there is a way we could override it with a compatible syntax in a way that will just work?

The current syntax of `@namespace` is `@namespace <namespace-prefix>? [ <string> | <url> ] ;` — without a block, with a required string/url, and can only be at the beginning of the file.

What if we override it with a `@namespace <dashed-ident> { <rule-list> }`, and allow everywhere? It does not intersect with the current `@namespace`, so could work out? If not, then we could bikeshed the name for such at-rule, I don't have a srtrong preference to `@namespace`, just, again, something that seems obvious from semantic standpoing. And — we could reuse the `|` for recalling all the idents as well?

```CSS
@namespace --a {
 @function --foo() { result: lightgreen }
 .a {
  background: --foo(); /* lightgreen */
 }
}

@namespace --b {
 @function --foo() { result: pink }

 .b {
  background: --foo(); /* pink */
 }
}

.foo {
 background: --foo(); /* transparent — not defined outside a namespace */
}

.bar {
 background: --a|--foo(); /* lightgreen: uses --foo() from --a namespace */
 outline: 2px solid --b|--foo(); /* pink: uses --foo() from --b namespace */
}
```

Maybe the `|` syntax is not the best, but I think it would be great to have shorted than `ident(namespace(--a) --foo)`, and something that could be used for things like functions, and not just idents.

I also considered reusing the `@sheet`, but I don't like that sheets are not applied by default, so this won't work for use cases where you just want to have isolated idents per component in a single file.

So far, the round up of options:

1. `@scope namespace --foo`
2. `contain: names`
3. `@import namespace(--foo)` for a file-only namespacing?
4. `@namespace --foo {}` (or other name, with an idea of namespacing/scoping only what is inside a block). Could have an option 3. as an alternative way of applying it alongside.


-- 
GitHub Notification of comment by kizu
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11798#issuecomment-2692949261 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 22:48:32 UTC