feat: use Vite 3.2 preprocessCSS API for useVitePreprocess (#479)

bluwy · web-flow · commit e6e4e8c60f52 · 2022-10-28T21:37:18.000+08:00
diff --git a/.changeset/giant-adults-glow.md b/.changeset/giant-adults-glow.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+Use `preprocessCSS` API from Vite 3.2 for `useVitePreprocess` option
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
     "rimraf": "^3.0.2",
     "svelte": "^3.52.0",
     "typescript": "^4.8.4",
-    "vite": "^3.1.8",
+    "vite": "^3.2.0",
     "vitest": "^0.24.3"
   },
   "lint-staged": {
@@ -70,7 +70,7 @@
       "allowedVersions": {
         "stylus": "^0.58.0",
         "postcss-load-config": "^4.0.0",
-        "vite": "^3.1.0"
+        "vite": "^3.2.0"
       }
     }
   }
diff --git a/packages/e2e-tests/autoprefixer-browerslist/package.json b/packages/e2e-tests/autoprefixer-browerslist/package.json
@@ -17,7 +17,7 @@
     "postcss-load-config": "^4.0.1",
     "svelte": "^3.52.0",
     "svelte-preprocess": "^4.10.7",
-    "vite": "^3.1.8"
+    "vite": "^3.2.0"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/configfile-custom/package.json b/packages/e2e-tests/configfile-custom/package.json
@@ -13,7 +13,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.52.0",
-    "vite": "^3.1.8"
+    "vite": "^3.2.0"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/configfile-esm/package.json b/packages/e2e-tests/configfile-esm/package.json
@@ -14,7 +14,7 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.52.0",
     "svelte-preprocess": "^4.10.7",
-    "vite": "^3.1.8"
+    "vite": "^3.2.0"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/custom-extensions/package.json b/packages/e2e-tests/custom-extensions/package.json
@@ -10,7 +10,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.52.0",
-    "vite": "^3.1.8"
+    "vite": "^3.2.0"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/env/package.json b/packages/e2e-tests/env/package.json
@@ -10,7 +10,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.52.0",
-    "vite": "^3.1.8"
+    "vite": "^3.2.0"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/hmr/package.json b/packages/e2e-tests/hmr/package.json
@@ -15,7 +15,7 @@
     "e2e-test-dep-vite-plugins": "workspace:*",
     "node-fetch": "^3.2.10",
     "svelte": "^3.52.0",
-    "vite": "^3.1.8"
+    "vite": "^3.2.0"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/inspector-kit/package.json b/packages/e2e-tests/inspector-kit/package.json
@@ -11,7 +11,7 @@
   "devDependencies": {
     "@sveltejs/kit": "^1.0.0-next.522",
     "svelte": "^3.52.0",
-    "vite": "^3.1.8"
+    "vite": "^3.2.0"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/inspector-vite/package.json b/packages/e2e-tests/inspector-vite/package.json
@@ -11,6 +11,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.52.0",
-    "vite": "^3.1.8"
+    "vite": "^3.2.0"
   }
 }
diff --git a/packages/e2e-tests/kit-node/package.json b/packages/e2e-tests/kit-node/package.json
@@ -20,7 +20,7 @@
     "svelte-i18n": "^3.4.0",
     "tiny-glob": "^0.2.9",
     "typescript": "^4.8.4",
-    "vite": "^3.1.8"
+    "vite": "^3.2.0"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/package-json-svelte-field/package.json b/packages/e2e-tests/package-json-svelte-field/package.json
@@ -14,7 +14,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.52.0",
-    "vite": "^3.1.8"
+    "vite": "^3.2.0"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/preprocess-with-vite/package.json b/packages/e2e-tests/preprocess-with-vite/package.json
@@ -12,7 +12,7 @@
     "sass": "^1.55.0",
     "stylus": "^0.59.0",
     "svelte": "^3.52.0",
-    "vite": "^3.1.8"
+    "vite": "^3.2.0"
   },
   "type": "commonjs"
 }
diff --git a/packages/e2e-tests/svelte-preprocess/package.json b/packages/e2e-tests/svelte-preprocess/package.json
@@ -13,7 +13,7 @@
     "svelte": "^3.52.0",
     "svelte-preprocess": "^4.10.7",
     "typescript": "^4.8.4",
-    "vite": "^3.1.8"
+    "vite": "^3.2.0"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/ts-type-import/package.json b/packages/e2e-tests/ts-type-import/package.json
@@ -13,7 +13,7 @@
     "@types/node": "^17.0.36",
     "svelte": "^3.52.0",
     "svelte-preprocess": "^4.10.7",
-    "vite": "^3.1.8"
+    "vite": "^3.2.0"
   },
   "type": "module"
 }
diff --git a/packages/e2e-tests/vite-ssr-esm/package.json b/packages/e2e-tests/vite-ssr-esm/package.json
@@ -21,6 +21,6 @@
     "npm-run-all": "^4.1.5",
     "serve-static": "^1.15.0",
     "svelte": "^3.52.0",
-    "vite": "^3.1.8"
+    "vite": "^3.2.0"
   }
 }
diff --git a/packages/e2e-tests/vite-ssr/package.json b/packages/e2e-tests/vite-ssr/package.json
@@ -18,6 +18,6 @@
     "express": "^4.18.2",
     "serve-static": "^1.15.0",
     "svelte": "^3.52.0",
-    "vite": "^3.1.8"
+    "vite": "^3.2.0"
   }
 }
diff --git a/packages/playground/big-component-library/package.json b/packages/playground/big-component-library/package.json
@@ -12,7 +12,7 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "carbon-components-svelte": "^0.70.12",
     "svelte": "^3.52.0",
-    "vite": "^3.1.8"
+    "vite": "^3.2.0"
   },
   "dependencies": {
     "lodash-es": "^4.17.21"
diff --git a/packages/playground/big/package.json b/packages/playground/big/package.json
@@ -10,6 +10,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.52.0",
-    "vite": "^3.1.8"
+    "vite": "^3.2.0"
   }
 }
diff --git a/packages/playground/kit-demo-app/package.json b/packages/playground/kit-demo-app/package.json
@@ -18,7 +18,7 @@
 		"svelte": "^3.52.0",
 		"svelte-check": "^2.9.2",
 		"typescript": "^4.8.4",
-		"vite": "^3.1.8"
+		"vite": "^3.2.0"
 	},
 	"type": "module"
 }
diff --git a/packages/playground/optimizedeps-include/package.json b/packages/playground/optimizedeps-include/package.json
@@ -12,6 +12,6 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.52.0",
     "tinro": "^0.6.12",
-    "vite": "^3.1.8"
+    "vite": "^3.2.0"
   }
 }
diff --git a/packages/playground/windicss/package.json b/packages/playground/windicss/package.json
@@ -14,7 +14,7 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "diff-match-patch": "^1.0.5",
     "svelte": "^3.52.0",
-    "vite": "^3.1.8",
+    "vite": "^3.2.0",
     "vite-plugin-windicss": "^1.8.8"
   }
 }
diff --git a/packages/vite-plugin-svelte/package.json b/packages/vite-plugin-svelte/package.json
@@ -70,6 +70,6 @@
     "rollup": "^2.79.1",
     "svelte": "^3.52.0",
     "tsup": "^6.3.0",
-    "vite": "^3.1.8"
+    "vite": "^3.2.0"
   }
 }
diff --git a/packages/vite-plugin-svelte/src/utils/preprocess.ts b/packages/vite-plugin-svelte/src/utils/preprocess.ts
@@ -1,14 +1,8 @@
-import {
-	transformWithEsbuild,
-	ESBuildOptions,
-	ResolvedConfig,
-	TransformResult,
-	Plugin
-} from 'vite';
+import * as vite from 'vite';
+import type { ESBuildOptions, ResolvedConfig, Plugin } from 'vite';
 import MagicString from 'magic-string';
 import { preprocess } from 'svelte/compiler';
 import { Preprocessor, PreprocessorGroup, Processed, ResolvedOptions } from './options';
-import { TransformPluginContext } from 'rollup';
 import { log } from './log';
 import { buildSourceMap } from './sourcemap';
 import path from 'path';
@@ -21,7 +15,7 @@ function createViteScriptPreprocessor(): Preprocessor {
 	return async ({ attributes, content, filename = '' }) => {
 		const lang = attributes.lang as string;
 		if (!supportedScriptLangs.includes(lang)) return;
-		const transformResult = await transformWithEsbuild(content, filename, {
+		const transformResult = await vite.transformWithEsbuild(content, filename, {
 			loader: lang as ESBuildOptions['loader'],
 			target: 'esnext',
 			tsconfigRaw: {
@@ -40,34 +34,47 @@ function createViteScriptPreprocessor(): Preprocessor {
 }
 
 function createViteStylePreprocessor(config: ResolvedConfig): Preprocessor {
-	const pluginName = 'vite:css';
-	const plugin = config.plugins.find((p) => p.name === pluginName);
-	if (!plugin) {
-		throw new Error(`failed to find plugin ${pluginName}`);
-	}
-	if (!plugin.transform) {
-		throw new Error(`plugin ${pluginName} has no transform`);
-	}
-	const pluginTransform = plugin.transform!.bind(null as unknown as TransformPluginContext);
+	const transform = getCssTransformFn(config);
 	return async ({ attributes, content, filename = '' }) => {
 		const lang = attributes.lang as string;
 		if (!supportedStyleLangs.includes(lang)) return;
 		const moduleId = `${filename}.${lang}`;
-		const transformResult: TransformResult = (await pluginTransform(
-			content,
-			moduleId
-		)) as TransformResult;
+		const result = await transform(content, moduleId);
 		// patch sourcemap source to point back to original filename
-		if (transformResult.map?.sources?.[0] === moduleId) {
-			transformResult.map.sources[0] = path.basename(filename);
+		if (result.map?.sources?.[0] === moduleId) {
+			result.map.sources[0] = path.basename(filename);
 		}
 		return {
-			code: transformResult.code,
-			map: transformResult.map ?? undefined
+			code: result.code,
+			map: result.map ?? undefined
 		};
 	};
 }
 
+// eslint-disable-next-line no-unused-vars
+type CssTransform = (code: string, filename: string) => Promise<{ code: string; map?: any }>;
+
+function getCssTransformFn(config: ResolvedConfig): CssTransform {
+	// API is only available in Vite 3.2 and above
+	// TODO: Remove Vite plugin hack when bump peer dep to Vite 3.2
+	if (vite.preprocessCSS) {
+		return async (code, filename) => {
+			return vite.preprocessCSS(code, filename, config);
+		};
+	} else {
+		const pluginName = 'vite:css';
+		const plugin = config.plugins.find((p) => p.name === pluginName);
+		if (!plugin) {
+			throw new Error(`failed to find plugin ${pluginName}`);
+		}
+		if (!plugin.transform) {
+			throw new Error(`plugin ${pluginName} has no transform`);
+		}
+		// @ts-expect-error
+		return plugin.transform.bind(null);
+	}
+}
+
 function createVitePreprocessorGroup(config: ResolvedConfig): PreprocessorGroup {
 	return {
 		markup({ content, filename }) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@sveltejs/vite-plugin-svelte': patch
 +---
++
 +Use `preprocessCSS` API from Vite 3.2 for `useVitePreprocess` option
Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@`
`46`	`46`	`"rimraf": "^3.0.2",`
`47`	`47`	`"svelte": "^3.52.0",`
`48`	`48`	`"typescript": "^4.8.4",`
`49`		`- "vite": "^3.1.8",`
	`49`	`+ "vite": "^3.2.0",`
`50`	`50`	`"vitest": "^0.24.3"`
`51`	`51`	`},`
`52`	`52`	`"lint-staged": {`
`@@ -70,7 +70,7 @@`
`70`	`70`	`"allowedVersions": {`
`71`	`71`	`"stylus": "^0.58.0",`
`72`	`72`	`"postcss-load-config": "^4.0.0",`
`73`		`- "vite": "^3.1.0"`
	`73`	`+ "vite": "^3.2.0"`
`74`	`74`	`}`
`75`	`75`	`}`
`76`	`76`	`}`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@`
`17`	`17`	`"postcss-load-config": "^4.0.1",`
`18`	`18`	`"svelte": "^3.52.0",`
`19`	`19`	`"svelte-preprocess": "^4.10.7",`
`20`		`- "vite": "^3.1.8"`
	`20`	`+ "vite": "^3.2.0"`
`21`	`21`	`},`
`22`	`22`	`"type": "module"`
`23`	`23`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@`
`13`	`13`	`"devDependencies": {`
`14`	`14`	`"@sveltejs/vite-plugin-svelte": "workspace:*",`
`15`	`15`	`"svelte": "^3.52.0",`
`16`		`- "vite": "^3.1.8"`
	`16`	`+ "vite": "^3.2.0"`
`17`	`17`	`},`
`18`	`18`	`"type": "module"`
`19`	`19`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`	`"@sveltejs/vite-plugin-svelte": "workspace:*",`
`15`	`15`	`"svelte": "^3.52.0",`
`16`	`16`	`"svelte-preprocess": "^4.10.7",`
`17`		`- "vite": "^3.1.8"`
	`17`	`+ "vite": "^3.2.0"`
`18`	`18`	`},`
`19`	`19`	`"type": "module"`
`20`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@`
`10`	`10`	`"devDependencies": {`
`11`	`11`	`"@sveltejs/vite-plugin-svelte": "workspace:*",`
`12`	`12`	`"svelte": "^3.52.0",`
`13`		`- "vite": "^3.1.8"`
	`13`	`+ "vite": "^3.2.0"`
`14`	`14`	`},`
`15`	`15`	`"type": "module"`
`16`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@`
`15`	`15`	`"e2e-test-dep-vite-plugins": "workspace:*",`
`16`	`16`	`"node-fetch": "^3.2.10",`
`17`	`17`	`"svelte": "^3.52.0",`
`18`		`- "vite": "^3.1.8"`
	`18`	`+ "vite": "^3.2.0"`
`19`	`19`	`},`
`20`	`20`	`"type": "module"`
`21`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`"devDependencies": {`
`12`	`12`	`"@sveltejs/kit": "^1.0.0-next.522",`
`13`	`13`	`"svelte": "^3.52.0",`
`14`		`- "vite": "^3.1.8"`
	`14`	`+ "vite": "^3.2.0"`
`15`	`15`	`},`
`16`	`16`	`"type": "module"`
`17`	`17`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,6 @@`
`11`	`11`	`"devDependencies": {`
`12`	`12`	`"@sveltejs/vite-plugin-svelte": "workspace:*",`
`13`	`13`	`"svelte": "^3.52.0",`
`14`		`- "vite": "^3.1.8"`
	`14`	`+ "vite": "^3.2.0"`
`15`	`15`	`}`
`16`	`16`	`}`