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 || ''
 		}`
+	},
+	synckit: {
+		SYNCKIT_TIMEOUT: 1000,
+		SYNCKIT_TS_RUNNER: 'esbuild-register'
 	}
 };

package.json

@@ -47,12 +47,12 @@
     "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 synckit 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",
     "typecov": "type-coverage",
-    "update": "pnpm run ts ./tools/update.ts && pnpm run lint-fix:md",
+    "update": "env-cmd -e synckit pnpm run ts ./tools/update.ts && pnpm run lint-fix:md",
     "version": "env-cmd -e version pnpm run update",
     "version:ci": "env-cmd -e version-ci pnpm run update && changeset version"
   },
@@ -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
+		};
+	}
+);

src/types-for-node.ts

@@ -17,7 +17,6 @@ export type ASTNodeWithParent =
 	| AST.SvelteProgram;
 
 export type ASTNodeListener = {
-	AccessorProperty?: (node: TSESTree.AccessorProperty & ASTNodeWithParent) => void;
 	ArrayExpression?: (node: TSESTree.ArrayExpression & ASTNodeWithParent) => void;
 	ArrayPattern?: (node: TSESTree.ArrayPattern & ASTNodeWithParent) => void;
 	ArrowFunctionExpression?: (node: TSESTree.ArrowFunctionExpression & ASTNodeWithParent) => void;
@@ -105,9 +104,6 @@ export type ASTNodeListener = {
 	WhileStatement?: (node: TSESTree.WhileStatement & ASTNodeWithParent) => void;
 	WithStatement?: (node: TSESTree.WithStatement & ASTNodeWithParent) => void;
 	YieldExpression?: (node: TSESTree.YieldExpression & ASTNodeWithParent) => void;
-	TSAbstractAccessorProperty?: (
-		node: TSESTree.TSAbstractAccessorProperty & ASTNodeWithParent
-	) => void;
 	TSAbstractKeyword?: (node: TSESTree.TSAbstractKeyword & ASTNodeWithParent) => void;
 	TSAbstractMethodDefinition?: (
 		node: TSESTree.TSAbstractMethodDefinition & ASTNodeWithParent
@@ -183,7 +179,6 @@ export type ASTNodeListener = {
 	TSQualifiedName?: (node: TSESTree.TSQualifiedName & ASTNodeWithParent) => void;
 	TSReadonlyKeyword?: (node: TSESTree.TSReadonlyKeyword & ASTNodeWithParent) => void;
 	TSRestType?: (node: TSESTree.TSRestType & ASTNodeWithParent) => void;
-	TSSatisfiesExpression?: (node: TSESTree.TSSatisfiesExpression & ASTNodeWithParent) => void;
 	TSStaticKeyword?: (node: TSESTree.TSStaticKeyword & ASTNodeWithParent) => void;
 	TSStringKeyword?: (node: TSESTree.TSStringKeyword & ASTNodeWithParent) => void;
 	TSSymbolKeyword?: (node: TSESTree.TSSymbolKeyword & ASTNodeWithParent) => void;
@@ -245,7 +240,6 @@ export type ASTNodeListener = {
 };
 
 export type ESNodeListener = {
-	AccessorProperty?: (node: TSESTree.AccessorProperty & ASTNodeWithParent) => void;
 	ArrayExpression?: (node: TSESTree.ArrayExpression & ASTNodeWithParent) => void;
 	ArrayPattern?: (node: TSESTree.ArrayPattern & ASTNodeWithParent) => void;
 	ArrowFunctionExpression?: (node: TSESTree.ArrowFunctionExpression & ASTNodeWithParent) => void;
@@ -323,9 +317,6 @@ export type TSNodeListener = {
 	Decorator?: (node: TSESTree.Decorator & ASTNodeWithParent) => void;
 	ImportAttribute?: (node: TSESTree.ImportAttribute & ASTNodeWithParent) => void;
 	StaticBlock?: (node: TSESTree.StaticBlock & ASTNodeWithParent) => void;
-	TSAbstractAccessorProperty?: (
-		node: TSESTree.TSAbstractAccessorProperty & ASTNodeWithParent
-	) => void;
 	TSAbstractKeyword?: (node: TSESTree.TSAbstractKeyword & ASTNodeWithParent) => void;
 	TSAbstractMethodDefinition?: (
 		node: TSESTree.TSAbstractMethodDefinition & ASTNodeWithParent
@@ -401,7 +392,6 @@ export type TSNodeListener = {
 	TSQualifiedName?: (node: TSESTree.TSQualifiedName & ASTNodeWithParent) => void;
 	TSReadonlyKeyword?: (node: TSESTree.TSReadonlyKeyword & ASTNodeWithParent) => void;
 	TSRestType?: (node: TSESTree.TSRestType & ASTNodeWithParent) => void;
-	TSSatisfiesExpression?: (node: TSESTree.TSSatisfiesExpression & ASTNodeWithParent) => void;
 	TSStaticKeyword?: (node: TSESTree.TSStaticKeyword & ASTNodeWithParent) => void;
 	TSStringKeyword?: (node: TSESTree.TSStringKeyword & ASTNodeWithParent) => void;
 	TSSymbolKeyword?: (node: TSESTree.TSSymbolKeyword & ASTNodeWithParent) => void;

tsconfig.json

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

typings/estree/index.d.ts

@@ -12,7 +12,6 @@ export type Program = TSESTree.Program;
 export type Expression = TSESTree.Expression;
 export type Statement = TSESTree.Statement;
 export type Pattern = TSESTree.DestructuringPattern;
-export type AccessorProperty = TSESTree.AccessorProperty;
 export type ArrayExpression = TSESTree.ArrayExpression;
 export type ArrayPattern = TSESTree.ArrayPattern;
 export type ArrowFunctionExpression = TSESTree.ArrowFunctionExpression;