Repository navigation
Lack of CSS Variable namespacing in style binding expression #70063
Description
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
No errors.
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
Activity
aparzi commentedon Aug 17, 2026
CC @JeanMeche
I was considering picking this up, there's a concern worth raising here: namespacing the right-hand side of style bindings can only work for statically analyzable inline strings (e.g. [style.color]="'var(--text-color)'"). When the value comes from a component property or any runtime expression (e.g. [style.color]="textColor" where textColor = 'var(--text-color)'), the compiler has no way to rewrite it, so the variable would not be namespaced.
This would introduce a new inconsistency between inline string literals and property-based values — arguably more confusing than the current one, since two bindings that look equivalent would behave differently depending on where the string lives.
Curious if there's a design that could address this, or whether the recommendation should simply be to reference namespaced variables explicitly in bindings.