Re: [csswg-drafts] [css-properties-values-api] Extend `@property` at-rule to support globally settable values (#7866)

Another idea to help differentiate globally set variables from locally set variables would be to implement a unique syntax unique to when you want to set a global/scoped variable.

Even more powerful, I think, would be to enable variables to be used both ways, locally and globally (within the current scope), by using or not using this syntax. There's already quite a bit of discussion going on surrounding the meaning and implications of `&`, and it's quite powerful. Per some [recent discussion](https://github.com/w3c/csswg-drafts/issues/5745#issuecomment-1268854081), `&` will likely reference the current scope whether that's a nested context, a scoped region, or even the global scope.

One caveat I can foresee to my spec here already is that if a third party uses the same variable names you do with a global scope, there may be a conflict where their values override yours and vice-versa. Alternatively and more safely, I propose making these "global" variables scoped variables instead of making them truly scoped, which feels a lot less dangerous to me already.

They could be used the same way variables are already used, with or without `@property`. This could exist without extending, though it would require extending the syntax surrounding variable definitions.

`--some-prop: 123;` would set the value of `--some-prop` to `123` locally only, while
`&--some-prop: 123;` would set the value of `--some-prop` to `123` locally AND globally within the current and descendant scopes, though any scoped variables of the same name used in descendant scopes would override ancestor scoped contexts to avoid variable name conflicts

I'm considering this new syntax for a couple of reasons—
* `&` is relevant to the scope, and with the redefinition of this spec to be scoped variables rather than truly global variables, this may be the clearest way to set these definitions apart
* I'm not an expert with compilers and how they operate, but from what I understand of CSS and how we're already setting up `&` to be the first character of a selector to boost performance of the compiler, I'm thinking the same idea may apply to this use case, so `&--` could uniquely and quickly identify variable values that are setting a value for that named property within the current scope.
  * I would also recommend the same for referencing scoped variables (e.g. `var(&--some-prop)`).

That said, I think `&--some-prop: 123` is a little ugly-looking, and `*--some-prop: 123` or even `scoped(--some-prop): 123` would look nicer, but I value clarity and intuitive adoption over how nice something looks, so I'd probably opt for `&--` over `*--` or `scoped(--)`.

Here's an example of how this change could look in practice:

```css
main {
  span {
    --some-prop-1: var(--title); /* this will NOT work, as no value for `var(--title)` exists to be naturally/locally inherited within the current cascade */
    --some-prop-2: var(&--title); /* this WILL work, uses value from current scope, declared LATER in `main + div[title]`  */
  }
  & + div[title] {
    &--title: attr(title);
    --addtl-title-1: var(--title); /* same as `var(&--title)`, defining globally also defines locally */
    --addtl-title-2: var(&--title); /* global works in the same selector here as well */
    &::before {
      --content-1: var(--title); /* naturally inherited from parent/ancestor, locally */
      --content-2: var(&--title); /* references scoped variable, does not look for inheritable value */
    }
  }
}
```

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


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

Received on Wednesday, 12 October 2022 00:55:04 UTC