From bc03f552a46057dda545eee0a7157379312c056e Mon Sep 17 00:00:00 2001
From: Alan Agius <alanagius@google.com>
Date: Thu, 8 Jun 2023 14:34:06 +0000
Subject: [PATCH] fix(@angular-devkit/build-angular): correctly handle sass
 imports

Prior to this change nested imports in sass were processed as scss when using the esbuild builder due to an incorrect check.

Closes #25338
---
 .../src/sass/rebasing-importer.ts             |  4 +-
 .../legacy-cli/e2e/tests/build/styles/sass.ts | 43 +++++++++++++++++++
 2 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 tests/legacy-cli/e2e/tests/build/styles/sass.ts

diff --git a/packages/angular_devkit/build_angular/src/sass/rebasing-importer.ts b/packages/angular_devkit/build_angular/src/sass/rebasing-importer.ts
index e1faac8f2547..7e9fc7960755 100644
--- a/packages/angular_devkit/build_angular/src/sass/rebasing-importer.ts
+++ b/packages/angular_devkit/build_angular/src/sass/rebasing-importer.ts
@@ -89,10 +89,10 @@ abstract class UrlRebasingImporter implements Importer<'sync'> {
 
     let syntax: Syntax | undefined;
     switch (extname(stylesheetPath).toLowerCase()) {
-      case 'css':
+      case '.css':
         syntax = 'css';
         break;
-      case 'sass':
+      case '.sass':
         syntax = 'indented';
         break;
       default:
diff --git a/tests/legacy-cli/e2e/tests/build/styles/sass.ts b/tests/legacy-cli/e2e/tests/build/styles/sass.ts
new file mode 100644
index 000000000000..349b1493d457
--- /dev/null
+++ b/tests/legacy-cli/e2e/tests/build/styles/sass.ts
@@ -0,0 +1,43 @@
+import {
+  writeMultipleFiles,
+  deleteFile,
+  expectFileToMatch,
+  replaceInFile,
+} from '../../../utils/fs';
+import { expectToFail } from '../../../utils/utils';
+import { ng } from '../../../utils/process';
+import { updateJsonFile } from '../../../utils/project';
+
+export default async function () {
+  await writeMultipleFiles({
+    'src/styles.sass': `
+      @import './imported-styles.sass'
+      body
+        background-color: blue
+    `,
+    'src/imported-styles.sass': `
+      p
+        background-color: red
+    `,
+    'src/app/app.component.sass': `
+      .outer
+        .inner
+          background: #fff
+      `,
+  });
+
+  await updateJsonFile('angular.json', (workspaceJson) => {
+    const appArchitect = workspaceJson.projects['test-project'].architect;
+    appArchitect.build.options.styles = [{ input: 'src/styles.sass' }];
+  });
+
+  await deleteFile('src/app/app.component.css');
+  await replaceInFile('src/app/app.component.ts', './app.component.css', './app.component.sass');
+
+  await ng('build', '--source-map', '--configuration=development');
+
+  await expectFileToMatch('dist/test-project/styles.css', /body\s*{\s*background-color: blue;\s*}/);
+  await expectFileToMatch('dist/test-project/styles.css', /p\s*{\s*background-color: red;\s*}/);
+  await expectToFail(() => expectFileToMatch('dist/test-project/styles.css', '"mappings":""'));
+  await expectFileToMatch('dist/test-project/main.js', /.outer.*.inner.*background:\s*#[fF]+/);
+}