igniteui-angular 22.2.0-rc.0 → 22.2.0-rc.2

package/migrations/common/UpdateChanges.spec.js

@@ -567,6 +567,835 @@ $var3: igx-comp-theme(
         expect(appTree.readContent('test.component.scss')).toEqual(`igx-theme-func($replaced: 10px, $old-prop: 3, $prop3: 2);`);
         done();
     });
+    it('should keep the brackets balanced for nested theme functions', done => {
+        const themeChangesJson = {
+            changes: [
+                {
+                    name: '$remove-me', remove: true,
+                    owner: 'igx-theme-func',
+                    type: schema_1.ThemeType.Property
+                },
+                {
+                    name: '$replace-me', replaceWith: '$replaced',
+                    owner: 'igx-theme-func',
+                    type: schema_1.ThemeType.Property
+                }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        appTree.create('styles.scss', `@include igx-mixin(igx-theme-func($remove-me: 6px));
+@include igx-mixin(igx-theme-func($prop1: red, $remove-me: 6px));
+@include igx-mixin(igx-theme-func($remove-me: 6px, $prop1: red));
+@include igx-mixin(igx-theme-func($replace-me: 6px));
+$var: igx-theme-func($content: "not a ( bracket", $remove-me: 6px);
+$var2: igx-theme-func($image: url(https://example.com/a.png), $remove-me: 6px);
+$var3: igx-theme-func(
+    $remove-me: 6px, // not a ) bracket
+    $prop1: red
+);`);
+        const update = new UnitUpdateChanges(__dirname, appTree);
+        update.applyChanges();
+        expect(appTree.readContent('styles.scss')).toEqual(`@include igx-mixin(igx-theme-func());
+@include igx-mixin(igx-theme-func($prop1: red));
+@include igx-mixin(igx-theme-func( $prop1: red));
+@include igx-mixin(igx-theme-func($replaced: 6px));
+$var: igx-theme-func($content: "not a ( bracket");
+$var2: igx-theme-func($image: url(https://example.com/a.png));
+$var3: igx-theme-func( // not a ) bracket
+    $prop1: red
+);`);
+        done();
+    });
+    it('should not treat a theme function mentioned in a comment or a string as a call', done => {
+        const themeChangesJson = {
+            changes: [
+                {
+                    name: '$remove-me', remove: true,
+                    owner: 'igx-theme-func',
+                    type: schema_1.ThemeType.Property
+                }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        appTree.create('styles.scss', `// igx-theme-func($remove-me: 1px) is gone, use the grid's own borders
+/* igx-theme-func($remove-me: 2px */
+$doc: "igx-theme-func($remove-me: 3px";
+$var: igx-theme-func($remove-me: 4px, $prop1: red);`);
+        const update = new UnitUpdateChanges(__dirname, appTree);
+        update.applyChanges();
+        expect(appTree.readContent('styles.scss')).toEqual(`// igx-theme-func($remove-me: 1px) is gone, use the grid's own borders
+/* igx-theme-func($remove-me: 2px */
+$doc: "igx-theme-func($remove-me: 3px";
+$var: igx-theme-func( $prop1: red);`);
+        done();
+    });
+    it('should remove a theme property that has a comment in front of it and keep the comment', done => {
+        const themeChangesJson = {
+            changes: [
+                {
+                    name: '$remove-me', remove: true,
+                    owner: 'igx-theme-func',
+                    type: schema_1.ThemeType.Property
+                }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        appTree.create('styles.scss', `$var1: igx-theme-func(
+    $prop1: red, // brand color
+    $remove-me: 6px
+);
+$var2: igx-theme-func(
+    $prop1: red, // brand color
+    $remove-me: 6px,
+    $prop2: blue
+);
+$var3: igx-theme-func($prop1: red, /* legacy */ $remove-me: 6px);
+$var4: igx-theme-func($prop1: red, // legacy
+    $remove-me: 6px, $prop2: blue);
+$var5: igx-theme-func($prop1: red, // legacy
+    $remove-me: 6px);`);
+        const update = new UnitUpdateChanges(__dirname, appTree);
+        update.applyChanges();
+        expect(appTree.readContent('styles.scss')).toEqual(`$var1: igx-theme-func(
+    $prop1: red // brand color
+);
+$var2: igx-theme-func(
+    $prop1: red, // brand color
+    $prop2: blue
+);
+$var3: igx-theme-func($prop1: red /* legacy */);
+$var4: igx-theme-func($prop1: red, // legacy
+ $prop2: blue);
+$var5: igx-theme-func($prop1: red // legacy
+);`);
+        done();
+    });
+    it('should update a theme property that has whitespace before its colon', done => {
+        const themeChangesJson = {
+            changes: [
+                {
+                    name: '$remove-me', remove: true,
+                    owner: 'igx-theme-func',
+                    type: schema_1.ThemeType.Property
+                },
+                {
+                    name: '$replace-me', replaceWith: '$replaced',
+                    owner: 'igx-theme-func',
+                    type: schema_1.ThemeType.Property
+                }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        appTree.create('styles.scss', `$var1: igx-theme-func($prop1 : red, $remove-me : 6px);
+$var2: igx-theme-func(
+    $prop1     : red,
+    $remove-me : 6px
+);
+$var3: igx-theme-func($replace-me  :  6px);`);
+        const update = new UnitUpdateChanges(__dirname, appTree);
+        update.applyChanges();
+        expect(appTree.readContent('styles.scss')).toEqual(`$var1: igx-theme-func($prop1 : red);
+$var2: igx-theme-func(
+    $prop1     : red
+);
+$var3: igx-theme-func($replaced  :  6px);`);
+        done();
+    });
+    it('should not update a function or mixin the stylesheet declares itself', done => {
+        const themeChangesJson = {
+            changes: [
+                {
+                    name: '$remove-me', remove: true,
+                    owner: 'igx-theme-func',
+                    type: schema_1.ThemeType.Property
+                }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        const userCode = `@use "igniteui-angular/theming" as igx;
+@mixin app-igx-theme-func($remove-me: 1px) {
+    border-width: $remove-me;
+}
+@include app-igx-theme-func($remove-me: 2px);
+@function my_igx-theme-func($remove-me: 1px) {
+    @return $remove-me;
+}
+$var1: my_igx-theme-func($remove-me: 2px);
+`;
+        appTree.create('styles.scss', userCode + `$var2: igx.igx-theme-func($remove-me: 2px, $prop1: red);`);
+        const update = new UnitUpdateChanges(__dirname, appTree);
+        update.applyChanges();
+        // a namespaced call to the library function is still migrated
+        expect(appTree.readContent('styles.scss')).toEqual(userCode + `$var2: igx.igx-theme-func( $prop1: red);`);
+        done();
+    });
+    it('should not take a declaration in a comment or a string for one the stylesheet makes', done => {
+        const themeChangesJson = {
+            changes: [
+                {
+                    name: '$remove-me', remove: true,
+                    owner: 'igx-theme-func',
+                    type: schema_1.ThemeType.Property
+                }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        appTree.create('styles.scss', `// @function igx-theme-func($remove-me: 1px) {}
+$var1: igx-theme-func($prop1: red, $remove-me: 6px);
+$doc: "@mixin igx-theme-func($remove-me: 1px)";
+$var2: igx-theme-func($remove-me: 6px);`);
+        const update = new UnitUpdateChanges(__dirname, appTree);
+        update.applyChanges();
+        expect(appTree.readContent('styles.scss')).toEqual(`// @function igx-theme-func($remove-me: 1px) {}
+$var1: igx-theme-func($prop1: red);
+$doc: "@mixin igx-theme-func($remove-me: 1px)";
+$var2: igx-theme-func();`);
+        done();
+    });
+    it('should update a namespaced Ignite UI call although the stylesheet declares the same name', done => {
+        const themeChangesJson = {
+            changes: [
+                {
+                    name: '$remove-me', remove: true,
+                    owner: 'igx-theme-func',
+                    type: schema_1.ThemeType.Property
+                }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        // the two are separate members under Sass's namespace rules
+        appTree.create('styles.scss', `@use "igniteui-angular/theming" as igx;
+@mixin igx-theme-func($remove-me: 1px) {
+    border-width: $remove-me;
+}
+@include igx-theme-func($remove-me: 2px);
+$var: igx.igx-theme-func($remove-me: 6px);`);
+        const update = new UnitUpdateChanges(__dirname, appTree);
+        update.applyChanges();
+        expect(appTree.readContent('styles.scss')).toEqual(`@use "igniteui-angular/theming" as igx;
+@mixin igx-theme-func($remove-me: 1px) {
+    border-width: $remove-me;
+}
+@include igx-theme-func($remove-me: 2px);
+$var: igx.igx-theme-func();`);
+        done();
+    });
+    it('should tell a mixin the stylesheet declares from a function of the same name', done => {
+        const themeChangesJson = {
+            changes: [
+                {
+                    name: '$remove-me', remove: true,
+                    owner: 'igx-theme-func',
+                    type: schema_1.ThemeType.Property
+                }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        // the mixin does not shadow the library's function, and the function does not shadow a mixin
+        appTree.create('styles.scss', `@mixin igx-theme-func($remove-me: 1px) {
+    border-width: $remove-me;
+}
+@function app-igx-theme-func($remove-me: 1px) {
+    @return $remove-me;
+}
+@include igx-theme-func($remove-me: 2px);
+$var1: igx-theme-func($remove-me: 6px);
+$var2: app-igx-theme-func($remove-me: 6px);
+@include app-igx-theme-func($remove-me: 2px);`);
+        const update = new UnitUpdateChanges(__dirname, appTree);
+        update.applyChanges();
+        expect(appTree.readContent('styles.scss')).toEqual(`@mixin igx-theme-func($remove-me: 1px) {
+    border-width: $remove-me;
+}
+@function app-igx-theme-func($remove-me: 1px) {
+    @return $remove-me;
+}
+@include igx-theme-func($remove-me: 2px);
+$var1: igx-theme-func();
+$var2: app-igx-theme-func($remove-me: 6px);
+@include app-igx-theme-func();`);
+        done();
+    });
+    it('should recognize equivalent underscore and hyphen names for local Sass members', () => {
+        const themeChangesJson = {
+            changes: [
+                { name: '$remove-me', remove: true, owner: 'theme', type: schema_1.ThemeType.Property }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        appTree.create('styles.scss', `@mixin app_theme($remove-me: 1px) { border-width: $remove-me; }
+@mixin reverse-theme($remove-me: 1px) { border-width: $remove-me; }
+@function custom_theme($remove-me: 1px) { @return $remove-me; }
+@function reverse-function-theme($remove-me: 1px) { @return $remove-me; }
+.calls {
+    @include app-theme($remove-me: 2px);
+    @include reverse_theme($remove-me: 2px);
+    $local: custom-theme($remove-me: 2px);
+    $reverse: reverse_function_theme($remove-me: 2px);
+    $library: app-theme($remove-me: 2px);
+    @include custom-theme($remove-me: 2px);
+    @include igx.app-theme($remove-me: 2px);
+}`);
+        new UnitUpdateChanges(__dirname, appTree).applyChanges();
+        expect(appTree.readContent('styles.scss')).toEqual(`@mixin app_theme($remove-me: 1px) { border-width: $remove-me; }
+@mixin reverse-theme($remove-me: 1px) { border-width: $remove-me; }
+@function custom_theme($remove-me: 1px) { @return $remove-me; }
+@function reverse-function-theme($remove-me: 1px) { @return $remove-me; }
+.calls {
+    @include app-theme($remove-me: 2px);
+    @include reverse_theme($remove-me: 2px);
+    $local: custom-theme($remove-me: 2px);
+    $reverse: reverse_function_theme($remove-me: 2px);
+    $library: app-theme();
+    @include custom-theme();
+    @include igx.app-theme();
+}`);
+    });
+    it('should recognize indented Sass shorthand declarations and includes within their scope', () => {
+        const themeChangesJson = {
+            changes: [
+                { name: '$remove-me', remove: true, owner: 'theme', type: schema_1.ThemeType.Property }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        const source = `= app-grid-summary-theme($remove-me: 1px)
+    border-width: $remove-me
+@mixin long_theme($remove-me: 1px)
+    border-width: $remove-me
+@function function-theme($remove-me: 1px)
+    @return $remove-me
+.calls
+    +app-grid-summary-theme($remove-me: 2px)
+    @include app-grid-summary-theme($remove-me: 2px)
+    +long-theme($remove-me: 2px)
+    +function-theme($remove-me: 2px)
+    +igx.app-grid-summary-theme($remove-me: 2px)
+    $library: app-grid-summary-theme($remove-me: 2px)
+    $local: function-theme($remove-me: 2px)
+@media screen
+    =scoped-theme($remove-me: 1px)
+        border-width: $remove-me
+    .local
+        +scoped-theme($remove-me: 2px)
+.outside
+    +scoped-theme($remove-me: 2px)`;
+        const expected = `= app-grid-summary-theme($remove-me: 1px)
+    border-width: $remove-me
+@mixin long_theme($remove-me: 1px)
+    border-width: $remove-me
+@function function-theme($remove-me: 1px)
+    @return $remove-me
+.calls
+    +app-grid-summary-theme($remove-me: 2px)
+    @include app-grid-summary-theme($remove-me: 2px)
+    +long-theme($remove-me: 2px)
+    +function-theme()
+    +igx.app-grid-summary-theme()
+    $library: app-grid-summary-theme()
+    $local: function-theme($remove-me: 2px)
+@media screen
+    =scoped-theme($remove-me: 1px)
+        border-width: $remove-me
+    .local
+        +scoped-theme($remove-me: 2px)
+.outside
+    +scoped-theme()`;
+        appTree.create('styles.sass', source);
+        appTree.create('windows.sass', source.replace(/\n/g, '\r\n'));
+        new UnitUpdateChanges(__dirname, appTree).applyChanges();
+        expect(appTree.readContent('styles.sass')).toEqual(expected);
+        expect(appTree.readContent('windows.sass')).toEqual(expected.replace(/\n/g, '\r\n'));
+    });
+    it('should distinguish indented Sass shorthand from operators in function expressions', () => {
+        const themeChangesJson = {
+            changes: [
+                { name: '$remove-me', remove: true, owner: 'theme', type: schema_1.ThemeType.Property }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        appTree.create('styles.sass', `=app-theme($remove-me: 1px)
+    border-width: $remove-me
+@function function-theme($remove-me: 1px)
+    @return $remove-me
+$direct: +app-theme($remove-me: 2px)
+$equal: 1px == app-theme($remove-me: 2px)
+$list: (
+    +app-theme($remove-me: 2px),
+    +function-theme($remove-me: 2px)
+)
+.calls
+    +app-theme($remove-me: 2px)
+    +function-theme($remove-me: 2px)`);
+        new UnitUpdateChanges(__dirname, appTree).applyChanges();
+        expect(appTree.readContent('styles.sass')).toEqual(`=app-theme($remove-me: 1px)
+    border-width: $remove-me
+@function function-theme($remove-me: 1px)
+    @return $remove-me
+$direct: +app-theme()
+$equal: 1px == app-theme()
+$list: (
+    +app-theme(),
+    +function-theme($remove-me: 2px)
+)
+.calls
+    +app-theme($remove-me: 2px)
+    +function-theme()`);
+    });
+    it('should classify mixin calls through comments without changing the comments', () => {
+        const themeChangesJson = {
+            changes: [
+                { name: '$remove-me', remove: true, owner: 'theme', type: schema_1.ThemeType.Property }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        const source = `@function theme($remove-me: false) { @return $remove-me; }
+@mixin app-theme($remove-me: 1px) { border-width: $remove-me; }
+@include /* brand */ theme($remove-me: true);
+@include // brand
+    theme($remove-me: true);
+@include /* keep */ app-theme($remove-me: 2px);
+@include // keep
+    app-theme($remove-me: 2px);
+$value: theme($remove-me: true);`;
+        const expected = `@function theme($remove-me: false) { @return $remove-me; }
+@mixin app-theme($remove-me: 1px) { border-width: $remove-me; }
+@include /* brand */ theme();
+@include // brand
+    theme();
+@include /* keep */ app-theme($remove-me: 2px);
+@include // keep
+    app-theme($remove-me: 2px);
+$value: theme($remove-me: true);`;
+        for (const eol of ['\n', '\r\n']) {
+            const file = eol === '\n' ? 'styles.scss' : 'windows.scss';
+            appTree.create(file, source.replace(/\n/g, eol));
+        }
+        new UnitUpdateChanges(__dirname, appTree).applyChanges();
+        expect(appTree.readContent('styles.scss')).toEqual(expected);
+        expect(appTree.readContent('windows.scss')).toEqual(expected.replace(/\n/g, '\r\n'));
+    });
+    it('should migrate immediate calls before local Sass declarations become available', () => {
+        const themeChangesJson = {
+            changes: [
+                { name: '$border-width', remove: true, owner: 'grid-summary-theme', type: schema_1.ThemeType.Property }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        appTree.create('styles.scss', `$before: grid-summary-theme($border-width: 2px);
+.before { @include grid-summary-theme($border-width: 2px); }
+@function grid_summary_theme($border-width: 1px) { @return $border-width; }
+@mixin grid-summary-theme($border-width: 1px) { border-width: $border-width; }
+$after: grid-summary-theme($border-width: 2px);
+.after { @include grid-summary-theme($border-width: 2px); }
+@function grid-summary-theme($border-width: 3px) { @return $border-width; }
+@mixin grid_summary_theme($border-width: 3px) { border-width: $border-width; }
+@media screen {
+    $before: app-grid-summary-theme($border-width: 2px);
+    @function app-grid-summary-theme($border-width: 1px) { @return $border-width; }
+    $after: app-grid-summary-theme($border-width: 2px);
+}
+$outside: app-grid-summary-theme($border-width: 2px);`);
+        new UnitUpdateChanges(__dirname, appTree).applyChanges();
+        expect(appTree.readContent('styles.scss')).toEqual(`$before: grid-summary-theme();
+.before { @include grid-summary-theme(); }
+@function grid_summary_theme($border-width: 1px) { @return $border-width; }
+@mixin grid-summary-theme($border-width: 1px) { border-width: $border-width; }
+$after: grid-summary-theme($border-width: 2px);
+.after { @include grid-summary-theme($border-width: 2px); }
+@function grid-summary-theme($border-width: 3px) { @return $border-width; }
+@mixin grid_summary_theme($border-width: 3px) { border-width: $border-width; }
+@media screen {
+    $before: app-grid-summary-theme();
+    @function app-grid-summary-theme($border-width: 1px) { @return $border-width; }
+    $after: app-grid-summary-theme($border-width: 2px);
+}
+$outside: app-grid-summary-theme();`);
+    });
+    it('should respect declaration order for immediate indented Sass calls', () => {
+        const themeChangesJson = {
+            changes: [
+                { name: '$border-width', remove: true, owner: 'grid-summary-theme', type: schema_1.ThemeType.Property }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        const source = `$before: grid-summary-theme($border-width: 2px)
+.before
+    +grid-summary-theme($border-width: 2px)
+@function grid_summary_theme($border-width: 1px)
+    @return $border-width
+=grid-summary-theme($border-width: 1px)
+    border-width: $border-width
+$after: grid-summary-theme($border-width: 2px)
+.after
+    @include grid-summary-theme($border-width: 2px)
+@media screen
+    $before: app-grid-summary-theme($border-width: 2px)
+    @function app-grid-summary-theme($border-width: 1px)
+        @return $border-width
+    $after: app-grid-summary-theme($border-width: 2px)
+$outside: app-grid-summary-theme($border-width: 2px)`;
+        const expected = `$before: grid-summary-theme()
+.before
+    +grid-summary-theme()
+@function grid_summary_theme($border-width: 1px)
+    @return $border-width
+=grid-summary-theme($border-width: 1px)
+    border-width: $border-width
+$after: grid-summary-theme($border-width: 2px)
+.after
+    @include grid-summary-theme($border-width: 2px)
+@media screen
+    $before: app-grid-summary-theme()
+    @function app-grid-summary-theme($border-width: 1px)
+        @return $border-width
+    $after: app-grid-summary-theme($border-width: 2px)
+$outside: app-grid-summary-theme()`;
+        appTree.create('styles.sass', source);
+        appTree.create('windows.sass', source.replace(/\n/g, '\r\n'));
+        new UnitUpdateChanges(__dirname, appTree).applyChanges();
+        expect(appTree.readContent('styles.sass')).toEqual(expected);
+        expect(appTree.readContent('windows.sass')).toEqual(expected.replace(/\n/g, '\r\n'));
+    });
+    it('should preserve forward references in Sass bodies and default arguments evaluated later', () => {
+        const themeChangesJson = {
+            changes: [
+                { name: '$border-width', remove: true, owner: 'grid-summary-theme', type: schema_1.ThemeType.Property }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        const scss = `@function wrapper($value: grid-summary-theme($border-width: 2px)) {
+    @return grid-summary-theme($border-width: $value);
+}
+@mixin wrapper($value: grid-summary-theme($border-width: 2px)) {
+    @include grid-summary-theme($border-width: $value);
+}
+@function grid-summary-theme($border-width: 1px) { @return $border-width; }
+@mixin grid-summary-theme($border-width: 1px) { border-width: $border-width; }
+.calls { @include wrapper(); width: wrapper(); }`;
+        const sass = `@function wrapper($value: grid-summary-theme($border-width: 2px))
+    @return grid-summary-theme($border-width: $value)
+=wrapper($value: grid-summary-theme($border-width: 2px))
+    +grid-summary-theme($border-width: $value)
+=empty($value: grid-summary-theme($border-width: 2px))
+@function grid-summary-theme($border-width: 1px)
+    @return $border-width
+=grid-summary-theme($border-width: 1px)
+    border-width: $border-width
+.calls
+    +wrapper()
+    +empty()
+    width: wrapper()`;
+        appTree.create('styles.scss', scss);
+        appTree.create('styles.sass', sass);
+        new UnitUpdateChanges(__dirname, appTree).applyChanges();
+        expect(appTree.readContent('styles.scss')).toEqual(scss);
+        expect(appTree.readContent('styles.sass')).toEqual(sass);
+    });
+    it('should limit local theme declarations to their enclosing Sass block', () => {
+        const themeChangesJson = {
+            changes: [
+                { name: '$remove-me', remove: true, owner: 'theme', type: schema_1.ThemeType.Property },
+                { name: '$old', replaceWith: '$new', owner: 'theme', type: schema_1.ThemeType.Property }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        appTree.create('styles.scss', `$before: theme($remove-me: 2px, $old: red);
+@media screen {
+    /* } @function theme() { */
+    $text: "}";
+    @function theme($remove-me: 1px, $old: red) { @return $old; }
+    @mixin theme($remove-me: 1px, $old: red) { color: $old; }
+    $local: theme($remove-me: 2px, $old: red);
+    .nested { @include theme($remove-me: 2px, $old: red); }
+}
+@media print {
+    $sibling: theme($remove-me: 2px, $old: red);
+    @include theme($remove-me: 2px, $old: red);
+}
+$after: theme($remove-me: 2px, $old: red);`);
+        new UnitUpdateChanges(__dirname, appTree).applyChanges();
+        expect(appTree.readContent('styles.scss')).toEqual(`$before: theme( $new: red);
+@media screen {
+    /* } @function theme() { */
+    $text: "}";
+    @function theme($remove-me: 1px, $old: red) { @return $old; }
+    @mixin theme($remove-me: 1px, $old: red) { color: $old; }
+    $local: theme($remove-me: 2px, $old: red);
+    .nested { @include theme($remove-me: 2px, $old: red); }
+}
+@media print {
+    $sibling: theme( $new: red);
+    @include theme( $new: red);
+}
+$after: theme( $new: red);`);
+    });
+    it('should limit local theme declarations to their enclosing indented Sass block', () => {
+        const themeChangesJson = {
+            changes: [
+                { name: '$remove-me', remove: true, owner: 'theme', type: schema_1.ThemeType.Property }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        appTree.create('styles.sass', `@media screen
+    /* local function */
+    @function theme($remove-me: 1px)
+        @return red
+    @mixin theme($remove-me: 1px)
+        color: red
+    $local: theme($remove-me: 2px)
+    .nested
+        @include theme($remove-me: 2px)
+@media print
+    $sibling: theme($remove-me: 2px)
+$after: theme(
+    $remove-me: 2px
+)
+@include theme($remove-me: 2px)`);
+        new UnitUpdateChanges(__dirname, appTree).applyChanges();
+        expect(appTree.readContent('styles.sass')).toEqual(`@media screen
+    /* local function */
+    @function theme($remove-me: 1px)
+        @return red
+    @mixin theme($remove-me: 1px)
+        color: red
+    $local: theme($remove-me: 2px)
+    .nested
+        @include theme($remove-me: 2px)
+@media print
+    $sibling: theme()
+$after: theme(
+)
+@include theme()`);
+    });
+    it('should update a call another stylesheet of the app could have declared', done => {
+        const themeChangesJson = {
+            changes: [
+                {
+                    name: '$remove-me', remove: true,
+                    owner: 'igx-theme-func',
+                    type: schema_1.ThemeType.Property
+                }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        // a stylesheet of the app can forward the library's own members, and can hide or rename
+        // what it declares, so what another one holds says nothing about this call
+        appTree.create('_themes.scss', `@forward "igniteui-angular/theming";`);
+        appTree.create('_mixins.scss', `@function igx-theme-func($remove-me) {\n    @return $remove-me;\n}`);
+        appTree.create('styles.scss', `@use "themes" as theme;
+@use "mixins" as custom;
+$var1: theme.igx-theme-func($remove-me: 6px);
+$var2: igx-theme-func($remove-me: 6px);`);
+        const update = new UnitUpdateChanges(__dirname, appTree);
+        update.applyChanges();
+        expect(appTree.readContent('styles.scss')).toEqual(`@use "themes" as theme;
+@use "mixins" as custom;
+$var1: theme.igx-theme-func();
+$var2: igx-theme-func();`);
+        done();
+    });
+    it('should not let another stylesheet of the app block a migration', done => {
+        const themeChangesJson = {
+            changes: [
+                {
+                    name: '$remove-me', remove: true,
+                    owner: 'igx-theme-func',
+                    type: schema_1.ThemeType.Property
+                }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        const unrelated = `@mixin igx-theme-func($remove-me: 1px) {\n    border-width: $remove-me;\n}`;
+        appTree.create('unrelated.scss', unrelated);
+        appTree.create('styles.scss', `$var: igx-theme-func($remove-me: 6px);`);
+        const update = new UnitUpdateChanges(__dirname, appTree);
+        update.applyChanges();
+        expect(appTree.readContent('unrelated.scss')).toEqual(unrelated);
+        expect(appTree.readContent('styles.scss')).toEqual(`$var: igx-theme-func();`);
+        done();
+    });
+    it('should update a theme function whose name the owner is only part of', done => {
+        // migrations rely on this: `circular-theme` addresses `progress-circular-theme`,
+        // and `theme` covers every `*-theme` mixin
+        const themeChangesJson = {
+            changes: [
+                {
+                    name: '$progress-circle-color', replaceWith: '$fill-color-default',
+                    owner: 'circular-theme',
+                    type: schema_1.ThemeType.Property
+                },
+                {
+                    name: '$wc', remove: true,
+                    owner: 'theme',
+                    type: schema_1.ThemeType.Property
+                }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        appTree.create('styles.scss', `$var1: progress-circular-theme($progress-circle-color: red);
+@include theme($palette: $p, $wc: true);
+$var2: light-theme($palette: $p, $wc: true);`);
+        const update = new UnitUpdateChanges(__dirname, appTree);
+        update.applyChanges();
+        expect(appTree.readContent('styles.scss')).toEqual(`$var1: progress-circular-theme($fill-color-default: red);
+@include theme($palette: $p);
+$var2: light-theme($palette: $p);`);
+        done();
+    });
+    it('should rename a theme property behind a comment that mentions it', done => {
+        const themeChangesJson = {
+            changes: [
+                {
+                    name: '$replace-me', replaceWith: '$replaced',
+                    owner: 'igx-theme-func',
+                    type: schema_1.ThemeType.Property
+                }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        appTree.create('styles.scss', `$var1: igx-theme-func(/* $replace-me docs */ $replace-me: 6px);
+$var2: igx-theme-func(
+    $prop1: red,
+    // $replace-me: keep in sync with the brand color
+    $replace-me: 6px
+);`);
+        const update = new UnitUpdateChanges(__dirname, appTree);
+        update.applyChanges();
+        expect(appTree.readContent('styles.scss')).toEqual(`$var1: igx-theme-func(/* $replace-me docs */ $replaced: 6px);
+$var2: igx-theme-func(
+    $prop1: red,
+    // $replace-me: keep in sync with the brand color
+    $replaced: 6px
+);`);
+        done();
+    });
+    it('should remove rather than rename a theme property the call already passes under its new name', done => {
+        const themeChangesJson = {
+            changes: [
+                {
+                    name: '$replace-me', replaceWith: '$replaced',
+                    owner: 'igx-theme-func',
+                    type: schema_1.ThemeType.Property
+                }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        appTree.create('styles.scss', `$var1: igx-theme-func($replaced: red, $replace-me: 6px);
+$var2: igx-theme-func($replace-me: 6px, $replaced: red);
+$var3: igx-theme-func($not-replaced: red, $replace-me: 6px);
+$var4: igx-theme-func($prop1: igx-inner-func($replaced: red), $replace-me: 6px);`);
+        const update = new UnitUpdateChanges(__dirname, appTree);
+        update.applyChanges();
+        expect(appTree.readContent('styles.scss')).toEqual(`$var1: igx-theme-func($replaced: red);
+$var2: igx-theme-func( $replaced: red);
+$var3: igx-theme-func($not-replaced: red, $replaced: 6px);
+$var4: igx-theme-func($prop1: igx-inner-func($replaced: red), $replaced: 6px);`);
+        done();
+    });
+    it('should keep the line endings of the stylesheet when carrying a comment over', done => {
+        const themeChangesJson = {
+            changes: [
+                {
+                    name: '$remove-me', remove: true,
+                    owner: 'igx-theme-func',
+                    type: schema_1.ThemeType.Property
+                }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        appTree.create('styles.scss', `$var: igx-theme-func($prop1: red, // brand color\r\n    $remove-me: 6px, $prop2: blue);`);
+        const update = new UnitUpdateChanges(__dirname, appTree);
+        update.applyChanges();
+        expect(appTree.readContent('styles.scss'))
+            .toEqual(`$var: igx-theme-func($prop1: red, // brand color\r\n $prop2: blue);`);
+        done();
+    });
+    it('should update theme properties in stylesheets outside sourceRoot', done => {
+        appTree = (0, setup_spec_1.setupTestTree)({
+            projects: {
+                testProj: {
+                    projectType: 'application',
+                    root: '',
+                    sourceRoot: 'src',
+                    architect: { build: { options: {} } }
+                }
+            },
+            schematics: {
+                '@schematics/angular:component': {
+                    prefix: 'app'
+                }
+            }
+        });
+        const themeChangesJson = {
+            changes: [
+                {
+                    name: '$remove-me', remove: true,
+                    owner: 'igx-theme-func',
+                    type: schema_1.ThemeType.Property
+                }
+            ]
+        };
+        const jsonPath = path.join(__dirname, 'changes', 'theme-changes.json');
+        spyOn(fs, 'existsSync').and.callFake((filePath) => filePath === jsonPath);
+        spyOn(fs, 'readFileSync').and.callFake(() => JSON.stringify(themeChangesJson));
+        const call = `$var: igx-theme-func($remove-me: 1px);`;
+        const migrated = `$var: igx-theme-func();`;
+        const updated = ['src/app/app.scss', 'src/app/distribution/_summary.scss', 'styles/_theme.scss'];
+        const skipped = ['node_modules/some-lib/_lib.scss', 'dist/app/styles.scss'];
+        [...updated, ...skipped].forEach(file => appTree.create(file, call));
+        const update = new UnitUpdateChanges(__dirname, appTree);
+        update.applyChanges();
+        updated.forEach(file => expect(appTree.readContent(file)).withContext(file).toEqual(migrated));
+        // dependencies and build output are never touched
+        skipped.forEach(file => expect(appTree.readContent(file)).withContext(file).toEqual(call));
+        done();
+    });
     it('should replace imports', done => {
         const importsJson = {
             changes: [