CSS Variable Namespacing#68846
Conversation
6c27311 to
302644d
Compare
Adds logic to inject symbols into CSS variables for runtime namespacing. The runtime now replaces instances of `%NS%` with a namespacing variable, limiting reach of CSS variables to the current app. An opt-out syntax of a `--global` prefix allows users to avoid this behavior.
Using `--global-foo` is now prohibited. We suspect these cases will likely be typos of `--global--foo` in the future, so we blanket ban them and direct users to the expected syntax.
Adds support for namespacing css variables in style properties. Behaves as you'd expect following the implementation for stylesheets generally. This change also moves the error message into a util function since we now need to produce the same error in three places.
302644d to
e95f942
Compare
| * followed by a separator, such as 'my-app_'. | ||
| * @publicApi | ||
| */ | ||
| export function provideCssVarNamespacing(namespace: string): EnvironmentProviders { |
There was a problem hiding this comment.
Question for reviewer: I'm inclined to automatically add a _ suffic to the provided namespace if it's non-empty and doesn't terminate with a - or _. Any opinions? Might be nice to automatically add the separator.
| @Inject(CSS_VAR_NAMESPACE) @Optional() cssVarNamespace: string | null = null, | ||
| ) { | ||
| this.defaultRenderer = new DefaultDomRenderer2(eventManager, doc, ngZone, this.tracingService); | ||
| this.cssVarNamespace = cssVarNamespace ?? ''; |
There was a problem hiding this comment.
Question for reviewer: Rather than falling back to an empty string, I'm inclined to default to the APP_ID. If a user wants to disable prefixing app-wide, they could still provideCssVarNamespacing(''). Thoughts?
| // Validate that the whole `--foo` variable is passed in. | ||
| if (typeof ngDevMode === 'undefined' || ngDevMode) { | ||
| if (!name.startsWith('--')) { | ||
| throw new Error( |
There was a problem hiding this comment.
I think this should be a RuntimeError ?
| * | ||
| * @publicApi | ||
| */ | ||
| @Injectable({providedIn: 'root'}) |
There was a problem hiding this comment.
nit:
| @Injectable({providedIn: 'root'}) | |
| @Service() |
| * | ||
| * Typically set via {@link provideCssVarNamespacing}. | ||
| */ | ||
| export const CSS_VAR_NAMESPACE = new InjectionToken<string>('CSS_VAR_NAMESPACE'); |
There was a problem hiding this comment.
We can save a few bytes by doing
| export const CSS_VAR_NAMESPACE = new InjectionToken<string>('CSS_VAR_NAMESPACE'); | |
| export const CSS_VAR_NAMESPACE = new InjectionToken<string>(typeof ngDevMode !== 'undefined' && ngDevMode ? 'CSS_VAR_NAMESPACE' : ''); |
There was a problem hiding this comment.
Other suggestion, what if that token had a default factory ?
This was we would skip that optional: true part everywhere it is injected
| * This is useful when reading or setting CSS variables dynamically in JavaScript that | ||
| * were transformed by the compiler during the build. | ||
| * | ||
| * @publicApi |
There was a problem hiding this comment.
| * @publicApi | |
| * @publicApi 22.1 |
Superseds #67362. Primary differences are:
--globalprefix, e.g.--global--foo: blue[style.--foo]="'blue'"--global-fooThis 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
provideCssVarNamespacingin yourapp.config.ts. Typically you want to configure this with the same value asAPP_ID, but with an additional separator at the end (a-or_):This only namespaces styles in Angular components (the
stylesorstyleUrlsproperties 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
CssVarNamespacerwhich allows you to automatically namespace variables based on what is configured in the application.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 byprovideCssVarNamespacing('my-app_')(--%NS%foo->--my-app_foo).Internal bug: b/485672083
Closes #67362 via supersession.