feat: use synckit to support postcss-load-config v5

close #636

Author: JounQin

.env-cmdrc.js

@@ -18,5 +18,9 @@ module.exports = {
 			// eslint-disable-next-line no-process-env -- ignore
 			process.env.NODE_OPTIONS || ''
 		}`
+	},
+	test: {
+		SYNCKIT_TIMEOUT: 1000,
+		SYNCKIT_TS_RUNNER: 'esbuild-register'
 	}
 };

package.json

@@ -47,7 +47,7 @@
     "prerelease": "pnpm run clean && pnpm run build",
     "release": "changeset publish",
     "svelte-kit": "env-cmd -e sveltekit node node_modules/vite/bin/vite.js",
-    "test": "pnpm run mocha \"tests/src/**/*.ts\" --reporter dot --timeout 60000",
+    "test": "env-cmd -e test pnpm run mocha \"tests/src/**/*.ts\" --reporter dot --timeout 60000",
     "test:debug": "env-cmd -e debug pnpm run test",
     "test:update-fixtures": "env-cmd -e update-fixtures pnpm run test",
     "ts": "node -r esbuild-register",
@@ -73,11 +73,12 @@
     "esutils": "^2.0.3",
     "known-css-properties": "^0.29.0",
     "postcss": "^8.4.5",
-    "postcss-load-config": "^3.1.4",
+    "postcss-load-config": "^5.0.2",
     "postcss-safe-parser": "^6.0.0",
     "postcss-selector-parser": "^6.0.11",
     "semver": "^7.5.3",
-    "svelte-eslint-parser": ">=0.34.0-next.4 <1.0.0"
+    "svelte-eslint-parser": ">=0.34.0-next.4 <1.0.0",
+    "synckit": "^0.9.0"
   },
   "devDependencies": {
     "@1stg/browserslist-config": "^2.0.0",

src/shared/svelte-compile-warns/transform/postcss.ts

@@ -1,9 +1,19 @@
 import type { AST } from 'svelte-eslint-parser';
-import postcss from 'postcss';
-import postcssLoadConfig from 'postcss-load-config';
+import { createSyncFn } from 'synckit';
+
 import type { RuleContext } from '../../../types';
-import type { TransformResult } from './types';
 import { getCwd, getFilename } from '../../../utils/compat';
+import type { TransformResult } from './types';
+
+const postcssProcess = createSyncFn(require.resolve('./postcss.worker')) as (options: {
+	cwd: string;
+	filename: string;
+	code: string;
+	configFilePath?: unknown;
+}) => {
+	output: string;
+	mappings: string;
+};
 
 /**
  * Transform with postcss
@@ -24,33 +34,24 @@ export function transform(
 		inputRange = [node.startTag.range[1], node.range[1]];
 	}
 	const code = text.slice(...inputRange);
-
 	const filename = `${getFilename(context)}.css`;
+
 	try {
 		const configFilePath = postcssConfig?.configFilePath;
 
-		const config = postcssLoadConfig.sync(
-			{
-				cwd: getCwd(context),
-				from: filename
-			},
-			typeof configFilePath === 'string' ? configFilePath : undefined
-		);
-
-		const result = postcss(config.plugins).process(code, {
-			...config.options,
-			map: {
-				inline: false
-			}
+		const result = postcssProcess({
+			cwd: getCwd(context),
+			filename,
+			code,
+			configFilePath
 		});
 
 		return {
 			inputRange,
-			output: result.content,
-			mappings: result.map.toJSON().mappings
+			...result
 		};
 	} catch (_e) {
-		// console.log(e)
+		console.error(_e);
 		return null;
 	}
 }

src/shared/svelte-compile-warns/transform/postcss.worker.ts

@@ -0,0 +1,40 @@
+import postcss from 'postcss';
+import postcssLoadConfig from 'postcss-load-config';
+import { runAsWorker } from 'synckit';
+
+runAsWorker(
+	async ({
+		cwd,
+		filename,
+		code,
+		configFilePath
+	}: {
+		cwd: string;
+		filename: string;
+		code: string;
+		configFilePath?: unknown;
+	}): Promise<{
+		output: string;
+		mappings: string;
+	}> => {
+		const config = await postcssLoadConfig(
+			{
+				cwd,
+				from: filename
+			},
+			typeof configFilePath === 'string' ? configFilePath : undefined
+		);
+
+		const result = await postcss(config.plugins).process(code, {
+			...config.options,
+			map: {
+				inline: false
+			}
+		});
+
+		return {
+			output: result.content,
+			mappings: result.map.toJSON().mappings
+		};
+	}
+);

tsconfig.json

@@ -2,7 +2,7 @@
 	"compilerOptions": {
 		"target": "es2020",
 		"module": "commonjs",
-		"moduleResolution": "Node16",
+		"moduleResolution": "Node10",
 		"lib": ["es2020", "dom"],
 		"allowJs": true,
 		"checkJs": true,