From fef79627e925c3f8d98941114bbb41dc36c3f2e8 Mon Sep 17 00:00:00 2001 From: JounQin Date: Thu, 11 Jan 2024 19:55:49 +0800 Subject: [PATCH] feat: use synckit to support postcss-load-config v5 close #636 --- .env-cmdrc.js | 4 ++ package.json | 9 ++-- .../svelte-compile-warns/transform/postcss.ts | 41 ++++++++++--------- .../transform/postcss.worker.ts | 40 ++++++++++++++++++ src/types-for-node.ts | 10 ----- tsconfig.json | 2 +- typings/estree/index.d.ts | 1 - 7 files changed, 71 insertions(+), 36 deletions(-) create mode 100644 src/shared/svelte-compile-warns/transform/postcss.worker.ts diff --git a/.env-cmdrc.js b/.env-cmdrc.js index eb513f08a..e9fe1d73a 100644 --- a/.env-cmdrc.js +++ b/.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' } }; diff --git a/package.json b/package.json index cf7e9867c..d0e457b56 100644 --- a/package.json +++ b/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", diff --git a/src/shared/svelte-compile-warns/transform/postcss.ts b/src/shared/svelte-compile-warns/transform/postcss.ts index 4c3d699ab..84dff1d2e 100644 --- a/src/shared/svelte-compile-warns/transform/postcss.ts +++ b/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; } } diff --git a/src/shared/svelte-compile-warns/transform/postcss.worker.ts b/src/shared/svelte-compile-warns/transform/postcss.worker.ts new file mode 100644 index 000000000..b4bf72710 --- /dev/null +++ b/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 + }; + } +); diff --git a/src/types-for-node.ts b/src/types-for-node.ts index ec2d5ff8a..5c0c5ac16 100644 --- a/src/types-for-node.ts +++ b/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; diff --git a/tsconfig.json b/tsconfig.json index 2318ab738..f8311c283 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,7 +2,7 @@ "compilerOptions": { "target": "es2020", "module": "commonjs", - "moduleResolution": "Node16", + "moduleResolution": "Node10", "lib": ["es2020", "dom"], "allowJs": true, "checkJs": true, diff --git a/typings/estree/index.d.ts b/typings/estree/index.d.ts index 286f74999..20e46a9c2 100644 --- a/typings/estree/index.d.ts +++ b/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;