igniteui-angular 22.1.4 → 22.2.0-rc.1

package/migrations/common/UpdateChanges.js

@@ -47,6 +47,7 @@ const tsUtils_1 = require("./tsUtils");
 const util_1 = require("./util");
 const project_service_container_1 = require("./project-service-container");
 const TSCONFIG_PATH = 'tsconfig.json';
+const URL_TOKEN = 'url(';
 var InputPropertyType;
 (function (InputPropertyType) {
     InputPropertyType["EVAL"] = "eval";
@@ -361,52 +362,187 @@ class UpdateChanges {
         }
     }
     updateThemeProps(entryPath) {
-        var _a;
         let fileContent = this.host.read(entryPath).toString();
         let overwrite = false;
         for (const change of this.themeChanges.changes) {
             if (change.type !== schema_1.ThemeType.Property) {
                 continue;
             }
-            if (fileContent.indexOf(change.owner) !== -1) {
-                /** owner-func:( * ); */
-                const searchPattern = String.raw `${change.owner}\([\s\S]+?\);`;
-                const matches = fileContent.match(new RegExp(searchPattern, 'g'));
-                if (!matches) {
+            if (fileContent.indexOf(change.owner) === -1) {
+                continue;
+            }
+            /** owner-func:( * ) */
+            const calls = this.findFunctionCalls(fileContent, change.owner);
+            // rewrite back to front so the collected indices stay valid
+            for (const call of calls.reverse()) {
+                const rawBody = fileContent.substring(call.bodyStart, call.bodyEnd);
+                if (rawBody.indexOf(change.name) === -1) {
                     continue;
                 }
-                for (const match of matches) {
-                    if (match.indexOf(change.name) !== -1) {
-                        const name = change.name.replace('$', '\\$');
-                        const replaceWith = (_a = change.replaceWith) === null || _a === void 0 ? void 0 : _a.replace('$', '\\$');
-                        const reg = new RegExp(String.raw `^\s*${name}:`);
-                        const existing = new RegExp(String.raw `${replaceWith}:`);
-                        const opening = `${change.owner}(`;
-                        const closing = /\s*\);$/.exec(match).pop();
-                        const body = match.substr(opening.length, match.length - opening.length - closing.length);
-                        let params = this.splitFunctionProps(body);
-                        params = params.reduce((arr, param) => {
-                            if (reg.test(param)) {
-                                const duplicate = !!replaceWith && arr.some(p => existing.test(p));
-                                if (!change.remove && !duplicate) {
-                                    arr.push(param.replace(change.name, change.replaceWith));
-                                }
-                            }
-                            else {
-                                arr.push(param);
-                            }
-                            return arr;
-                        }, []);
-                        fileContent = fileContent.replace(match, opening + params.join(',') + closing);
-                        overwrite = true;
+                const name = (0, util_1.escapeRegExp)(change.name);
+                const replaceWith = change.replaceWith ? (0, util_1.escapeRegExp)(change.replaceWith) : undefined;
+                const reg = new RegExp(String.raw `^\s*${name}:`);
+                const existing = new RegExp(String.raw `${replaceWith}:`);
+                // keep whatever sits in front of the closing bracket so the formatting is preserved
+                const trailing = /\s*$/.exec(rawBody).pop();
+                const body = rawBody.substring(0, rawBody.length - trailing.length);
+                let params = this.splitFunctionProps(body);
+                params = params.reduce((arr, param) => {
+                    if (reg.test(param)) {
+                        const duplicate = !!replaceWith && arr.some(p => existing.test(p));
+                        if (!change.remove && !duplicate) {
+                            arr.push(param.replace(change.name, change.replaceWith));
+                        }
                     }
-                }
+                    else {
+                        arr.push(param);
+                    }
+                    return arr;
+                }, []);
+                fileContent = fileContent.substring(0, call.bodyStart)
+                    + params.join(',')
+                    + trailing
+                    + fileContent.substring(call.bodyEnd);
+                overwrite = true;
             }
         }
         if (overwrite) {
             this.host.overwrite(entryPath, fileContent);
         }
     }
+    /**
+     * Returns the argument list boundaries of every top-level `owner(...)` call in the content.
+     * Strings, comments and `url()` tokens are scanned over, so an `owner(` that is only mentioned
+     * in one of those is not taken for a call, and a `@mixin` or `@function` that declares the same
+     * name is left alone. The brackets are tracked too, so a call nested in another one -
+     * `@include scrollbar(scrollbar-theme($sb-size: 6px))` - reports its own closing bracket
+     * rather than the one of the call surrounding it.
+     */
+    findFunctionCalls(content, owner) {
+        const calls = [];
+        const opening = `${owner}(`;
+        for (let i = 0; i < content.length; i++) {
+            const nonCodeEnd = this.skipNonCode(content, i);
+            if (nonCodeEnd !== -1) {
+                i = nonCodeEnd;
+                continue;
+            }
+            if (!content.startsWith(opening, i) || this.isDeclaredName(content, i)) {
+                continue;
+            }
+            const bodyStart = i + opening.length;
+            const bodyEnd = this.findClosingBracket(content, bodyStart);
+            if (bodyEnd === -1) {
+                // unbalanced from here on, leave this call rather than the rest of the file
+                continue;
+            }
+            calls.push({ bodyStart, bodyEnd });
+            // a same-owner call nested in this one is already covered by it
+            i = bodyEnd;
+        }
+        return calls;
+    }
+    /**
+     * Returns the index of the bracket closing the one `start` is inside of, or -1 when the
+     * content is unbalanced. Brackets in strings, comments and `url()` tokens are ignored.
+     */
+    findClosingBracket(content, start) {
+        let level = 0;
+        for (let i = start; i < content.length; i++) {
+            const nonCodeEnd = this.skipNonCode(content, i);
+            if (nonCodeEnd !== -1) {
+                i = nonCodeEnd;
+                continue;
+            }
+            const char = content[i];
+            if (char === '(') {
+                level++;
+            }
+            else if (char === ')') {
+                if (!level) {
+                    return i;
+                }
+                level--;
+            }
+        }
+        return -1;
+    }
+    /**
+     * Tells whether the name at `index` is the one a `@mixin` or a `@function` declares rather
+     * than a call to it. Rewriting a declaration would strip a parameter its body still reads.
+     */
+    isDeclaredName(content, index) {
+        let end = index;
+        while (end > 0 && /\s/.test(content[end - 1])) {
+            end--;
+        }
+        let start = end;
+        while (start > 0 && /[\w@-]/.test(content[start - 1])) {
+            start--;
+        }
+        const keyword = content.substring(start, end);
+        return keyword === '@mixin' || keyword === '@function';
+    }
+    /**
+     * When a string, a comment or a `url()` token starts at `index`, returns the index of its last
+     * character so that a scan can carry on past it. Returns -1 when `index` is on code.
+     */
+    skipNonCode(content, index) {
+        const char = content[index];
+        const next = content[index + 1];
+        if (char === '\'' || char === '"') {
+            return this.skipString(content, index);
+        }
+        if (char === '/' && next === '*') {
+            const end = content.indexOf('*/', index + 2);
+            return end === -1 ? content.length : end + 1;
+        }
+        if (char === '/' && next === '/') {
+            const end = content.indexOf('\n', index + 2);
+            return end === -1 ? content.length : end;
+        }
+        if (this.isUrlToken(content, index)) {
+            return this.skipUrl(content, index + URL_TOKEN.length);
+        }
+        return -1;
+    }
+    /**
+     * Sass parses an unquoted `url()` as a single token, so a `//` inside one is part of the
+     * address - `url(//cdn.example.com/bg.png)` - and not the start of a comment.
+     */
+    isUrlToken(content, index) {
+        if (content.substr(index, URL_TOKEN.length).toLowerCase() !== URL_TOKEN) {
+            return false;
+        }
+        const previous = content[index - 1];
+        return previous === undefined || !/[\w-]/.test(previous);
+    }
+    /** Returns the index of the bracket closing a `url(` whose contents start at `start`. */
+    skipUrl(content, start) {
+        for (let i = start; i < content.length; i++) {
+            const char = content[i];
+            if (char === '\'' || char === '"') {
+                i = this.skipString(content, i);
+            }
+            else if (char === ')') {
+                return i;
+            }
+        }
+        return content.length;
+    }
+    /** Returns the index of the quote closing the string opened at `start`. */
+    skipString(content, start) {
+        const quote = content[start];
+        for (let i = start + 1; i < content.length; i++) {
+            if (content[i] === '\\') {
+                i++;
+            }
+            else if (content[i] === quote) {
+                return i;
+            }
+        }
+        return content.length;
+    }
     isNamedArgument(fileContent, i, occurrences, change) {
         const openingBrackets = [];
         const closingBrackets = [];
@@ -777,12 +913,20 @@ class UpdateChanges {
      * prop: inner-func(),
      * prop2: inner2(inner-param: 3, inner-param: inner-func(..))
      * ```
+     *
+     * Strings, comments and `url()` tokens are scanned over the same way the rest of the scanner
+     * does it, so a `','` inside one of them is not taken for an argument separator.
      */
     splitFunctionProps(body) {
         const parts = [];
         let lastIndex = 0;
         let level = 0;
         for (let i = 0; i < body.length; i++) {
+            const nonCodeEnd = this.skipNonCode(body, i);
+            if (nonCodeEnd !== -1) {
+                i = nonCodeEnd;
+                continue;
+            }
             const char = body[i];
             switch (char) {
                 case '(':

package/migrations/common/UpdateChanges.spec.js

@@ -567,6 +567,72 @@ $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 replace imports', done => {
         const importsJson = {
             changes: [

package/migrations/migration-collection.json

@@ -309,6 +309,16 @@
             "version": "22.1.0",
             "description": "Update Chip outline properties",
             "factory": "./update-22_1_0_chip-outline"
+        },
+        "migration-61": {
+            "version": "22.2.0",
+            "description": "Removes scrollbar-theme properties with no effect under the standard scrollbar properties",
+            "factory": "./update-22_2_0"
+        },
+        "migration-62": {
+            "version": "22.2.0",
+            "description": "Removes the grid-summary border width properties now driven by the grid's own borders",
+            "factory": "./update-22_2_0_grid-summary-borders"
         }
     }
 }

package/migrations/update-22_2_0/changes/theme-changes.json

@@ -0,0 +1,77 @@
+{
+  "$schema": "../../common/schema/theme-changes.schema.json",
+  "changes": [
+    {
+      "name": "$sb-size",
+      "remove": true,
+      "owner": "scrollbar-theme",
+      "type": "property"
+    },
+    {
+      "name": "$sb-thumb-min-height",
+      "remove": true,
+      "owner": "scrollbar-theme",
+      "type": "property"
+    },
+    {
+      "name": "$sb-thumb-bg-color-hover",
+      "remove": true,
+      "owner": "scrollbar-theme",
+      "type": "property"
+    },
+    {
+      "name": "$sb-thumb-border-color",
+      "remove": true,
+      "owner": "scrollbar-theme",
+      "type": "property"
+    },
+    {
+      "name": "$sb-thumb-border-size",
+      "remove": true,
+      "owner": "scrollbar-theme",
+      "type": "property"
+    },
+    {
+      "name": "$sb-thumb-border-radius",
+      "remove": true,
+      "owner": "scrollbar-theme",
+      "type": "property"
+    },
+    {
+      "name": "$sb-track-bg-color-hover",
+      "remove": true,
+      "owner": "scrollbar-theme",
+      "type": "property"
+    },
+    {
+      "name": "$sb-track-border-color",
+      "remove": true,
+      "owner": "scrollbar-theme",
+      "type": "property"
+    },
+    {
+      "name": "$sb-track-border-size",
+      "remove": true,
+      "owner": "scrollbar-theme",
+      "type": "property"
+    },
+    {
+      "name": "$sb-corner-bg",
+      "remove": true,
+      "owner": "scrollbar-theme",
+      "type": "property"
+    },
+    {
+      "name": "$sb-corner-border-color",
+      "remove": true,
+      "owner": "scrollbar-theme",
+      "type": "property"
+    },
+    {
+      "name": "$sb-corner-border-size",
+      "remove": true,
+      "owner": "scrollbar-theme",
+      "type": "property"
+    }
+  ]
+}

package/migrations/update-22_2_0/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from '@angular-devkit/schematics';
+declare const _default: () => Rule;
+export default _default;

package/migrations/update-22_2_0/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const UpdateChanges_1 = require("../common/UpdateChanges");
+const version = '22.2.0';
+exports.default = () => (host, context) => __awaiter(void 0, void 0, void 0, function* () {
+    context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+    const update = new UpdateChanges_1.UpdateChanges(__dirname, host, context);
+    update.applyChanges();
+});

package/migrations/update-22_2_0/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/migrations/update-22_2_0/index.spec.js

@@ -0,0 +1,161 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path = __importStar(require("path"));
+const index_js_1 = require("@angular-devkit/schematics/testing/index.js");
+const setup_spec_1 = require("../common/setup.spec");
+const version = '22.2.0';
+describe(`Update to ${version}`, () => {
+    let appTree;
+    const schematicRunner = new index_js_1.SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+    beforeEach(() => {
+        appTree = (0, setup_spec_1.setupTestTree)();
+    });
+    const migrationName = 'migration-61';
+    it('should remove scrollbar-theme properties that no longer have effect', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.scss`, `$my-scrollbar: scrollbar-theme(
+    $sb-size: 16px,
+    $sb-thumb-bg-color: blue,
+    $sb-thumb-bg-color-hover: navy,
+    $sb-thumb-border-radius: 4px,
+    $sb-track-bg-color: black,
+    $sb-corner-bg: gray
+);`);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(`$my-scrollbar: scrollbar-theme(
+    $sb-thumb-bg-color: blue,
+    $sb-track-bg-color: black
+);`);
+    }));
+    it('should leave the supported scrollbar-theme properties untouched', () => __awaiter(void 0, void 0, void 0, function* () {
+        const content = `$my-scrollbar: scrollbar-theme(
+    $sb-thumb-bg-color: blue,
+    $sb-track-bg-color: black
+);`;
+        appTree.create(`/testSrc/appPrefix/component/test.component.scss`, content);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(content);
+    }));
+    it('should keep the brackets balanced when the theme is nested in another call', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.scss`, `.selection-area {
+    @include scrollbar(scrollbar-theme($sb-size: 6px));
+}
+
+igx-grid {
+    @include scrollbar(scrollbar-theme($sb-thumb-bg-color: blue, $sb-size: 16px));
+}`);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(`.selection-area {
+    @include scrollbar(scrollbar-theme());
+}
+
+igx-grid {
+    @include scrollbar(scrollbar-theme($sb-thumb-bg-color: blue));
+}`);
+    }));
+    it('should migrate a theme call that is not terminated by a semicolon', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.scss`, `$my-scrollbar: scrollbar-theme(
+    $sb-size: 16px,
+    $sb-thumb-bg-color: blue
+)`);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(`$my-scrollbar: scrollbar-theme(
+    $sb-thumb-bg-color: blue
+)`);
+    }));
+    it('should keep a retained property when a comment in the argument list holds an apostrophe', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.scss`, `$my-scrollbar: scrollbar-theme($sb-size: 6px /* user's size */, $sb-thumb-bg-color: red);`);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(`$my-scrollbar: scrollbar-theme( $sb-thumb-bg-color: red);`);
+    }));
+    it('should remove the properties that follow a comment holding an apostrophe', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.scss`, `$my-scrollbar: scrollbar-theme(
+    $sb-size: 16px, // don't need this anymore
+    $sb-thumb-bg-color: blue,
+    $sb-corner-bg: gray
+);`);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(`$my-scrollbar: scrollbar-theme( // don't need this anymore
+    $sb-thumb-bg-color: blue
+);`);
+    }));
+    it('should migrate a theme below a comment glued to a closing brace', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.scss`, `.selection-area {
+    color: red;
+}// don't set $sb-size here
+
+$my-scrollbar: scrollbar-theme($sb-size: 16px, $sb-thumb-bg-color: blue);`);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(`.selection-area {
+    color: red;
+}// don't set $sb-size here
+
+$my-scrollbar: scrollbar-theme( $sb-thumb-bg-color: blue);`);
+    }));
+    it('should migrate a theme preceded on the same line by a protocol-relative url()', () => __awaiter(void 0, void 0, void 0, function* () {
+        appTree.create(`/testSrc/appPrefix/component/test.component.scss`, `.a { background: url(//cdn.example.com/bg.png); $my: scrollbar-theme($sb-size: 16px, $sb-thumb-bg-color: red); }`);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(`.a { background: url(//cdn.example.com/bg.png); $my: scrollbar-theme( $sb-thumb-bg-color: red); }`);
+    }));
+    it('should not rewrite a mixin or a function declared with the theme name', () => __awaiter(void 0, void 0, void 0, function* () {
+        const content = `@mixin scrollbar-theme($sb-size: 16px) {
+    width: $sb-size;
+}
+
+@function scrollbar-theme($sb-size: 6px) {
+    @return ($size: $sb-size);
+}`;
+        appTree.create(`/testSrc/appPrefix/component/test.component.scss`, content);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(content);
+    }));
+    it('should not touch same-named properties on other themes', () => __awaiter(void 0, void 0, void 0, function* () {
+        const content = `$my-grid: grid-theme(
+    $sb-size: 16px
+);`;
+        appTree.create(`/testSrc/appPrefix/component/test.component.scss`, content);
+        const tree = yield schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss')).toEqual(content);
+    }));
+});

package/migrations/update-22_2_0_grid-summary-borders/changes/theme-changes.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../../common/schema/theme-changes.schema.json",
+  "changes": [
+    {
+      "name": "$border-width",
+      "remove": true,
+      "owner": "grid-summary-theme",
+      "type": "property"
+    },
+    {
+      "name": "$pinned-border-width",
+      "remove": true,
+      "owner": "grid-summary-theme",
+      "type": "property"
+    }
+  ]
+}

package/migrations/update-22_2_0_grid-summary-borders/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from '@angular-devkit/schematics';
+declare const _default: () => Rule;
+export default _default;