Repository navigation
fix: substitute Angular 22.1 CSS custom property namespace placeholder - #182
Merged
Merged
Conversation
Angular 22.1 compiles custom properties in component styles and [style.--x] bindings to `--%NS%name` / `var(--%NS%name)` and expects the renderer to replace `%NS%`. The NativeScript renderer passed the placeholder through, so: - `var(--x)` in a component never resolved against `--x` declared in app.css/app.scss. - Declaring any custom property in a component stylesheet made the NativeScript CSS parser reject `--%NS%x:` and silently drop the whole stylesheet. Strip the placeholder (Angular's default empty namespace) for emulated and unencapsulated component styles and for setStyle/removeStyle.
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configuration
You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
commit: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Angular 22.1.0 namespaces CSS custom properties at compile time (
namespaceCssVariablesin@angular/compiler). In component styles, under every encapsulation mode, and in[style.--x]bindings:--brand: redbecomes--%NS%brand: redvar(--brand)becomesvar(--%NS%brand)@angular/platform-browserthen replaces%NS%at runtime. The default is an empty namespace;provideCssVarNamespacing()sets a real one. Our renderer only replaced%COMP%, so the placeholder reached NativeScript core unchanged. In apps on Angular 22.1+, this causes two failures:var(--x)in a component never resolves. The common pattern is declaring theme variables globally (.ns-root { --brand: … }inapp.scss) and usingvar(--brand)in component styles. That breaks because the component looks up--%NS%brand.@import/@useof a shared file, becomes--%NS%x: …. The css-tree parser rejects that withParse error: Colon is expected, andCSSSource.parseswallows the error (it's only logged underTrace), so every rule in that stylesheet is lost. Ordinary rules like.action-bar { background-color: #f00 }stop applying too.Fix
Strip
%NS%to match Angular's default empty namespace:EmulatedRenderer.addStylesViewEncapsulation.Nonebranch ofNativeScriptRendererFactory.createRenderersetStyle/removeStylefor names starting with--On Angular < 22.1 the placeholder never appears, so nothing changes there.
provideCssVarNamespacing()isn't honored. TheCSS_VAR_NAMESPACEtoken only exists in@angular/platform-browser22.1+, and this repo builds against 22.0.8. Globalapp.cssdoesn't go through Angular's compiler, so an empty namespace is the only choice that lets component styles see globally declared variables.Tests
css-variables.spec.tsfeeds component styles in the namespaced form Angular 22.1 emits, so it doesn't depend on the compiler version:ViewEncapsulation.Nonecomponent: declare and use a custom propertyRenderer2.setStyle/removeStylewith a--%NS%nameResults with
ns test ios, iOS 26.5 simulator:Expected null to be '#ff0000', …)Also checked end to end in a NativeScript Angular app on Angular 22.1.8 (iOS 27 simulator), using a locally built package. Cases tested: global declaration with
var()in a component,::ng-deep .ns-root { --x }, declaring and using inside one component, and a component that@importsapp.scssand sets a plainbackground-color. All failed before the fix. After it, all apply and there are noCss styling failedtrace errors.Workaround for affected apps until released
Use Angular's escape prefix in component styles:
var(--global--brand)compiles tovar(--brand). Keep declarations out of component stylesheets.