fix(@angular-devkit/build-angular): account for package.json exports fields with CSS import statements

The `postcss-imports` package was previously used to support `@import` within CSS files. Unfortunately,
the package does not account for `package.json` exports fields. This prevents imports defined within that
field from working when used within a build.  The `css-loader` package does provide this functionality and
is now used to provide support for CSS `@import` instead of `postcss-imports`. This change does not affect
preprocessors that provide their own import behavior.

(cherry picked from commit 717bd03)

Author: clydin

package.json

@@ -185,7 +185,6 @@
     "piscina": "3.2.0",
     "popper.js": "^1.14.1",
     "postcss": "8.4.18",
-    "postcss-import": "15.0.0",
     "postcss-loader": "7.0.1",
     "prettier": "^2.0.0",
     "protractor": "~7.0.0",

packages/angular_devkit/build_angular/BUILD.bazel

@@ -162,7 +162,6 @@ ts_library(
         "@npm//parse5-html-rewriting-stream",
         "@npm//piscina",
         "@npm//postcss",
-        "@npm//postcss-import",
         "@npm//postcss-loader",
         "@npm//regenerator-runtime",
         "@npm//resolve-url-loader",

packages/angular_devkit/build_angular/package.json

@@ -48,7 +48,6 @@
     "parse5-html-rewriting-stream": "6.0.1",
     "piscina": "3.2.0",
     "postcss": "8.4.18",
-    "postcss-import": "15.0.0",
     "postcss-loader": "7.0.1",
     "regenerator-runtime": "0.13.9",
     "resolve-url-loader": "5.0.0",

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

@@ -174,6 +174,7 @@ describe('Browser Builder styles', () => {
       };
 
       const overrides = {
+        aot: true,
         sourceMap: true,
         styles: [`src/styles.${ext}`],
       };
@@ -301,10 +302,13 @@ describe('Browser Builder styles', () => {
 
     const overrides = { optimization: false };
     const { files } = await browserBuild(architect, host, target, overrides);
-    expect(await files['styles.css']).toContain(tags.stripIndents`
+    const content = await files['styles.css'];
+    expect(content).toContain(tags.stripIndents`
       /* normal-comment */
       /*! important-comment */
-      section { -webkit-mask-composite: source-over; mask-composite: add; }
+      section { -webkit-mask-composite: source-over; mask-composite: add; }`);
+    // Check separately because Webpack may add source file comments inbetween the rules
+    expect(content).toContain(tags.stripIndents`
       /* normal-comment */
       /*! important-comment */
       div { -webkit-mask-composite: source-over; mask-composite: add; }`);

packages/angular_devkit/build_angular/src/builders/browser/specs/vendor-source-map_spec.ts

@@ -108,6 +108,7 @@ describe('Identifying third-party code in source maps', () => {
       './src/app/app.component.ts',
       './src/app/app.module.ts',
       './src/main.ts',
+      './src/app/app.component.css',
     ]);
 
     // Only some sources in the polyfills map are first-party.

packages/angular_devkit/build_angular/src/builders/server/tests/options/source-map_spec.ts

@@ -11,7 +11,8 @@ import { BASE_OPTIONS, SERVER_BUILDER_INFO, describeBuilder } from '../setup';
 
 describeBuilder(execute, SERVER_BUILDER_INFO, (harness) => {
   describe('Option: "sourceMap"', () => {
-    const INLINE_SOURCEMAP_MARKER = '/*# sourceMappingURL=data:application/json;base64,';
+    const INLINE_SOURCEMAP_MARKER =
+      '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,';
 
     beforeEach(async () => {
       await harness.writeFiles({

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

@@ -12,7 +12,6 @@ import * as path from 'path';
 import type { FileImporter } from 'sass';
 import { pathToFileURL } from 'url';
 import type { Configuration, LoaderContext, RuleSetUseItem } from 'webpack';
-import { StyleElement } from '../../builders/browser/schema';
 import { SassWorkerImplementation } from '../../sass/sass-service';
 import { SassLegacyWorkerImplementation } from '../../sass/sass-service-legacy';
 import { WebpackConfigOptions } from '../../utils/build-options';
@@ -28,13 +27,12 @@ import { StylesWebpackPlugin } from '../plugins/styles-webpack-plugin';
 import {
   assetNameTemplateFactory,
   getOutputHashFormat,
-  normalizeExtraEntryPoints,
   normalizeGlobalStyles,
 } from '../utils/helpers';
 
 // eslint-disable-next-line max-lines-per-function
 export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
-  const { root, projectRoot, buildOptions } = wco;
+  const { root, buildOptions } = wco;
   const extraPlugins: Configuration['plugins'] = [];
 
   extraPlugins.push(new AnyComponentStyleBudgetChecker(buildOptions.budgets));
@@ -103,35 +101,17 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
     }
   }
 
-  const postcssImports = require('postcss-import');
   const autoprefixer: typeof import('autoprefixer') = require('autoprefixer');
 
   const postcssOptionsCreator = (inlineSourcemaps: boolean, extracted: boolean) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const optionGenerator = (loader: any) => ({
+    const optionGenerator = (loader: LoaderContext<unknown>) => ({
       map: inlineSourcemaps
         ? {
             inline: true,
             annotation: false,
           }
         : undefined,
       plugins: [
-        postcssImports({
-          load: (filename: string) => {
-            return new Promise<string>((resolve, reject) => {
-              loader.fs.readFile(filename, (err: Error, data: Buffer) => {
-                if (err) {
-                  reject(err);
-
-                  return;
-                }
-
-                const content = data.toString();
-                resolve(content);
-              });
-            });
-          },
-        }),
         PostcssCliResources({
           baseHref: buildOptions.baseHref,
           deployUrl: buildOptions.deployUrl,
@@ -178,6 +158,16 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
   const postCssLoaderPath = require.resolve('postcss-loader');
 
   const componentStyleLoaders: RuleSetUseItem[] = [
+    {
+      loader: require.resolve('css-loader'),
+      options: {
+        url: false,
+        sourceMap: componentsSourceMap,
+        importLoaders: 1,
+        exportType: 'string',
+        esModule: false,
+      },
+    },
     {
       loader: postCssLoaderPath,
       options: {
@@ -196,6 +186,7 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
       options: {
         url: false,
         sourceMap: !!cssSourceMap,
+        importLoaders: 1,
       },
     },
     {
@@ -294,7 +285,6 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
               // Component styles are all styles except defined global styles
               {
                 use: componentStyleLoaders,
-                type: 'asset/source',
                 resourceQuery: /\?ngResource/,
               },
             ],