From 19d0b3613a124cf063e7486d54d2bd15c1ebee6d Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Mon, 3 Oct 2022 16:23:04 +0200
Subject: [PATCH] fix(material/schematics): files with inline resources
 overwritten by ng-generate (#25744)

The `ng generate` MDC migration schematics was assuming that `visitTemplate` and `visitStylesheet` will be called only on external resources and it was overwriting the entire file content which was breaking files that have components with inline resources.

These changes edit the file only within the template/stylesheet span.
---
 .../rules/components/card/card-styles.spec.ts | 33 ++++++++++++++++++-
 .../components/card/card-template.spec.ts     | 31 ++++++++++++++++-
 .../mdc-migration/rules/template-migration.ts |  5 ++-
 .../mdc-migration/rules/theming-styles.ts     |  5 ++-
 4 files changed, 70 insertions(+), 4 deletions(-)

diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-styles.spec.ts b/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-styles.spec.ts
index 12e992d8e751..37fb9d9cde75 100644
--- a/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-styles.spec.ts
+++ b/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-styles.spec.ts
@@ -1,6 +1,11 @@
 import {createTestApp, patchDevkitTreeToExposeTypeScript} from '@angular/cdk/schematics/testing';
 import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
-import {createNewTestRunner, migrateComponents, THEME_FILE} from '../test-setup-helper';
+import {
+  APP_MODULE_FILE,
+  createNewTestRunner,
+  migrateComponents,
+  THEME_FILE,
+} from '../test-setup-helper';
 
 describe('card styles', () => {
   let runner: SchematicTestRunner;
@@ -215,5 +220,31 @@ describe('card styles', () => {
       `,
       );
     });
+
+    it('should migrate inline styles', async () => {
+      const oldContent = `
+        import {Component} from '@angular/core';
+
+        @Component({
+          template: '',
+          styles: ['.mat-card { color: red; }'],
+        })
+        export class MyComp {}
+      `;
+
+      const newContent = `
+        import {Component} from '@angular/core';
+
+        @Component({
+          template: '',
+          styles: ['.mat-mdc-card { color: red; }'],
+        })
+        export class MyComp {}
+      `;
+
+      cliAppTree.overwrite(APP_MODULE_FILE, oldContent);
+      const tree = await migrateComponents(['card'], runner, cliAppTree);
+      expect(tree.readContent(APP_MODULE_FILE)).toBe(newContent);
+    });
   });
 });
diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.spec.ts b/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.spec.ts
index 902d44a295ac..5e2311e2ce59 100644
--- a/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.spec.ts
+++ b/src/material/schematics/ng-generate/mdc-migration/rules/components/card/card-template.spec.ts
@@ -1,6 +1,11 @@
 import {createTestApp, patchDevkitTreeToExposeTypeScript} from '@angular/cdk/schematics/testing';
 import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
-import {createNewTestRunner, migrateComponents, TEMPLATE_FILE} from '../test-setup-helper';
+import {
+  APP_MODULE_FILE,
+  createNewTestRunner,
+  migrateComponents,
+  TEMPLATE_FILE,
+} from '../test-setup-helper';
 
 describe('card template migrator', () => {
   let runner: SchematicTestRunner;
@@ -110,4 +115,28 @@ describe('card template migrator', () => {
       `,
     );
   });
+
+  it('should migrate inline templates', async () => {
+    const oldContent = `
+      import {Component} from '@angular/core';
+
+      @Component({
+        template: '<mat-card></mat-card>'
+      })
+      export class MyComp {}
+    `;
+
+    const newContent = `
+      import {Component} from '@angular/core';
+
+      @Component({
+        template: '<mat-card appearance="outlined"></mat-card>'
+      })
+      export class MyComp {}
+    `;
+
+    cliAppTree.overwrite(APP_MODULE_FILE, oldContent);
+    const tree = await migrateComponents(['card'], runner, cliAppTree);
+    expect(tree.readContent(APP_MODULE_FILE)).toBe(newContent);
+  });
 });
diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/template-migration.ts b/src/material/schematics/ng-generate/mdc-migration/rules/template-migration.ts
index 9aeb15f7f2f9..d7362c07ecdc 100644
--- a/src/material/schematics/ng-generate/mdc-migration/rules/template-migration.ts
+++ b/src/material/schematics/ng-generate/mdc-migration/rules/template-migration.ts
@@ -16,7 +16,10 @@ export class TemplateMigration extends Migration<ComponentMigrator[], SchematicC
   enabled = true;
 
   override visitTemplate(template: ResolvedResource) {
-    this.fileSystem.overwrite(template.filePath, this.migrate(template.content, template.filePath));
+    this.fileSystem
+      .edit(template.filePath)
+      .remove(template.start, template.content.length)
+      .insertRight(template.start, this.migrate(template.content, template.filePath));
   }
 
   migrate(template: string, templateUrl?: string): string {
diff --git a/src/material/schematics/ng-generate/mdc-migration/rules/theming-styles.ts b/src/material/schematics/ng-generate/mdc-migration/rules/theming-styles.ts
index bc948b3b9f8b..444a6340b947 100644
--- a/src/material/schematics/ng-generate/mdc-migration/rules/theming-styles.ts
+++ b/src/material/schematics/ng-generate/mdc-migration/rules/theming-styles.ts
@@ -17,7 +17,10 @@ export class ThemingStylesMigration extends Migration<ComponentMigrator[], Schem
   namespace: string;
 
   override visitStylesheet(stylesheet: ResolvedResource) {
-    this.fileSystem.overwrite(stylesheet.filePath, this.migrate(stylesheet.content));
+    this.fileSystem
+      .edit(stylesheet.filePath)
+      .remove(stylesheet.start, stylesheet.content.length)
+      .insertRight(stylesheet.start, this.migrate(stylesheet.content));
   }
 
   migrate(styles: string): string {