22.2.0 migration produces invalid SCSS for nested scrollbar-theme() calls

[ChronosSF]

Description

The update-22_2_0 migration (which removes the deprecated scrollbar-theme parameters $sb-size, $sb-thumb-min-height, etc.) produces syntactically invalid SCSS when the theme function is used as a nested argument inside another call, e.g. the documented @include scrollbar(scrollbar-theme(...)) pattern.

The migration drops the closing parenthesis of the enclosing call, so every affected file fails to compile.

Found while migrating the samples app to 22.2.0-rc.0: IgniteUI/igniteui-angular-samples#4031

Examples from that PR (projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.scss):

-    @include scrollbar(scrollbar-theme($sb-size: 6px));
+    @include scrollbar(scrollbar-theme();

-            @include scrollbar(scrollbar-theme($sb-size: 16px));
+            @include scrollbar(scrollbar-theme();

Root cause

In UpdateChanges.updateThemeProps() (projects/igniteui-angular/migrations/common/UpdateChanges.ts):

• L402 — the owner call is matched with a non-greedy ${change.owner}\([\s\S]+?\);, which is not paren-aware. For @include scrollbar(scrollbar-theme($sb-size: 6px)); the match is scrollbar-theme($sb-size: 6px)); — it swallows the ) that belongs to the outer scrollbar(...) mixin call.
• L414–415 — closing is taken as the trailing );, so body becomes $sb-size: 6px). The stray ) ends up riding on the last argument.
• L419–431 — when that last argument is one of the removed ones, it is dropped together with the stray ).
• L433 — the rebuilt string is scrollbar-theme( + remaining params + );, one ) short of the original.

Reproduction of the exact logic:

Input	Output
@include scrollbar(scrollbar-theme($sb-size: 6px));	@include scrollbar(scrollbar-theme(); ❌
@include scrollbar(scrollbar-theme($thumb-bg: red, $sb-size: 6px));	@include scrollbar(scrollbar-theme($thumb-bg: red); ❌
@include scrollbar(scrollbar-theme($sb-size: 6px, $thumb-bg: red));	@include scrollbar(scrollbar-theme($thumb-bg: red)); ✔
$t: scrollbar-theme($sb-size: 6px);	$t: scrollbar-theme(); ✔

So the corruption happens whenever the theme call is nested inside another call and the last argument (or all arguments) get removed. Because update-22_2_0 removes the entire $sb-* set, practically every @include scrollbar(scrollbar-theme($sb-...)) usage is broken.

This is generic UpdateChanges behavior, not specific to scrollbar-theme — any future type: "property" / remove: true theme change hits it. It also affects the replaceWith path, where the renamed last argument would keep the stray ) and then get a second one appended.

Framework

Angular

Angular Version

22.0.0

Ignite UI for Angular Version

22.2.0-rc.0 (migration shipped in update-22_2_0)

Component / Area

Schematics / Migrations (Theming / Styles)

Browser

N/A — build-time SCSS compilation failure

Operating System

Windows, macOS, Linux

Steps to Reproduce

1. In an app on igniteui-angular 22.1.0, add a stylesheet with the documented nested usage:

   @use 'igniteui-angular/theming' as *;
   
   .selection-area {
       @include scrollbar(scrollbar-theme($sb-size: 6px));
   }

2. Run ng update igniteui-angular@22.2.0.
3. Inspect the stylesheet / run ng build.

Actual Result

The file is rewritten to invalid SCSS and the build fails:

.selection-area {
    @include scrollbar(scrollbar-theme();
}

Expected Result

The removed parameters are stripped while the surrounding call stays balanced:

.selection-area {
    @include scrollbar(scrollbar-theme());
}

Suggested fix

Make updateThemeProps paren-aware: locate change.owner( and scan forward counting brackets (and skipping strings/comments) to find that call's own matching ), instead of relying on the [\s\S]+?\); regex and the \s*\);$ closing match. Worth adding specs for:

• theme function nested in a mixin include (@include scrollbar(scrollbar-theme(...))),
• removal of the last argument,
• removal of all arguments,
• a nested theme call not terminated by ; on the same statement.

Attachments

Diff of the affected files in the samples repo: https://github.com/IgniteUI/igniteui-angular-samples/pull/4031/files