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

Author: alan-agius4

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.`,
@@ -148,6 +148,12 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
     !buildOptions.sourceMap.hidden
   );
 
+  if (!componentsSourceMap && cssSourceMap) {
+    logger.warn(
+      'Components styles sourcemaps are not generated when styles optimization is enabled.',
+    );
+  }
+
   // extract global css from js files into own css file.
   extraPlugins.push(new MiniCssExtractPlugin({ filename: `[name]${hashFormat.extract}.css` }));