CSS variables should be scoped

[Ocean-OS]

Describe the bug

When using CSS variables, they are not scoped correctly. Their names should have the component's CSS hash appended to it to avoid scoping issues.

Reproduction

REPL

Logs

No response

System Info

N/A

Severity

annoyance

[webJose]

This probably breaks more than one thing. For instance my @wjfe/dataview component, which is styled by defining CSS variables. Is there a specific case you have in mind where this is needed? What would be the way to use them unscoped? Like in here:

.some-class {
  background-color: rgba(var(--bs-bg-color-rgb), var(--bs-bg-opacity));
}

I suppose that those would be rendered as:

.some-class {
  background-color: rgba(var(--bs-bg-color-rgb-HASH), var(--bs-bg-opacity-HASH));
}

Then what syntax would be feasible to make them global?

.some-class {
  background-color: rgba(var(:global(--bs-bg-color-rgb)), var(:global(--bs-bg-opacity)));
}

Like that, maybe? I'm not sure if I like this or not. I'm on the fence. If I were the one writing the parsing code, I would hate it, though. 😄

[7nik]

I never needed it, and even the opposite, I have written code that relies on the fact that CSS variables keep their names - I used them to adjust some styling in child components.

[Conduitry]

This sounds like a bad idea. CSS vars shouldn't be scoped any more than component props should be scoped.

[Ocean-OS]

This probably breaks more than one thing. For instance my @wjfe/dataview component, which is styled by defining CSS variables. Is there a specific case you have in mind where this is needed? What would be the way to use them unscoped? Like in here:

.some-class {
  background-color: rgba(var(--bs-bg-color-rgb), var(--bs-bg-opacity));
}

I suppose that those would be rendered as:

.some-class {
  background-color: rgba(var(--bs-bg-color-rgb-HASH), var(--bs-bg-opacity-HASH));
}

Then what syntax would be feasible to make them global?

.some-class {
  background-color: rgba(var(:global(--bs-bg-color-rgb)), var(:global(--bs-bg-opacity)));
}

Like that, maybe? I'm not sure if I like this or not. I'm on the fence. If I were the one writing the parsing code, I would hate it, though. 😄

Maybe instead of automatically scoping, there was a :scope()/scope() function that scoped the variable, and otherwise the variable is globally scoped?

[Thiagolino8]

The main use for CSS variables is dependency injection, making them scoped destroys this use
CSS variables are not like scss variables

[Thiagolino8]

But I think it's possible to argue the case for variables declared with @Property specifically, and make them global when declared inside a :global{} block.