From b059fc73597c12330a96fca5f6ab9b1ca226136c Mon Sep 17 00:00:00 2001
From: Alan Agius <alanagius@google.com>
Date: Tue, 8 Nov 2022 18:06:53 +0000
Subject: [PATCH] fix(@angular-devkit/build-angular): warn when components
 styles sourcemaps are not generated when styles optimization is enabled

With this change we add a warning to inform the users that sourcemaps are not generated when both styles sourcemaps and optimization are enabled. This is because component style sourcemaps are inline which would drastically increase the bundle size.

Closes #22834

(cherry picked from commit c83aaedb2975c8ff26375af1842b823a409c5868)
---
 .../src/webpack/configs/styles.ts             | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

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 08a690d928b4..b396c329cb29 100644
--- a/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts
+++ b/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts
@@ -35,7 +35,7 @@ import {
 
 // eslint-disable-next-line max-lines-per-function
 export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
-  const { root, buildOptions } = wco;
+  const { root, buildOptions, logger } = wco;
   const extraPlugins: Configuration['plugins'] = [];
 
   extraPlugins.push(new AnyComponentStyleBudgetChecker(buildOptions.budgets));
@@ -93,7 +93,7 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
       tailwindPackagePath = require.resolve('tailwindcss', { paths: [wco.root] });
     } catch {
       const relativeTailwindConfigPath = path.relative(wco.root, tailwindConfigPath);
-      wco.logger.warn(
+      logger.warn(
         `Tailwind CSS configuration file found (${relativeTailwindConfigPath})` +
           ` but the 'tailwindcss' package is not installed.` +
           ` To enable Tailwind CSS, please install the 'tailwindcss' package.`,
@@ -137,16 +137,22 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
     return optionGenerator;
   };
 
-  // load component css as raw strings
-  const componentsSourceMap = !!(
-    cssSourceMap &&
-    // Never use component css sourcemap when style optimizations are on.
-    // It will just increase bundle size without offering good debug experience.
-    !buildOptions.optimization.styles.minify &&
-    // Inline all sourcemap types except hidden ones, which are the same as no sourcemaps
-    // for component css.
-    !buildOptions.sourceMap.hidden
-  );
+  let componentsSourceMap = !!cssSourceMap;
+  if (cssSourceMap) {
+    if (buildOptions.optimization.styles.minify) {
+      // Never use component css sourcemap when style optimizations are on.
+      // It will just increase bundle size without offering good debug experience.
+      logger.warn(
+        'Components styles sourcemaps are not generated when styles optimization is enabled.',
+      );
+      componentsSourceMap = false;
+    } else if (buildOptions.sourceMap.hidden) {
+      // Inline all sourcemap types except hidden ones, which are the same as no sourcemaps
+      // for component css.
+      logger.warn('Components styles sourcemaps are not generated when sourcemaps are hidden.');
+      componentsSourceMap = false;
+    }
+  }
 
   // extract global css from js files into own css file.
   extraPlugins.push(new MiniCssExtractPlugin({ filename: `[name]${hashFormat.extract}.css` }));