fix(webpack|angular): styleUrls with platform suffixes

Author: rigor789

packages/webpack5/__tests__/configuration/__snapshots__/angular.spec.ts.snap

@@ -112,7 +112,7 @@ exports[`angular configuration for android 1`] = `
       {
         test: /\\\\.css$/,
         exclude: [
-          /\\\\.component\\\\.css$/
+          /\\\\.component(\\\\.\\\\w+)?\\\\.css$/
         ],
         use: [
           /* config.module.rule('css').use('apply-css-loader') */
@@ -140,7 +140,7 @@ exports[`angular configuration for android 1`] = `
       {
         test: /\\\\.scss$/,
         exclude: [
-          /\\\\.component\\\\.scss$/
+          /\\\\.component(\\\\.\\\\w+)?\\\\.scss$/
         ],
         use: [
           /* config.module.rule('scss').use('apply-css-loader') */
@@ -197,7 +197,7 @@ exports[`angular configuration for android 1`] = `
       },
       /* config.module.rule('css|component') */
       {
-        test: /\\\\.component\\\\.css$/,
+        test: /\\\\.component(\\\\.\\\\w+)?\\\\.css$/,
         use: [
           /* config.module.rule('css|component').use('raw-loader') */
           {
@@ -207,7 +207,7 @@ exports[`angular configuration for android 1`] = `
       },
       /* config.module.rule('scss|component') */
       {
-        test: /\\\\.component\\\\.scss$/,
+        test: /\\\\.component(\\\\.\\\\w+)?\\\\.scss$/,
         use: [
           /* config.module.rule('scss|component').use('raw-loader') */
           {
@@ -331,6 +331,7 @@ exports[`angular configuration for android 1`] = `
       {
         tsConfigPath: '__jest__/tsconfig.json',
         mainPath: '__jest__/src/app.js',
+        hostReplacementPaths: function () { /* omitted long function */ },
         platformTransformers: [
           function () { /* omitted long function */ }
         ]
@@ -460,7 +461,7 @@ exports[`angular configuration for ios 1`] = `
       {
         test: /\\\\.css$/,
         exclude: [
-          /\\\\.component\\\\.css$/
+          /\\\\.component(\\\\.\\\\w+)?\\\\.css$/
         ],
         use: [
           /* config.module.rule('css').use('apply-css-loader') */
@@ -488,7 +489,7 @@ exports[`angular configuration for ios 1`] = `
       {
         test: /\\\\.scss$/,
         exclude: [
-          /\\\\.component\\\\.scss$/
+          /\\\\.component(\\\\.\\\\w+)?\\\\.scss$/
         ],
         use: [
           /* config.module.rule('scss').use('apply-css-loader') */
@@ -545,7 +546,7 @@ exports[`angular configuration for ios 1`] = `
       },
       /* config.module.rule('css|component') */
       {
-        test: /\\\\.component\\\\.css$/,
+        test: /\\\\.component(\\\\.\\\\w+)?\\\\.css$/,
         use: [
           /* config.module.rule('css|component').use('raw-loader') */
           {
@@ -555,7 +556,7 @@ exports[`angular configuration for ios 1`] = `
       },
       /* config.module.rule('scss|component') */
       {
-        test: /\\\\.component\\\\.scss$/,
+        test: /\\\\.component(\\\\.\\\\w+)?\\\\.scss$/,
         use: [
           /* config.module.rule('scss|component').use('raw-loader') */
           {
@@ -679,6 +680,7 @@ exports[`angular configuration for ios 1`] = `
       {
         tsConfigPath: '__jest__/tsconfig.json',
         mainPath: '__jest__/src/app.js',
+        hostReplacementPaths: function () { /* omitted long function */ },
         platformTransformers: [
           function () { /* omitted long function */ }
         ]

packages/webpack5/src/configuration/angular.ts

@@ -1,14 +1,17 @@
 import Config from 'webpack-chain';
 import { existsSync } from 'fs';
+import { extname } from 'path';
 
+import { getEntryPath, getPlatformName } from '../helpers/platform';
 import { getProjectFilePath } from '../helpers/project';
 import { env as _env, IWebpackEnv } from '../index';
-import { getEntryPath } from '../helpers/platform';
 import base from './base';
 
 export default function (config: Config, env: IWebpackEnv = _env): Config {
 	base(config, env);
 
+	const platform = getPlatformName();
+
 	const tsConfigPath = [
 		getProjectFilePath('tsconfig.app.json'),
 		getProjectFilePath('tsconfig.json'),
@@ -43,12 +46,15 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 		.loader('raw-loader');
 
 	// exclude component css files from the normal css rule
-	config.module.rule('css').exclude.add(/\.component\.css$/);
+	config.module
+		.rule('css')
+		.exclude// exclude *.component.{platform}.css
+		.add(/\.component(\.\w+)?\.css$/);
 
 	// and instead use raw-loader, since that's what angular expects
 	config.module
 		.rule('css|component')
-		.test(/\.component\.css$/)
+		.test(/\.component(\.\w+)?\.css$/)
 		.use('raw-loader')
 		.loader('raw-loader');
 
@@ -59,12 +65,15 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 		.get('options');
 
 	// exclude component css files from the normal css rule
-	config.module.rule('scss').exclude.add(/\.component\.scss$/);
+	config.module
+		.rule('scss')
+		.exclude// exclude *.component.{platform}.scss
+		.add(/\.component(\.\w+)?\.scss$/);
 
 	// and instead use raw-loader, since that's what angular expects
 	config.module
 		.rule('scss|component')
-		.test(/\.component\.scss$/)
+		.test(/\.component(\.\w+)?\.scss$/)
 		.use('raw-loader')
 		.loader('raw-loader')
 		.end()
@@ -79,6 +88,25 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 		{
 			tsConfigPath,
 			mainPath: getEntryPath(),
+			hostReplacementPaths(path: string) {
+				const ext = extname(path);
+				const platformExt = `.${platform}${ext}`;
+
+				// already includes a platform specific extension - ignore
+				if (path.includes(platformExt)) {
+					return path;
+				}
+
+				const platformPath = path.replace(ext, platformExt);
+				// check if the same file exists with a platform suffix and return if it does.
+				if (existsSync(platformPath)) {
+					// console.log(`[hostReplacementPaths] resolving "${path}" to "${platformPath}"`);
+					return platformPath;
+				}
+
+				// just return the original path otherwise
+				return path;
+			},
 			platformTransformers: [require('../transformers/NativeClass').default],
 		},
 	]);
@@ -110,7 +138,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 	return config;
 }
 
-function getAngularCompilerPlugin() {
+function getAngularCompilerPlugin(): any {
 	const { AngularCompilerPlugin } = require('@ngtools/webpack');
 	return AngularCompilerPlugin;
 }