René's URL Explorer Experiment

Title: CSS Variable Namespacing by mattrbeck · Pull Request #68846 · angular/angular · GitHub

Open Graph Title: CSS Variable Namespacing by mattrbeck · Pull Request #68846 · angular/angular

X Title: CSS Variable Namespacing by mattrbeck · Pull Request #68846 · angular/angular

Description: Superseds #67362. Primary differences are: Opt-out syntax is now a --global prefix, e.g. --global--foo: blue Added support for style properties, e.g. [style.--foo]="'blue'" Added errors for prefix missing trailing double-hyphen, e.g. --global-foo This adds CSS variable namespacing support to Angular. This allows multiple apps to coexist on the same page with isolated CSS variables, meaning one can use color: var(--primary-color); without worrying about accidentally inheriting the primary color of a different app which happens to set it on an ancestor element. To enable this feature, call provideCssVarNamespacing in your app.config.ts. Typically you want to configure this with the same value as APP_ID, but with an additional separator at the end (a - or _): import {ApplicationConfig, APP_ID} from '@angular/core'; import {provideCssVarNamespacing} from '@angular/platform-browser'; export const appConfig: ApplicationConfig = { providers: [ { provide: APP_ID, useValue: 'my-app', }, provideCssVarNamespacing('my-app_'), ], }; This only namespaces styles in Angular components (the styles or styleUrls properties in @Component). It does not namespace global styles, which are out of scope for this effort. Namespacing does naturally break any JavaScript references to CSS variables, therefore this PR also introduces CssVarNamespacer which allows you to automatically namespace variables based on what is configured in the application. import {CssVarNamespacer} from '@angular/platform-browser'; const namespacer = inject(CssVarNamespacer); const color = namespacer.namespace('--primary-color'); getComputedStyle(someElement).getPropertyValue(color); Libraries should consider always using the namespacer when referring to CSS variables, as they may be consumed by applications which enable namespacing. Namespacing works by having the compiler unconditionally prepend %NS% to CSS variables (--foo -> --%NS%foo) and then at runtime replaces %NS% with a namespace specified by provideCssVarNamespacing('my-app_') (--%NS%foo -> --my-app_foo). Internal bug: b/485672083 Closes #67362 via supersession.

Open Graph Description: Superseds #67362. Primary differences are: Opt-out syntax is now a --global prefix, e.g. --global--foo: blue Added support for style properties, e.g. [style.--foo]="'blue'" Added...

X Description: Superseds #67362. Primary differences are: Opt-out syntax is now a --global prefix, e.g. --global--foo: blue Added support for style properties, e.g. [style.--foo]="'blue'...

Opengraph URL: https://github.com/angular/angular/pull/68846

X: @github

direct link

Domain: github.com

Links:

Viewport: width=device-width