From e06ca24c9d10d4b26b7616ce7564d9b490fe75c4 Mon Sep 17 00:00:00 2001 From: Nathan Walker Date: Wed, 13 Aug 2025 17:28:58 -0700 Subject: [PATCH] feat: css-tree 3.1+ support which includes es module support --- package-lock.json | 30 ++++++----------- package.json | 2 +- packages/core/package.json | 18 +++++------ packages/webpack5/src/configuration/base.ts | 20 ++++++++++++ .../src/polyfills/mdn-data-at-rules.ts | 8 +++++ .../src/polyfills/mdn-data-properties.ts | 8 +++++ .../src/polyfills/mdn-data-syntaxes.ts | 8 +++++ packages/webpack5/src/polyfills/module.ts | 32 +++++++++++++++++++ 8 files changed, 96 insertions(+), 30 deletions(-) create mode 100644 packages/webpack5/src/polyfills/mdn-data-at-rules.ts create mode 100644 packages/webpack5/src/polyfills/mdn-data-properties.ts create mode 100644 packages/webpack5/src/polyfills/mdn-data-syntaxes.ts create mode 100644 packages/webpack5/src/polyfills/module.ts diff --git a/package-lock.json b/package-lock.json index 7f2b6e9bc..868efe33b 100644 --- a/package-lock.json +++ b/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" }, diff --git a/package.json b/package.json index e8e943924..d216b7273 100644 --- a/package.json +++ b/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", diff --git a/packages/core/package.json b/packages/core/package.json index 701a3ab10..9e4dab601 100644 --- a/packages/core/package.json +++ b/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": { diff --git a/packages/webpack5/src/configuration/base.ts b/packages/webpack5/src/configuration/base.ts index b1114f1c0..dcedb4f5c 100644 --- a/packages/webpack5/src/configuration/base.ts +++ b/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'; diff --git a/packages/webpack5/src/polyfills/mdn-data-at-rules.ts b/packages/webpack5/src/polyfills/mdn-data-at-rules.ts new file mode 100644 index 000000000..048e5e3ee --- /dev/null +++ b/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 = {}; diff --git a/packages/webpack5/src/polyfills/mdn-data-properties.ts b/packages/webpack5/src/polyfills/mdn-data-properties.ts new file mode 100644 index 000000000..dc81ffec7 --- /dev/null +++ b/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 = {}; diff --git a/packages/webpack5/src/polyfills/mdn-data-syntaxes.ts b/packages/webpack5/src/polyfills/mdn-data-syntaxes.ts new file mode 100644 index 000000000..162ddbb39 --- /dev/null +++ b/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 = {}; diff --git a/packages/webpack5/src/polyfills/module.ts b/packages/webpack5/src/polyfills/module.ts new file mode 100644 index 000000000..2de230592 --- /dev/null +++ b/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, +};