fix(@angular-devkit/build-angular): fail build when importing CSS files as an ECMA modules

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'),
+        }),
+      );
+    });
+  });
+});

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 () => {

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/,
               },
             ],
           },