fix(angular/schematics): remove file extensions in tilde migration (#1008)

angular/components#24169

Author: jeripeierSBB

src/angular/schematics/ng-add/migrations/style-import-migration.spec.ts

@@ -202,4 +202,26 @@ describe('style import migration', () => {
       `@include sbb-core();`,
     ]);
   });
+
+  it('should remove remove .scss file extension', async () => {
+    writeLines(testPath, [
+      `@use '~@sbb-esta/angular.scss' as sbb;`,
+      `@import '~@sbb-esta/angular/theming.scss';`,
+      `@import '~@sbb-esta/cdk/overlay-prebuilt.css';`,
+
+      `@include sbb.button-theme();`,
+      `@include sbb-core();`,
+    ]);
+
+    await runMigration();
+
+    expect(splitFile(testPath)).toEqual([
+      `@use '@sbb-esta/angular' as sbb;`,
+      `@import '@sbb-esta/angular/theming';`,
+      `@import '@sbb-esta/cdk/overlay-prebuilt.css';`,
+
+      `@include sbb.button-theme();`,
+      `@include sbb-core();`,
+    ]);
+  });
 });

src/angular/schematics/ng-add/migrations/style-import-migration.ts

@@ -21,9 +21,10 @@ export class StyleImportMigration extends Migration<null, DevkitContext> {
     if (extension === '.scss' || extension === '.css') {
       const content = stylesheet.content;
       const migratedContent = content
-        .replace(/@(?:import|use) +['"]~@sbb-esta\/.*['"].*;?/g, (match) => {
-          const index = match.indexOf('~@sbb-esta');
-          return match.slice(0, index) + match.slice(index + 1);
+        .replace(/@(?:import|use) +['"](~@sbb-esta\/.*)['"].*;?/g, (match, importPath) => {
+          const index = match.indexOf(importPath);
+          const newImportPath = importPath.replace(/^~|\.scss$/g, '');
+          return match.slice(0, index) + newImportPath + match.slice(index + importPath.length);
         })
         .replace(
           /@sbb-esta\/angular-(core|business|public)\/_?styles(.scss)?[^'"]*/g,