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

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,
+};