From cb91cd8a3ff7c034261160c68ef4ef21c0088ffe Mon Sep 17 00:00:00 2001
From: Igor Randjelovic <rigor789@gmail.com>
Date: Tue, 3 Aug 2021 14:37:58 +0200
Subject: [PATCH] fix(webpack): angular component css handling (#9434)

* feat: use raw-loader for all css but app.s?css

* feat: use angular css rules for entire app dir

Co-authored-by: Eduardo Speroni <edusperoni@gmail.com>
---
 .../__snapshots__/angular.spec.ts.snap        | 40 +++++++++----------
 .../webpack5/src/configuration/angular.ts     | 22 +++++++---
 2 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap b/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap
index 76cdb10fa..c2f2a5a1d 100644
--- a/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap
+++ b/packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap
@@ -123,10 +123,7 @@ exports[`angular configuration for android 1`] = `
       },
       /* config.module.rule('css') */
       {
-        test: /\\\\.css$/,
-        exclude: [
-          /\\\\.component(\\\\.\\\\w+)?\\\\.css$/
-        ],
+        test: /app(\\\\.\\\\w+)?\\\\.css$/,
         use: [
           /* config.module.rule('css').use('apply-css-loader') */
           {
@@ -151,10 +148,7 @@ exports[`angular configuration for android 1`] = `
       },
       /* config.module.rule('scss') */
       {
-        test: /\\\\.scss$/,
-        exclude: [
-          /\\\\.component(\\\\.\\\\w+)?\\\\.scss$/
-        ],
+        test: /app(\\\\.\\\\w+)?\\\\.scss$/,
         use: [
           /* config.module.rule('scss').use('apply-css-loader') */
           {
@@ -210,7 +204,10 @@ exports[`angular configuration for android 1`] = `
       },
       /* config.module.rule('css|component') */
       {
-        test: /\\\\.component(\\\\.\\\\w+)?\\\\.css$/,
+        test: /\\\\.css$/,
+        exclude: [
+          /app(\\\\.\\\\w+)?\\\\.css$/
+        ],
         use: [
           /* config.module.rule('css|component').use('raw-loader') */
           {
@@ -220,7 +217,10 @@ exports[`angular configuration for android 1`] = `
       },
       /* config.module.rule('scss|component') */
       {
-        test: /\\\\.component(\\\\.\\\\w+)?\\\\.scss$/,
+        test: /\\\\.scss$/,
+        exclude: [
+          /app(\\\\.\\\\w+)?\\\\.scss$/
+        ],
         use: [
           /* config.module.rule('scss|component').use('raw-loader') */
           {
@@ -494,10 +494,7 @@ exports[`angular configuration for ios 1`] = `
       },
       /* config.module.rule('css') */
       {
-        test: /\\\\.css$/,
-        exclude: [
-          /\\\\.component(\\\\.\\\\w+)?\\\\.css$/
-        ],
+        test: /app(\\\\.\\\\w+)?\\\\.css$/,
         use: [
           /* config.module.rule('css').use('apply-css-loader') */
           {
@@ -522,10 +519,7 @@ exports[`angular configuration for ios 1`] = `
       },
       /* config.module.rule('scss') */
       {
-        test: /\\\\.scss$/,
-        exclude: [
-          /\\\\.component(\\\\.\\\\w+)?\\\\.scss$/
-        ],
+        test: /app(\\\\.\\\\w+)?\\\\.scss$/,
         use: [
           /* config.module.rule('scss').use('apply-css-loader') */
           {
@@ -581,7 +575,10 @@ exports[`angular configuration for ios 1`] = `
       },
       /* config.module.rule('css|component') */
       {
-        test: /\\\\.component(\\\\.\\\\w+)?\\\\.css$/,
+        test: /\\\\.css$/,
+        exclude: [
+          /app(\\\\.\\\\w+)?\\\\.css$/
+        ],
         use: [
           /* config.module.rule('css|component').use('raw-loader') */
           {
@@ -591,7 +588,10 @@ exports[`angular configuration for ios 1`] = `
       },
       /* config.module.rule('scss|component') */
       {
-        test: /\\\\.component(\\\\.\\\\w+)?\\\\.scss$/,
+        test: /\\\\.scss$/,
+        exclude: [
+          /app(\\\\.\\\\w+)?\\\\.scss$/
+        ],
         use: [
           /* config.module.rule('scss|component').use('raw-loader') */
           {
diff --git a/packages/webpack5/src/configuration/angular.ts b/packages/webpack5/src/configuration/angular.ts
index 21183500f..2cdafcae2 100644
--- a/packages/webpack5/src/configuration/angular.ts
+++ b/packages/webpack5/src/configuration/angular.ts
@@ -52,13 +52,18 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 	// exclude component css files from the normal css rule
 	config.module
 		.rule('css')
-		.exclude // exclude *.component.{platform}.css
-		.add(/\.component(\.\w+)?\.css$/);
+		.include.add(resolve(getEntryDirPath(), 'app.css'))
+		.add(resolve(getEntryDirPath(), `app.${platform}.css`))
+		.add(/node_modules/);
 
 	// and instead use raw-loader, since that's what angular expects
 	config.module
 		.rule('css|component')
-		.test(/\.component(\.\w+)?\.css$/)
+		.exclude.add(resolve(getEntryDirPath(), 'app.css'))
+		.add(resolve(getEntryDirPath(), `app.${platform}.css`))
+		.add(/node_modules/)
+		.end()
+		.test(/\.css$/)
 		.use('raw-loader')
 		.loader('raw-loader');
 
@@ -71,13 +76,18 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 	// exclude component css files from the normal css rule
 	config.module
 		.rule('scss')
-		.exclude // exclude *.component.{platform}.scss
-		.add(/\.component(\.\w+)?\.scss$/);
+		.include.add(resolve(getEntryDirPath(), 'app.scss'))
+		.add(resolve(getEntryDirPath(), `app.${platform}.scss`))
+		.add(/node_modules/);
 
 	// and instead use raw-loader, since that's what angular expects
 	config.module
 		.rule('scss|component')
-		.test(/\.component(\.\w+)?\.scss$/)
+		.exclude.add(resolve(getEntryDirPath(), 'app.css'))
+		.add(resolve(getEntryDirPath(), `app.${platform}.css`))
+		.add(/node_modules/)
+		.end()
+		.test(/\.scss$/)
 		.use('raw-loader')
 		.loader('raw-loader')
 		.end()