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.

(cherry picked from commit f96bb86)

packages/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';`,

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