feat: css-tree 3.1+ support which includes es module support

package-lock.json

@@ -45,7 +45,7 @@
 				"copy-webpack-plugin": "^13.0.0",
 				"copyfiles": "^2.4.0",
 				"css": "^3.0.0",
-				"css-tree": "^1.1.2",
+				"css-tree": "^3.1.0",
 				"css-what": "^6.1.0",
 				"dotenv": "~16.4.0",
 				"dotenv-webpack": "^7.0.0",
@@ -12565,27 +12565,17 @@
 			}
 		},
 		"node_modules/css-tree": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-			"integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz",
+			"integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"mdn-data": "2.0.14",
-				"source-map": "^0.6.1"
+				"mdn-data": "2.12.2",
+				"source-map-js": "^1.0.1"
 			},
 			"engines": {
-				"node": ">=8.0.0"
-			}
-		},
-		"node_modules/css-tree/node_modules/source-map": {
-			"version": "0.6.1",
-			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-			"dev": true,
-			"license": "BSD-3-Clause",
-			"engines": {
-				"node": ">=0.10.0"
+				"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
 			}
 		},
 		"node_modules/css-what": {
@@ -19956,9 +19946,9 @@
 			}
 		},
 		"node_modules/mdn-data": {
-			"version": "2.0.14",
-			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-			"integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+			"version": "2.12.2",
+			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
+			"integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
 			"dev": true,
 			"license": "CC0-1.0"
 		},

package.json

@@ -52,7 +52,7 @@
 		"copy-webpack-plugin": "^13.0.0",
 		"copyfiles": "^2.4.0",
 		"css": "^3.0.0",
-		"css-tree": "^1.1.2",
+		"css-tree": "^3.1.0",
 		"css-what": "^6.1.0",
 		"dotenv": "~16.4.0",
 		"dotenv-webpack": "^7.0.0",

packages/core/package.json

@@ -57,17 +57,17 @@
 		"preuninstall": "node cli-hooks/preuninstall.mjs"
 	},
 	"dependencies": {
-		"@csstools/css-calc": "~2.1.2",
-		"@csstools/css-color-parser": "^3.0.8",
-		"@csstools/css-parser-algorithms": "^3.0.4",
-		"@csstools/css-tokenizer": "^3.0.3",
+		"@csstools/css-calc": "~2.1.4",
+		"@csstools/css-color-parser": "^3.0.10",
+		"@csstools/css-parser-algorithms": "^3.0.5",
+		"@csstools/css-tokenizer": "^3.0.4",
 		"@nativescript/hook": "~3.0.4",
-		"acorn": "^8.7.0",
-		"css-tree": "^1.1.2",
-		"css-what": "^6.1.0",
+		"acorn": "^8.15.0",
+		"css-tree": "^3.1.0",
+		"css-what": "^7.0.0",
 		"emoji-regex": "^10.2.1",
-		"source-map": "0.6.1",
-		"source-map-js": "^1.2.0",
+		"source-map": "0.7.6",
+		"source-map-js": "^1.2.1",
 		"tslib": "^2.0.0"
 	},
 	"nativescript": {

packages/webpack5/src/configuration/base.ts

@@ -87,6 +87,26 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 		node: false,
 	});
 
+	// Mock Node.js built-ins that are not available in NativeScript runtime
+	// but are required by some packages like css-tree
+	config.resolve.merge({
+		fallback: {
+			module: require.resolve('../polyfills/module.js'),
+		},
+		alias: {
+			// Mock mdn-data modules that css-tree tries to load
+			'mdn-data/css/properties.json': require.resolve(
+				'../polyfills/mdn-data-properties.js',
+			),
+			'mdn-data/css/syntaxes.json': require.resolve(
+				'../polyfills/mdn-data-syntaxes.js',
+			),
+			'mdn-data/css/at-rules.json': require.resolve(
+				'../polyfills/mdn-data-at-rules.js',
+			),
+		},
+	});
+
 	const getSourceMapType = (map: string | boolean): Config.DevTool => {
 		const defaultSourceMap = 'inline-source-map';
 

packages/webpack5/src/polyfills/mdn-data-at-rules.ts

@@ -0,0 +1,8 @@
+/**
+ * Mock for mdn-data/css/at-rules.json
+ * Returns empty object since css-tree has its own comprehensive data
+ * This prevents css-tree from failing when trying to patch its data
+ */
+
+// Return empty object - css-tree will use its built-in data instead
+export = {};

packages/webpack5/src/polyfills/mdn-data-properties.ts

@@ -0,0 +1,8 @@
+/**
+ * Mock for mdn-data/css/properties.json
+ * Returns empty object since css-tree has its own comprehensive data
+ * This prevents css-tree from failing when trying to patch its data
+ */
+
+// Return empty object - css-tree will use its built-in data instead
+export = {};

packages/webpack5/src/polyfills/mdn-data-syntaxes.ts

@@ -0,0 +1,8 @@
+/**
+ * Mock for mdn-data/css/syntaxes.json
+ * Returns empty object since css-tree has its own comprehensive data
+ * This prevents css-tree from failing when trying to patch its data
+ */
+
+// Return empty object - css-tree will use its built-in data instead
+export = {};

packages/webpack5/src/polyfills/module.ts

@@ -0,0 +1,32 @@
+/**
+ * Polyfill for Node.js 'module' built-in
+ * Provides minimal implementation for NativeScript environment
+ */
+
+// Mock createRequire function that css-tree uses
+function createRequire(filename: string) {
+	// Return a mock require function
+	return function mockRequire(id: string) {
+		// Handle css-tree's internal patch.json file
+		if (id.includes('../data/patch.json') || id.includes('patch.json')) {
+			// Return css-tree's patch structure
+			return {
+				atrules: {},
+				properties: {},
+				types: {},
+			};
+		}
+
+		// For mdn-data files, return empty objects
+		if (id.includes('mdn-data')) {
+			return {};
+		}
+
+		// For any other requires, return empty object
+		return {};
+	};
+}
+
+module.exports = {
+	createRequire: createRequire,
+};