Angular v22.1: CSS変数のネームスペース化

CRANK

v22.1でCSS変数をネームスペース化する新しい機能が追加された。その使い方について紹介する。Namespaced CSS VariablesCSS変数のネームスペース化とは、あるAngularアプリケーションのコンポーネントCSS内で宣言されたCSS変数を、別のアプリケーションやライブラリのCSS変数と衝突させないために名前空間で隔離するものだ。たとえば、--primary-colorのようなよくある名前のCSS変数はアプリケーションで使うとサードパーティのUIライブラリと衝突することがよくある。この問題を回避するため、変数名に特定のprefixを付けて名前空間を分ける運用が一般的だが、今回の機能はそれを自動化してくれるものだ。CSS変数のネームスペース化はオプトインの機能となっており、有効にしない限りこれまでの振る舞いが変わることはない。有効にするには、アプリケーションコンフィグにprovideCssVarNamespacingプロバイダーを追加する。import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core'; import { provideCssVarNamespacing } from '@angular/platform-browser'; // ADD export const appConfig: ApplicationConfig = { providers: [ prov…