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.

Author: alan-agius4

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