feat(core): make css parsers tree-shakable (#9496)

packages/webpack5/src/configuration/base.ts

@@ -15,6 +15,7 @@ import { applyFileReplacements } from '../helpers/fileReplacements';
 import { addCopyRule, applyCopyRules } from '../helpers/copyRules';
 import { WatchStatePlugin } from '../plugins/WatchStatePlugin';
 import { getProjectFilePath } from '../helpers/project';
+import { projectUsesCustomFlavor } from '../helpers/flavor';
 import { hasDependency } from '../helpers/dependencies';
 import { applyDotEnvPlugin } from '../helpers/dotEnv';
 import { env as _env, IWebpackEnv } from '../index';
@@ -352,6 +353,8 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 			__NS_DEV_HOST_IPS__:
 				mode === 'development' ? JSON.stringify(getIPS()) : `[]`,
 			__CSS_PARSER__: JSON.stringify(getValue('cssParser', 'css-tree')),
+			__UI_USE_XML_PARSER__: true,
+			__UI_USE_EXTERNAL_RENDERER__: projectUsesCustomFlavor(),
 			__ANDROID__: platform === 'android',
 			__IOS__: platform === 'ios',
 			/* for compat only */ 'global.isAndroid': platform === 'android',

packages/webpack5/src/helpers/flavor.ts

@@ -2,6 +2,28 @@ import { defaultConfigs } from '@nativescript/webpack';
 import { getAllDependencies } from './dependencies';
 import { error } from './log';
 
+/**
+ * Utility to determine the project flavor based on installed dependencies
+ * (vue, angular, react, svelete, typescript, javascript...)
+ */
+export function projectUsesCustomFlavor(): boolean {
+	const dependencies = getAllDependencies();
+	return [
+	  'vue', 
+	  'angular',
+	  'react',
+	  'svelte'
+	].includes(determineProjectFlavor())
+	if (dependencies.includes('nativescript-vue') ||
+		dependencies.includes('@nativescript/angular') ||
+		dependencies.includes('react-nativescript') ||
+		dependencies.includes('svelte-native')
+	) {
+		return true;
+	}
+
+	return false;
+}
 /**
  * Utility to determine the project flavor based on installed dependencies
  * (vue, angular, react, svelete, typescript, javascript...)

packages/webpack5/src/helpers/index.ts

@@ -9,7 +9,7 @@ import { addVirtualEntry, addVirtualModule } from './virtualModules';
 import { applyFileReplacements } from './fileReplacements';
 import { addCopyRule, removeCopyRule } from './copyRules';
 import { error, info, warn, warnOnce } from './log';
-import { determineProjectFlavor } from './flavor';
+import { determineProjectFlavor, projectUsesCustomFlavor } from './flavor';
 import { getValue } from './config';
 import { getIPS } from './host';
 import {
@@ -47,6 +47,7 @@ export default {
 	},
 	flavor: {
 		determineProjectFlavor,
+		projectUsesCustomFlavor,
 	},
 	host: {
 		getIPS,