fix(@angular/build): improve URL rebasing for hyphenated Sass namespa…

…ced variables Sass variable namespaces can contain either a hyphen or underscore in the namespace identifier. The URL rebasing support within the Angular CLI will now account for these type of namespaces and rebase the evaluated URL as expected.
angular · Nov 13, 2024 · f96bb86 · f96bb86
1 parent af14769
commit f96bb86
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 1 deletion.
diff --git a/...s/angular/build/src/builders/application/tests/behavior/stylesheet-url-resolution_spec.ts b/...s/angular/build/src/builders/application/tests/behavior/stylesheet-url-resolution_spec.ts
@@ -243,6 +243,60 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       harness.expectFile('dist/browser/media/logo.svg').toExist();
     });
 
+    it('should rebase a URL with a hyphen-namespaced Sass variable referencing a local resource', async () => {
+      await harness.writeFiles({
+        'src/styles.scss': `@use 'theme/a';`,
+        'src/theme/a.scss': `
+                            @use './b' as named-hyphen;
+                            .a {
+                              background-image: url(named-hyphen.$my-var)
+                            }
+        `,
+        'src/theme/b.scss': `@forward './c.scss' show $my-var;`,
+        'src/theme/c.scss': `$my-var: "./images/logo.svg";`,
+        'src/theme/images/logo.svg': `<svg></svg>`,
+      });
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        outputHashing: OutputHashing.None,
+        styles: ['src/styles.scss'],
+      });
+
+      const { result } = await harness.executeOnce();
+      expect(result?.success).toBeTrue();
+
+      harness.expectFile('dist/browser/styles.css').content.toContain(`url("./media/logo.svg")`);
+      harness.expectFile('dist/browser/media/logo.svg').toExist();
+    });
+
+    it('should rebase a URL with a underscore-namespaced Sass variable referencing a local resource', async () => {
+      await harness.writeFiles({
+        'src/styles.scss': `@use 'theme/a';`,
+        'src/theme/a.scss': `
+                            @use './b' as named_underscore;
+                            .a {
+                              background-image: url(named_underscore.$my-var)
+                            }
+        `,
+        'src/theme/b.scss': `@forward './c.scss' show $my-var;`,
+        'src/theme/c.scss': `$my-var: "./images/logo.svg";`,
+        'src/theme/images/logo.svg': `<svg></svg>`,
+      });
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        outputHashing: OutputHashing.None,
+        styles: ['src/styles.scss'],
+      });
+
+      const { result } = await harness.executeOnce();
+      expect(result?.success).toBeTrue();
+
+      harness.expectFile('dist/browser/styles.css').content.toContain(`url("./media/logo.svg")`);
+      harness.expectFile('dist/browser/media/logo.svg').toExist();
+    });
+
     it('should rebase a URL with a Sass variable referencing a local resource', async () => {
       await harness.writeFiles({
         'src/styles.scss': `@use 'theme/a';`,

diff --git a/packages/angular/build/src/tools/sass/rebasing-importer.ts b/packages/angular/build/src/tools/sass/rebasing-importer.ts
@@ -77,7 +77,8 @@ abstract class UrlRebasingImporter implements Importer<'sync'> {
       }
 
       // Sass variable usage either starts with a `$` or contains a namespace and a `.$`
-      const valueNormalized = value[0] === '$' || /^\w+\.\$/.test(value) ? `#{${value}}` : value;
+      const valueNormalized =
+        value[0] === '$' || /^\w[\w_-]*\.\$/.test(value) ? `#{${value}}` : value;
       const rebasedPath = relative(this.entryDirectory, stylesheetDirectory);
 
       // Normalize path separators and escape characters