feat: extract platforms

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

@@ -72,6 +72,17 @@ exports[`angular configuration for android 1`] = `
           /* config.module.rule('css').use('css2json-loader') */
           {
             loader: 'css2json-loader'
+          },
+          /* config.module.rule('css').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
           }
         ]
       },
@@ -87,6 +98,17 @@ exports[`angular configuration for android 1`] = `
           {
             loader: 'css2json-loader'
           },
+          /* config.module.rule('scss').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
+          },
           /* config.module.rule('scss').use('sass-loader') */
           {
             loader: 'sass-loader'
@@ -310,6 +332,17 @@ exports[`angular configuration for ios 1`] = `
           /* config.module.rule('css').use('css2json-loader') */
           {
             loader: 'css2json-loader'
+          },
+          /* config.module.rule('css').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
           }
         ]
       },
@@ -325,6 +358,17 @@ exports[`angular configuration for ios 1`] = `
           {
             loader: 'css2json-loader'
           },
+          /* config.module.rule('scss').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
+          },
           /* config.module.rule('scss').use('sass-loader') */
           {
             loader: 'sass-loader'

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

@@ -94,6 +94,17 @@ exports[`javascript configuration for android 1`] = `
           /* config.module.rule('css').use('css2json-loader') */
           {
             loader: 'css2json-loader'
+          },
+          /* config.module.rule('css').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
           }
         ]
       },
@@ -109,6 +120,17 @@ exports[`javascript configuration for android 1`] = `
           {
             loader: 'css2json-loader'
           },
+          /* config.module.rule('scss').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
+          },
           /* config.module.rule('scss').use('sass-loader') */
           {
             loader: 'sass-loader'
@@ -338,6 +360,17 @@ exports[`javascript configuration for ios 1`] = `
           /* config.module.rule('css').use('css2json-loader') */
           {
             loader: 'css2json-loader'
+          },
+          /* config.module.rule('css').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
           }
         ]
       },
@@ -353,6 +386,17 @@ exports[`javascript configuration for ios 1`] = `
           {
             loader: 'css2json-loader'
           },
+          /* config.module.rule('scss').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
+          },
           /* config.module.rule('scss').use('sass-loader') */
           {
             loader: 'sass-loader'

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

@@ -108,6 +108,17 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR
           /* config.module.rule('css').use('css2json-loader') */
           {
             loader: 'css2json-loader'
+          },
+          /* config.module.rule('css').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
           }
         ]
       },
@@ -123,6 +134,17 @@ exports[`react configuration > android > adds ReactRefreshWebpackPlugin when HMR
           {
             loader: 'css2json-loader'
           },
+          /* config.module.rule('scss').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
+          },
           /* config.module.rule('scss').use('sass-loader') */
           {
             loader: 'sass-loader'
@@ -347,6 +369,17 @@ exports[`react configuration > android > base config 1`] = `
           /* config.module.rule('css').use('css2json-loader') */
           {
             loader: 'css2json-loader'
+          },
+          /* config.module.rule('css').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
           }
         ]
       },
@@ -362,6 +395,17 @@ exports[`react configuration > android > base config 1`] = `
           {
             loader: 'css2json-loader'
           },
+          /* config.module.rule('scss').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
+          },
           /* config.module.rule('scss').use('sass-loader') */
           {
             loader: 'sass-loader'
@@ -586,6 +630,17 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena
           /* config.module.rule('css').use('css2json-loader') */
           {
             loader: 'css2json-loader'
+          },
+          /* config.module.rule('css').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
           }
         ]
       },
@@ -601,6 +656,17 @@ exports[`react configuration > ios > adds ReactRefreshWebpackPlugin when HMR ena
           {
             loader: 'css2json-loader'
           },
+          /* config.module.rule('scss').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
+          },
           /* config.module.rule('scss').use('sass-loader') */
           {
             loader: 'sass-loader'
@@ -828,6 +894,17 @@ exports[`react configuration > ios > base config 1`] = `
           /* config.module.rule('css').use('css2json-loader') */
           {
             loader: 'css2json-loader'
+          },
+          /* config.module.rule('css').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
           }
         ]
       },
@@ -843,6 +920,17 @@ exports[`react configuration > ios > base config 1`] = `
           {
             loader: 'css2json-loader'
           },
+          /* config.module.rule('scss').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
+          },
           /* config.module.rule('scss').use('sass-loader') */
           {
             loader: 'sass-loader'

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

@@ -95,6 +95,17 @@ exports[`svelte configuration for android 1`] = `
           /* config.module.rule('css').use('css2json-loader') */
           {
             loader: 'css2json-loader'
+          },
+          /* config.module.rule('css').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
           }
         ]
       },
@@ -110,6 +121,17 @@ exports[`svelte configuration for android 1`] = `
           {
             loader: 'css2json-loader'
           },
+          /* config.module.rule('scss').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
+          },
           /* config.module.rule('scss').use('sass-loader') */
           {
             loader: 'sass-loader'
@@ -347,6 +369,17 @@ exports[`svelte configuration for ios 1`] = `
           /* config.module.rule('css').use('css2json-loader') */
           {
             loader: 'css2json-loader'
+          },
+          /* config.module.rule('css').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
           }
         ]
       },
@@ -362,6 +395,17 @@ exports[`svelte configuration for ios 1`] = `
           {
             loader: 'css2json-loader'
           },
+          /* config.module.rule('scss').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
+          },
           /* config.module.rule('scss').use('sass-loader') */
           {
             loader: 'sass-loader'

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

@@ -99,6 +99,17 @@ exports[`vue configuration for android 1`] = `
           /* config.module.rule('css').use('css2json-loader') */
           {
             loader: 'css2json-loader'
+          },
+          /* config.module.rule('css').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
           }
         ]
       },
@@ -114,6 +125,17 @@ exports[`vue configuration for android 1`] = `
           {
             loader: 'css2json-loader'
           },
+          /* config.module.rule('scss').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
+          },
           /* config.module.rule('scss').use('sass-loader') */
           {
             loader: 'sass-loader'
@@ -353,6 +375,17 @@ exports[`vue configuration for ios 1`] = `
           /* config.module.rule('css').use('css2json-loader') */
           {
             loader: 'css2json-loader'
+          },
+          /* config.module.rule('css').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
           }
         ]
       },
@@ -368,6 +401,17 @@ exports[`vue configuration for ios 1`] = `
           {
             loader: 'css2json-loader'
           },
+          /* config.module.rule('scss').use('postcss-loader') */
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: [
+                  'postcss-import'
+                ]
+              }
+            }
+          },
           /* config.module.rule('scss').use('sass-loader') */
           {
             loader: 'sass-loader'

packages/webpack5/src/configuration/base.ts

@@ -11,17 +11,17 @@ import { PlatformSuffixPlugin } from '../plugins/PlatformSuffixPlugin';
 import { addCopyRule, applyCopyRules } from '../helpers/copyRules';
 import { WatchStatePlugin } from '../plugins/WatchStatePlugin';
 import { hasDependency } from '../helpers/dependencies';
+import { getPlatformName } from '../platforms';
 import { IWebpackEnv } from '../index';
 import {
 	getAbsoluteDistPath,
 	getEntryDirPath,
 	getEntryPath,
-	getPlatform,
 } from '../helpers/project';
 
 export default function (config: Config, env: IWebpackEnv): Config {
 	const entryPath = getEntryPath();
-	const platform = getPlatform();
+	const platform = getPlatformName();
 	const mode = env.production ? 'production' : 'development';
 
 	// set mode
@@ -51,7 +51,7 @@ export default function (config: Config, env: IWebpackEnv): Config {
 		.add(entryPath);
 
 	// inspector_modules
-	config.when(shouldIncludeInspectorModules(env), (config) => {
+	config.when(shouldIncludeInspectorModules(), (config) => {
 		config
 			.entry('tns_modules/@nativescript/core/inspector_modules')
 			.add('@nativescript/core/inspector_modules');
@@ -272,8 +272,8 @@ export default function (config: Config, env: IWebpackEnv): Config {
 	return config;
 }
 
-function shouldIncludeInspectorModules(env: IWebpackEnv): boolean {
+function shouldIncludeInspectorModules(): boolean {
-	const platform = getPlatform();
+	const platform = getPlatformName();
 	// todo: check if core modules are external
 	// todo: check if we are testing
 	return platform === 'ios';

packages/webpack5/src/configuration/react.ts

@@ -2,13 +2,13 @@ import { merge } from 'webpack-merge';
 import Config from 'webpack-chain';
 
 import { env as _env, IWebpackEnv } from '../index';
-import { getPlatform } from '../helpers/project';
+import { getPlatformName } from '../platforms';
 import base from './base';
 
 export default function (config: Config, env: IWebpackEnv = _env): Config {
 	base(config, env);
 
-	const platform = getPlatform();
+	const platform = getPlatformName();
 	const mode = env.production ? 'production' : 'development';
 	const production = mode === 'production';
 

packages/webpack5/src/configuration/svelte.ts

@@ -1,15 +1,16 @@
 import svelteNativePreprocessor from 'svelte-native-preprocessor';
 import Config from 'webpack-chain';
 
+import { getProjectRootPath } from '../helpers/project';
 import { env as _env, IWebpackEnv } from '../index';
-import { getPlatform, getProjectRootPath } from '../helpers/project';
+import { getPlatformName } from '../platforms';
-import base from './base';
 import { error } from '../helpers/log';
+import base from './base';
 
 export default function (config: Config, env: IWebpackEnv = _env): Config {
 	base(config, env);
 
-	const platform = getPlatform();
+	const platform = getPlatformName();
 	const mode = env.production ? 'production' : 'development';
 	const production = mode === 'production';
 

packages/webpack5/src/configuration/vue.ts

@@ -3,13 +3,13 @@ import { merge } from 'webpack-merge';
 import Config from 'webpack-chain';
 
 import { env as _env, IWebpackEnv } from '../index';
-import { getPlatform } from '../helpers/project';
+import { getPlatformName } from '../platforms';
 import base from './base';
 
 export default function (config: Config, env: IWebpackEnv = _env): Config {
 	base(config, env);
 
-	const platform = getPlatform();
+	const platform = getPlatformName();
 
 	// resolve .vue files
 	// the order is reversed because we are using prepend!

packages/webpack5/src/helpers/index.ts

@@ -15,9 +15,9 @@ import {
 	getEntryPath,
 	getEntryDirPath,
 	getPackageJson,
-	getPlatform,
 	getProjectRootPath,
 } from './project';
+import { getPlatform, getPlatformName, addPlatform } from '../platforms';
 
 // intentionally populated manually
 // as this generates nicer typings
@@ -50,7 +50,11 @@ export default {
 		getEntryPath,
 		getEntryDirPath,
 		getDistPath,
-		getPlatform,
 		getPackageJson,
 	},
+	platform: {
+		getPlatform,
+		getPlatformName,
+		addPlatform,
+	},
 };

packages/webpack5/src/helpers/project.ts

@@ -1,20 +1,20 @@
-import { resolve, basename, dirname } from 'path';
+import { resolve, dirname } from 'path';
 
-import { env, Platform } from '../index';
+import { getPlatform } from '../platforms';
-import { error } from './log';
 
 export function getProjectRootPath(): string {
-	// todo: find actual path?
-
 	return process.cwd();
-	//__dirname
-}
-
-export function getAbsoluteDistPath() {
-	return resolve(getProjectRootPath(), getDistPath());
 }
 
 export function getEntryPath() {
+	const platform = getPlatform();
+
+	// use platform specific entry path
+	if (platform.getEntryPath) {
+		return platform.getEntryPath();
+	}
+
+	// fallback to main field in package.json
 	const packageJson = getPackageJson();
 
 	return resolve(getProjectRootPath(), packageJson.main);
@@ -25,30 +25,19 @@ export function getEntryDirPath() {
 }
 
 export function getDistPath() {
-	if (env.ios) {
+	const platform = getPlatform();
-		const appName = basename(getProjectRootPath());
+
-		return `platforms/ios/${appName}/app`;
+	// use platform specific entry path
+	if (platform.getDistPath) {
+		return platform.getDistPath();
 	}
 
-	if (env.android) {
+	// fallback to a generic dist folder
-		return `platforms/android/app/src/main/assets/app`;
+	return 'dist';
-	}
-
-	// todo: additional platforms
-	// perhaps we could combine platform specifics into "plugins"
-	// 3rd party platforms would be treated the same
 }
 
-export function getPlatform(): Platform {
+export function getAbsoluteDistPath() {
-	if (env?.android) {
+	return resolve(getProjectRootPath(), getDistPath());
-		return 'android';
-	}
-
-	if (env?.ios) {
-		return 'ios';
-	}
-
-	error('You need to provide a target platform!');
 }
 
 interface IPackageJson {

packages/webpack5/src/index.ts

@@ -21,6 +21,8 @@ export interface IWebpackEnv {
 
 	android?: boolean;
 	ios?: boolean;
+	// for custom platforms
+	platform?: string;
 
 	production?: boolean;
 	report?: boolean;

packages/webpack5/src/platforms/android.ts

@@ -0,0 +1,11 @@
+import { INativeScriptPlatform } from '.';
+
+function getDistPath() {
+	return `platforms/android/app/src/main/assets/app`;
+}
+
+const AndroidPlatform: INativeScriptPlatform = {
+	getDistPath,
+}
+
+export default AndroidPlatform;

packages/webpack5/src/platforms/index.ts

@@ -0,0 +1,47 @@
+import { error } from "../helpers/log";
+import { env, Platform } from "../";
+
+import AndroidPlatform from "./android";
+import iOSPlatform from "./ios";
+
+export interface INativeScriptPlatform {
+	getEntryPath?(): string;
+	getDistPath?(): string
+}
+
+const platforms = {
+	android: AndroidPlatform,
+	ios: iOSPlatform,
+}
+
+export function addPlatform(name: string, platform: INativeScriptPlatform) {
+	console.log('adding platform', name, platform)
+	platforms[name] = platform;
+}
+
+export function getPlatform(): INativeScriptPlatform {
+	return platforms[getPlatformName()]
+}
+
+export function getPlatformName(): Platform {
+	if (env?.android) {
+		return 'android';
+	}
+
+	if (env?.ios) {
+		return 'ios';
+	}
+
+	// support custom platforms
+	if(env?.platform) {
+		return env.platform;
+	}
+
+	throw error(`
+		You need to provide a target platform!
+
+		Available platforms: ${Object.keys(platforms).join(', ')}
+
+		Use --env=platform=<platform> or --env=android, --env=ios to specify the target platform.
+	`);
+}

packages/webpack5/src/platforms/ios.ts

@@ -0,0 +1,15 @@
+import { basename } from "path";
+
+import { getProjectRootPath } from "../helpers/project";
+import { INativeScriptPlatform } from '.';
+
+function getDistPath() {
+	const appName = basename(getProjectRootPath());
+	return `platforms/ios/${appName}/app`;
+}
+
+const iOSPlatform: INativeScriptPlatform = {
+	getDistPath,
+}
+
+export default iOSPlatform;