fix(@angular-devkit/build-angular): differentiate components and global styles using file query instead of filename

Previously, we introduced the `ngResource` query to Angular component resources we now use it with `resourceQuery` to differentiate between global and components styles, since in some cases while unlikely a file can be used as a component and global style.

Closes #7245

Author: alan-agius4

packages/angular_devkit/build_angular/src/builders/browser/specs/styles_spec.ts

@@ -655,4 +655,26 @@ describe('Browser Builder styles', () => {
     result = await browserBuild(architect, host, target, { optimization: true });
     expect(await result.files['styles.css']).toContain('rgba(0,0,0,.15)');
   });
+
+  it('works when using the same css file in `styles` and `stylesUrl`', async () => {
+    host.writeMultipleFiles({
+      'src/styles.css': `
+        div { color: red }
+      `,
+      './src/app/app.component.ts': `
+        import { Component } from '@angular/core';
+
+        @Component({
+          selector: 'app-root',
+          templateUrl: './app.component.html',
+          styleUrls: ['../styles.css']
+        })
+        export class AppComponent {
+          title = 'app';
+        }
+      `,
+    });
+
+    await browserBuild(architect, host, target, { styles: ['src/styles.css'] });
+  });
 });

packages/angular_devkit/build_angular/src/builders/browser/tests/options/named-chunks_spec.ts

@@ -11,7 +11,7 @@ import { BASE_OPTIONS, BROWSER_BUILDER_INFO, describeBuilder } from '../setup';
 
 const MAIN_OUTPUT = 'dist/main.js';
 const NAMED_LAZY_OUTPUT = 'dist/src_lazy-module_ts.js';
-const UNNAMED_LAZY_OUTPUT = 'dist/8.js';
+const UNNAMED_LAZY_OUTPUT = 'dist/459.js';
 
 describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
   describe('Option: "namedChunks"', () => {

packages/angular_devkit/build_angular/src/webpack/configs/styles.ts

@@ -379,14 +379,14 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
             oneOf: [
               // Component styles are all styles except defined global styles
               {
-                exclude: globalStylePaths,
                 use: componentStyleLoaders,
+                resourceQuery: /\?ngResource/,
                 type: 'asset/source',
               },
               // Global styles are only defined global styles
               {
-                include: globalStylePaths,
                 use: globalStyleLoaders,
+                resourceQuery: { not: [/\?ngResource/] },
               },
             ],
           },

tests/legacy-cli/e2e/tests/build/worker.ts

@@ -6,19 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { join } from 'path';
-import {
-  appendToFile,
-  expectFileToExist,
-  expectFileToMatch,
-  replaceInFile,
-  writeFile,
-} from '../../utils/fs';
+import { expectFileToExist, expectFileToMatch, replaceInFile, writeFile } from '../../utils/fs';
 import { ng } from '../../utils/process';
 
 export default async function () {
-  const workerPath = join('src', 'app', 'app.worker.ts');
-  const snippetPath = join('src', 'app', 'app.component.ts');
+  const workerPath = 'src/app/app.worker.ts';
+  const snippetPath = 'src/app/app.component.ts';
   const projectTsConfig = 'tsconfig.json';
   const workerTsConfig = 'tsconfig.worker.json';
 
@@ -33,7 +26,7 @@ export default async function () {
   await expectFileToMatch('dist/test-project/main.js', 'src_app_app_worker_ts');
 
   await ng('build', '--output-hashing=none');
-  const chunkId = '310';
+  const chunkId = '151';
   await expectFileToExist(`dist/test-project/${chunkId}.js`);
   await expectFileToMatch('dist/test-project/main.js', chunkId);