igniteui-angular 22.2.0-rc.1 → 22.2.0

package/migrations/common/UpdateChanges.js

@@ -48,6 +48,8 @@ const util_1 = require("./util");
 const project_service_container_1 = require("./project-service-container");
 const TSCONFIG_PATH = 'tsconfig.json';
 const URL_TOKEN = 'url(';
+/** Dependency and build output folders never searched for stylesheets. */
+const SKIPPED_STYLE_DIRS = ['node_modules', 'dist', '.angular', '.git'];
 var InputPropertyType;
 (function (InputPropertyType) {
     InputPropertyType["EVAL"] = "eval";
@@ -101,17 +103,25 @@ class UpdateChanges {
     /** Sass (both .scss and .sass) files in the project being updated. */
     get sassFiles() {
         if (!this._sassFiles.length) {
-            // files can be outside the app prefix, so start from sourceRoot
+            // stylesheets can sit anywhere in the workspace, not only under sourceRoot
             // also ignore schematics `styleext` as Sass can be used regardless
-            const sourceDirs = (0, util_1.getProjects)(this.workspace).map(x => x.sourceRoot).filter(x => x);
-            this.sourceDirsVisitor((fulPath, entry) => {
-                if (fulPath.endsWith('.scss') || fulPath.endsWith('.sass')) {
-                    this._sassFiles.push(entry.path);
-                }
-            }, sourceDirs);
+            this.collectSassFiles(this.host.getDir('/'), this._sassFiles);
         }
         return this._sassFiles;
     }
+    /** Collects the Sass files under a folder, skipping dependency and build output folders. */
+    collectSassFiles(dir, files) {
+        for (const name of dir.subfiles) {
+            if (name.endsWith('.scss') || name.endsWith('.sass')) {
+                files.push(dir.file(name).path);
+            }
+        }
+        for (const name of dir.subdirs) {
+            if (!SKIPPED_STYLE_DIRS.includes(name)) {
+                this.collectSassFiles(dir.dir(name), files);
+            }
+        }
+    }
     get service() {
         if (!this._service) {
             this._service = (0, tsUtils_1.getLanguageService)(this.tsFiles, this.host);
@@ -372,7 +382,7 @@ class UpdateChanges {
                 continue;
             }
             /** owner-func:( * ) */
-            const calls = this.findFunctionCalls(fileContent, change.owner);
+            const calls = this.findFunctionCalls(fileContent, change.owner, entryPath.endsWith('.sass'));
             // rewrite back to front so the collected indices stay valid
             for (const call of calls.reverse()) {
                 const rawBody = fileContent.substring(call.bodyStart, call.bodyEnd);
@@ -381,26 +391,40 @@ class UpdateChanges {
                 }
                 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}:`);
+                // both are matched at the argument's code start; Sass allows whitespace before the colon
+                const reg = new RegExp(String.raw `^${name}\s*:`);
+                const existing = new RegExp(String.raw `^${replaceWith}\s*:`);
                 // 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));
+                const eol = fileContent.includes('\r\n') ? '\r\n' : '\n';
+                const params = this.splitFunctionProps(body);
+                const codeStarts = params.map(param => this.leadingCommentsEnd(param));
+                // renaming onto a name the call already passes would make it a duplicate argument
+                const duplicate = !!replaceWith && params.some((param, i) => existing.test(param.substring(codeStarts[i])));
+                // comments in front of a removed argument usually describe the previous one, so they are kept
+                let carried = '';
+                const kept = params.reduce((arr, param, i) => {
+                    const codeStart = codeStarts[i];
+                    if (reg.test(param.substring(codeStart))) {
                         if (!change.remove && !duplicate) {
-                            arr.push(param.replace(change.name, change.replaceWith));
+                            // the name sits at the code start, so renaming must not search the comments
+                            arr.push(carried + this.commentBreak(carried, param, eol) + param.substring(0, codeStart)
+                                + change.replaceWith + param.substring(codeStart + change.name.length));
+                            carried = '';
+                        }
+                        else {
+                            carried += param.substring(0, codeStart).trimEnd();
                         }
                     }
                     else {
-                        arr.push(param);
+                        arr.push(carried + this.commentBreak(carried, param, eol) + param);
+                        carried = '';
                     }
                     return arr;
                 }, []);
                 fileContent = fileContent.substring(0, call.bodyStart)
-                    + params.join(',')
+                    + kept.join(',') + carried + this.commentBreak(carried, trailing, eol)
                     + trailing
                     + fileContent.substring(call.bodyEnd);
                 overwrite = true;
@@ -413,21 +437,29 @@ class UpdateChanges {
     /**
      * 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 -
+     * in one of those is not taken for a call, and anything the stylesheet declares itself 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.
+     *
+     * An owner is matched anywhere in a name, because migrations rely on it: `circular-theme` is
+     * how `progress-circular-theme` is addressed, and `theme` covers every `*-theme` mixin.
      */
-    findFunctionCalls(content, owner) {
+    findFunctionCalls(content, owner, indented) {
         const calls = [];
         const opening = `${owner}(`;
+        const code = this.sassCode(content);
+        // Earlier changes can move both calls and scope boundaries, so collect them together.
+        const scopes = this.declarationScopes(content, code, indented);
+        let brackets = 0;
         for (let i = 0; i < content.length; i++) {
-            const nonCodeEnd = this.skipNonCode(content, i);
-            if (nonCodeEnd !== -1) {
-                i = nonCodeEnd;
-                continue;
+            if (code[i] === '(' || code[i] === '[') {
+                brackets++;
+            }
+            else if (code[i] === ')' || code[i] === ']') {
+                brackets--;
             }
-            if (!content.startsWith(opening, i) || this.isDeclaredName(content, i)) {
+            if (!code.startsWith(opening, i) || this.isOwnMember(code, i, owner, scopes, indented && !brackets)) {
                 continue;
             }
             const bodyStart = i + opening.length;
@@ -467,21 +499,173 @@ class UpdateChanges {
         }
         return -1;
     }
+    /** Collects declarations within their brace or indentation scopes in code with non-code masked. */
+    declarationScopes(content, code, indented) {
+        const scopes = [];
+        const stack = [];
+        let brackets = 0;
+        let pendingDeclaration;
+        const enterScope = (start, indentation = 0) => {
+            const scope = {
+                start, end: code.length, mixins: new Map(), functions: new Map(), declarations: []
+            };
+            scopes.push(scope);
+            // Braces in an interpolated default argument do not start the declaration's body.
+            const declaration = brackets ? undefined : pendingDeclaration;
+            stack.push({ scope, indentation, declaration });
+            if (declaration) {
+                pendingDeclaration = undefined;
+            }
+        };
+        const leaveScope = (end) => {
+            const { scope, declaration } = stack.pop();
+            scope.end = end;
+            if (declaration) {
+                declaration.end = end;
+            }
+        };
+        enterScope(0);
+        const declaration = /(?:@(mixin|function)\s+|=\s*)([\w-]+)/y;
+        for (let i = 0; i < code.length; i++) {
+            // Indentation inside a multiline argument/list is not a new Sass scope.
+            if (indented && !brackets && (i === 0 || code[i - 1] === '\n')) {
+                const lineEnd = code.indexOf('\n', i);
+                const line = code.substring(i, lineEnd === -1 ? code.length : lineEnd);
+                if (line.trim()) {
+                    // Masked comments are whitespace too, but are not part of the source indentation.
+                    const indentation = /^[ \t]*/.exec(content.substring(i))[0].length;
+                    // An indented mixin may have defaults but no body.
+                    if (pendingDeclaration && indentation <= stack[stack.length - 1].indentation) {
+                        pendingDeclaration.end = i;
+                        pendingDeclaration = undefined;
+                    }
+                    while (stack.length > 1 && indentation < stack[stack.length - 1].indentation) {
+                        leaveScope(i);
+                    }
+                    if (indentation > stack[stack.length - 1].indentation) {
+                        enterScope(i, indentation);
+                    }
+                }
+            }
+            const char = code[i];
+            if (!indented && char === '{') {
+                enterScope(i);
+            }
+            else if (!indented && char === '}' && stack.length > 1) {
+                leaveScope(i);
+            }
+            else if (char === '(' || char === '[') {
+                brackets++;
+            }
+            else if (char === ')' || char === ']') {
+                brackets--;
+            }
+            else if (char === '@' || (indented && !brackets && char === '='
+                && this.keywordBefore(code, i + 1, true) === '@mixin')) {
+                declaration.lastIndex = i;
+                const match = declaration.exec(code);
+                if (match) {
+                    const scope = stack[stack.length - 1].scope;
+                    // Sass treats underscores and hyphens as the same identifier character.
+                    const members = scope[match[1] === 'function' ? 'functions' : 'mixins'];
+                    const name = match[2].replace(/_/g, '-');
+                    if (!members.has(name)) {
+                        members.set(name, i);
+                    }
+                    pendingDeclaration = { start: i, end: code.length };
+                    scope.declarations.push(pendingDeclaration);
+                    i = declaration.lastIndex - 1;
+                }
+            }
+        }
+        return scopes;
+    }
     /**
-     * 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.
+     * Tells whether the `owner` at `index` is part of a member the stylesheet declares itself. A
+     * user's own `app-grid-summary-theme` ends with a theme function name, so without this its
+     * declaration would lose a parameter its body reads.
+     *
+     * Only this stylesheet is read. Telling which member a call loaded from another one refers to
+     * needs the module rules of `@use` and `@forward` - re-exports, `hide` and `as prefix-*` - so a
+     * member of the app that another stylesheet declares is still taken for the Ignite UI one.
      */
-    isDeclaredName(content, index) {
-        let end = index;
+    isOwnMember(content, index, owner, scopes, indented) {
+        let start = index;
+        while (start > 0 && /[\w-]/.test(content[start - 1])) {
+            start--;
+        }
+        // a namespace holds the members of another stylesheet, never the ones declared here
+        if (content[start - 1] === '.') {
+            return false;
+        }
+        const keyword = this.keywordBefore(content, start, indented);
+        if (keyword === '@mixin' || keyword === '@function') {
+            // a declaration, whose body reads the parameters it lists
+            return true;
+        }
+        const name = content.substring(start, index + owner.length).replace(/_/g, '-');
+        // Bodies and defaults can run after a later declaration becomes available. Keep their
+        // existing protection; declaration order is conclusive only for immediate calls.
+        const deferred = scopes.some(scope => scope.declarations.some(member => member.start <= index && index < member.end));
+        // a mixin and a function of one name are separate members, so only the called one shadows
+        return scopes.some(scope => {
+            const declaredAt = (keyword === '@include' ? scope.mixins : scope.functions).get(name);
+            return scope.start <= index && index < scope.end && declaredAt !== undefined
+                && (deferred || declaredAt <= index);
+        });
+    }
+    /** The at-rule before a member name, or indented shorthand when outside an expression. */
+    keywordBefore(content, start, indented) {
+        let end = start;
         while (end > 0 && /\s/.test(content[end - 1])) {
             end--;
         }
-        let start = end;
-        while (start > 0 && /[\w@-]/.test(content[start - 1])) {
-            start--;
+        // Shorthand starts a statement. Unlike '=', '+' must be adjacent to the mixin name.
+        const shorthand = content[end - 1];
+        if (indented && (shorthand === '=' || (shorthand === '+' && end === start))
+            && !content.substring(content.lastIndexOf('\n', end - 1) + 1, end - 1).trim()) {
+            return shorthand === '=' ? '@mixin' : '@include';
         }
-        const keyword = content.substring(start, end);
-        return keyword === '@mixin' || keyword === '@function';
+        let keywordStart = end;
+        while (keywordStart > 0 && /[\w@-]/.test(content[keywordStart - 1])) {
+            keywordStart--;
+        }
+        return content.substring(keywordStart, end);
+    }
+    /** Masks non-code with whitespace, preserving offsets, line endings and the original stylesheet. */
+    sassCode(content) {
+        const parts = [];
+        let start = 0;
+        for (let i = 0; i < content.length; i++) {
+            const nonCodeEnd = this.skipNonCode(content, i);
+            if (nonCodeEnd !== -1) {
+                parts.push(content.substring(start, i), content.substring(i, nonCodeEnd + 1).replace(/[^\r\n]/g, ' '));
+                start = nonCodeEnd + 1;
+                i = nonCodeEnd;
+            }
+        }
+        parts.push(content.substring(start));
+        return parts.join('');
+    }
+    /** Index where an argument's code starts, after its leading whitespace and comments. */
+    leadingCommentsEnd(param) {
+        let i = 0;
+        while (i < param.length) {
+            if (/\s/.test(param[i])) {
+                i++;
+            }
+            else if (param[i] === '/' && (param[i + 1] === '/' || param[i + 1] === '*')) {
+                i = this.skipNonCode(param, i) + 1;
+            }
+            else {
+                break;
+            }
+        }
+        return i;
+    }
+    /** The line break a carried `//` comment needs so that it does not swallow what follows it. */
+    commentBreak(carried, next, eol) {
+        return /\/\/[^\n]*$/.test(carried) && !/^[ \t]*\r?\n/.test(next) ? eol : '';
     }
     /**
      * When a string, a comment or a `url()` token starts at `index`, returns the index of its last