From a1210e412486ae9150980b29975b32b4c7ed3d46 Mon Sep 17 00:00:00 2001
From: Alan Agius <alan.agius4@gmail.com>
Date: Fri, 17 Dec 2021 13:32:05 +0100
Subject: [PATCH] fix(@angular-devkit/build-angular): fail build when importing
 CSS files as an ECMA modules

BREAKING CHANGE:

We now issue a build time error since importing a CSS file as an ECMA module is non standard Webpack specific feature, which is not supported by the Angular CLI.

This feature was never truly supported by the Angular CLI, but has as such for visibility.
---
 .../tests/behavior/styles_unsupported_spec.ts | 36 +++++++++++++++++++
 .../allowed-common-js-dependencies_spec.ts    | 20 -----------
 .../src/webpack/configs/styles.ts             |  1 +
 3 files changed, 37 insertions(+), 20 deletions(-)
 create mode 100644 packages/angular_devkit/build_angular/src/builders/browser/tests/behavior/styles_unsupported_spec.ts

diff --git a/packages/angular_devkit/build_angular/src/builders/browser/tests/behavior/styles_unsupported_spec.ts b/packages/angular_devkit/build_angular/src/builders/browser/tests/behavior/styles_unsupported_spec.ts
new file mode 100644
index 000000000000..7ea328461f95
--- /dev/null
+++ b/packages/angular_devkit/build_angular/src/builders/browser/tests/behavior/styles_unsupported_spec.ts
@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { logging } from '@angular-devkit/core';
+import { buildWebpackBrowser } from '../../index';
+import { BASE_OPTIONS, BROWSER_BUILDER_INFO, describeBuilder } from '../setup';
+
+describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
+  describe('Behavior: "Style Unsupported"', () => {
+    it('errors when importing a css file as an ECMA module (Webpack specific behaviour)', async () => {
+      await harness.writeFiles({
+        'src/test-style.css': '.test-a {color: red}',
+        'src/main.ts': `import './test-style.css'`,
+      });
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        styles: [],
+      });
+
+      const { result, logs } = await harness.executeOnce();
+
+      expect(result?.success).toBeFalse();
+      expect(logs).toContain(
+        jasmine.objectContaining<logging.LogEntry>({
+          message: jasmine.stringMatching('./src/test-style.css:1:0 - Error'),
+        }),
+      );
+    });
+  });
+});
diff --git a/packages/angular_devkit/build_angular/src/builders/browser/tests/options/allowed-common-js-dependencies_spec.ts b/packages/angular_devkit/build_angular/src/builders/browser/tests/options/allowed-common-js-dependencies_spec.ts
index 05e23a758b5b..720af1436b05 100644
--- a/packages/angular_devkit/build_angular/src/builders/browser/tests/options/allowed-common-js-dependencies_spec.ts
+++ b/packages/angular_devkit/build_angular/src/builders/browser/tests/options/allowed-common-js-dependencies_spec.ts
@@ -14,26 +14,6 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
   describe('Option: "allowedCommonJsDependencies"', () => {
     describe('given option is not set', () => {
       for (const aot of [true, false]) {
-        it(`should not show warning for styles import in ${aot ? 'AOT' : 'JIT'} Mode`, async () => {
-          await harness.writeFile('./test.css', `body { color: red; };`);
-          await harness.appendToFile('src/app/app.component.ts', `import '../../test.css';`);
-
-          harness.useTarget('build', {
-            ...BASE_OPTIONS,
-            allowedCommonJsDependencies: [],
-            aot,
-          });
-
-          const { result, logs } = await harness.executeOnce();
-
-          expect(result?.success).toBe(true);
-          expect(logs).not.toContain(
-            jasmine.objectContaining<logging.LogEntry>({
-              message: jasmine.stringMatching(/CommonJS or AMD dependencies/),
-            }),
-          );
-        });
-
         it(`should show warning when depending on a Common JS bundle in ${
           aot ? 'AOT' : 'JIT'
         } Mode`, async () => {
diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts b/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts
index 113207908177..ea81a57a6f4c 100644
--- a/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts
+++ b/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts
@@ -384,6 +384,7 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
               {
                 use: componentStyleLoaders,
                 type: 'asset/source',
+                resourceQuery: /\?ngResource/,
               },
             ],
           },