Which @angular/* package(s) are the source of the bug?
platform-browser
Is this a regression?
No
Description
CSS Variables namespacing, introduced in v22.1.0, lacks support for template-embedded styles.
As shown below, when passing a local CSS variable to the var function on the right side of a style binding, this will not be namespaced and will instead match the global --text-color variable.
@Component({
selector: 'app-root',
template: `
<p>Component Scope Text</p>
<p [style.color]="'var(--text-color)'">Component Scope Text (inline)</p>
`,
styles: `
:host {
--text-color: blue;
--global--text-color: green;
}
p {
color: var(--text-color);
}
`,
})
export class App {
}
This behavior is inconsistent with namespace resolution being enabled on the left-hand side of style bindings, which tends to cause confusion for developers.
Please provide a link to a minimal reproduction of the bug
https://github.com/lacolaco/angular-css-var-namespacing-issue-repro
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run ng version)
Angular CLI : 22.1.2
Angular : 22.1.0
Node.js : 22.22.3
Package Manager : npm 10.9.8
Operating System : darwin arm64
┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build │ 22.1.2 │ ^22.1.2 │
│ @angular/cli │ 22.1.2 │ ^22.1.2 │
│ @angular/common │ 22.1.0 │ ^22.1.0 │
│ @angular/compiler │ 22.1.0 │ ^22.1.0 │
│ @angular/compiler-cli │ 22.1.0 │ ^22.1.0 │
│ @angular/core │ 22.1.0 │ ^22.1.0 │
│ @angular/forms │ 22.1.0 │ ^22.1.0 │
│ @angular/platform-browser │ 22.1.0 │ ^22.1.0 │
│ @angular/router │ 22.1.0 │ ^22.1.0 │
│ rxjs │ 7.8.2 │ ~7.8.0 │
│ typescript │ 6.0.3 │ ~6.0.2 │
│ vitest │ 4.1.10 │ ^4.0.8 │
└───────────────────────────┴───────────────────┴───────────────────┘
Anything else?
No response
Which @angular/* package(s) are the source of the bug?
platform-browser
Is this a regression?
No
Description
CSS Variables namespacing, introduced in v22.1.0, lacks support for template-embedded styles.
As shown below, when passing a local CSS variable to the var function on the right side of a style binding, this will not be namespaced and will instead match the global --text-color variable.
This behavior is inconsistent with namespace resolution being enabled on the left-hand side of style bindings, which tends to cause confusion for developers.
Please provide a link to a minimal reproduction of the bug
https://github.com/lacolaco/angular-css-var-namespacing-issue-repro
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run
ng version)Anything else?
No response