refactor(ng-update): do not visit external stylesheets multiple times (#17286)

Besides stylesheets which are referenced in components, we also visit
stylesheets which are not referenced by a component. This has been done
at some point to capture global stylesheets.

Right now we accidentally visit external stylesheets multiple times. This can
result in broken stylesheets.

Also this commit does some path manipulation cleanup.

Author: devversion

src/cdk/schematics/BUILD.bazel

@@ -89,5 +89,5 @@ filegroup(
     srcs = glob([
         "ng-update/test-cases/**/*_input.ts",
         "ng-update/test-cases/**/*_expected_output.ts",
-    ]),
+    ]) + ["ng-update/test-cases/misc/global-stylesheets-test.scss"],
 )

src/cdk/schematics/ng-update/test-cases/misc/global-stylesheets-test.scss

@@ -0,0 +1,3 @@
+[cdkPortalHost] {
+  color: red;
+}

src/cdk/schematics/ng-update/test-cases/misc/global-stylesheets.spec.ts

@@ -0,0 +1,27 @@
+import {createTestCaseSetup} from '../../../testing';
+import {migrationCollection} from '../index.spec';
+import {readFileSync} from 'fs';
+
+describe('global stylesheets migration', () => {
+
+  it('should not check stylesheet twice if referenced in component', async () => {
+    const {runFixers, writeFile, removeTempDir, appTree} = await createTestCaseSetup(
+      'migration-v6', migrationCollection, [require.resolve('./global-stylesheets_input.ts')]);
+
+    const testStylesheetPath = 'projects/cdk-testing/src/test-cases/global-stylesheets-test.scss';
+
+    // Copy the test stylesheets file into the test CLI application. That way it will
+    // be picked up by the update-tool.
+    writeFile(testStylesheetPath,
+        readFileSync(require.resolve('./global-stylesheets-test.scss'), 'utf8'));
+
+    await runFixers();
+
+    // if the external stylesheet would have been checked multiple times, the migrated
+    // stylesheet would not match the expected output.
+    expect(appTree.readContent(testStylesheetPath))
+        .toBe(`[cdkPortalOutlet] {\n  color: red;\n}\n`);
+
+    removeTempDir();
+  });
+});

src/cdk/schematics/ng-update/test-cases/misc/global-stylesheets_input.ts

@@ -0,0 +1,7 @@
+import {Component} from '@angular/core';
+
+@Component({
+  template: 'hello',
+  styleUrls: ['./global-stylesheets-test.scss'],
+})
+export class MyTestComp {}

src/cdk/schematics/update-tool/index.ts

@@ -95,7 +95,11 @@ export function runMigrationRules<T>(
       .filter(filePath => !resourceCollector.resolvedStylesheets.some(s => s.filePath === filePath))
       .forEach(filePath => {
         const stylesheet = resourceCollector.resolveExternalStylesheet(filePath, null);
-        rules.forEach(r => r.visitStylesheet(stylesheet));
+        const relativePath = getProjectRelativePath(filePath);
+        // do not visit stylesheets which have been referenced from a component.
+        if (!analyzedFiles.has(relativePath)) {
+          rules.forEach(r => r.visitStylesheet(stylesheet));
+        }
       });
 
   // Commit all recorded updates in the update recorder. We need to perform the
@@ -110,7 +114,7 @@ export function runMigrationRules<T>(
   // In case there are rule failures, print these to the CLI logger as warnings.
   if (ruleFailures.length) {
     ruleFailures.forEach(({filePath, message, position}) => {
-      const normalizedFilePath = normalize(relative(basePath, filePath));
+      const normalizedFilePath = normalize(getProjectRelativePath(filePath));
       const lineAndCharacter = `${position.line + 1}:${position.character + 1}`;
       logger.warn(`${normalizedFilePath}@${lineAndCharacter} - ${message}`);
     });
@@ -119,7 +123,7 @@ export function runMigrationRules<T>(
   return !!ruleFailures.length;
 
   function getUpdateRecorder(filePath: string): UpdateRecorder {
-    const treeFilePath = relative(basePath, filePath);
+    const treeFilePath = getProjectRelativePath(filePath);
     if (updateRecorderCache.has(treeFilePath)) {
       return updateRecorderCache.get(treeFilePath)!;
     }
@@ -134,8 +138,8 @@ export function runMigrationRules<T>(
     resourceCollector.visitNode(node);
   }
 
-  /** Gets the specified path relative to the project root. */
+  /** Gets the specified path relative to the project root in POSIX format. */
   function getProjectRelativePath(filePath: string) {
-    return relative(basePath, filePath);
+    return relative(basePath, filePath).replace(/\\/g, '/');
   }
 }