@sveltejs/vite-plugin-svelte 4.0.0-next.1 → 4.0.0-next.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "4.0.0-next.1",
+  "version": "4.0.0-next.2",
   "license": "MIT",
   "author": "dominikg",
   "files": [
@@ -36,12 +36,12 @@
   },
   "homepage": "https://github.com/sveltejs/vite-plugin-svelte#readme",
   "dependencies": {
+    "@sveltejs/vite-plugin-svelte-inspector": "^3.0.0-next.0||^3.0.0",
     "debug": "^4.3.4",
     "deepmerge": "^4.3.1",
     "kleur": "^4.1.5",
     "magic-string": "^0.30.10",
-    "vitefu": "^0.2.5",
-    "@sveltejs/vite-plugin-svelte-inspector": "^3.0.0-next.1"
+    "vitefu": "^0.2.5"
   },
   "peerDependencies": {
     "svelte": "^5.0.0-next.96 || ^5.0.0",
@@ -49,9 +49,9 @@
   },
   "devDependencies": {
     "@types/debug": "^4.1.12",
-    "esbuild": "^0.20.2",
-    "sass": "^1.76.0",
-    "svelte": "^5.0.0-next.123",
+    "esbuild": "^0.21.3",
+    "sass": "^1.77.2",
+    "svelte": "^5.0.0-next.141",
     "vite": "^5.2.11"
   },
   "scripts": {

package/src/preprocess.js

@@ -61,29 +61,16 @@ function viteScript() {
  * @returns {{ style: import('svelte/compiler').Preprocessor }}
  */
 function viteStyle(config = {}) {
-	/** @type {CssTransform} */
-	let transform;
+	/** @type {Promise<CssTransform> | CssTransform} */
+	let cssTransform;
 	/** @type {import('svelte/compiler').Preprocessor} */
 	const style = async ({ attributes, content, filename = '' }) => {
 		const ext = attributes.lang ? `.${attributes.lang}` : '.css';
 		if (attributes.lang && !isCSSRequest(ext)) return;
-		if (!transform) {
-			/** @type {import('vite').ResolvedConfig} */
-			let resolvedConfig;
-			// @ts-expect-error special prop added if running in v-p-s
-			if (style.__resolvedConfig) {
-				// @ts-expect-error
-				resolvedConfig = style.__resolvedConfig;
-			} else if (isResolvedConfig(config)) {
-				resolvedConfig = config;
-			} else {
-				resolvedConfig = await resolveConfig(
-					config,
-					process.env.NODE_ENV === 'production' ? 'build' : 'serve'
-				);
-			}
-			transform = getCssTransformFn(resolvedConfig);
+		if (!cssTransform) {
+			cssTransform = createCssTransform(style, config).then((t) => (cssTransform = t));
 		}
+		const transform = await cssTransform;
 		const suffix = `${lang_sep}${ext}`;
 		const moduleId = `${filename}${suffix}`;
 		const { code, map, deps } = await transform(content, moduleId);
@@ -102,12 +89,27 @@ function viteStyle(config = {}) {
 }
 
 /**
- * @param {import('vite').ResolvedConfig} config
- * @returns {CssTransform}
+ * @param {import('svelte/compiler').Preprocessor} style
+ * @param {import('vite').ResolvedConfig | import('vite').InlineConfig} config
+ * @returns {Promise<CssTransform>}
  */
-function getCssTransformFn(config) {
+async function createCssTransform(style, config) {
+	/** @type {import('vite').ResolvedConfig} */
+	let resolvedConfig;
+	// @ts-expect-error special prop added if running in v-p-s
+	if (style.__resolvedConfig) {
+		// @ts-expect-error
+		resolvedConfig = style.__resolvedConfig;
+	} else if (isResolvedConfig(config)) {
+		resolvedConfig = config;
+	} else {
+		resolvedConfig = await resolveConfig(
+			config,
+			process.env.NODE_ENV === 'production' ? 'build' : 'serve'
+		);
+	}
 	return async (code, filename) => {
-		return preprocessCSS(code, filename, config);
+		return preprocessCSS(code, filename, resolvedConfig);
 	};
 }
 

package/src/public.d.ts

@@ -204,5 +204,5 @@ export interface VitePreprocessOptions {
 	 */
 	style?: boolean | InlineConfig | ResolvedConfig;
 }
-
+// eslint-disable-next-line n/no-missing-import
 export * from './index.js';

package/src/types/options.d.ts

@@ -1,5 +1,6 @@
 import type { CompileOptions } from 'svelte/compiler';
 import type { ViteDevServer } from 'vite';
+// eslint-disable-next-line n/no-missing-import
 import { VitePluginSvelteStats } from '../utils/vite-plugin-svelte-stats.js';
 import type { Options } from '../public.d.ts';
 

package/src/utils/options.js

@@ -201,7 +201,11 @@ export function resolveOptions(preResolveOptions, viteConfig, cache) {
 		compilerOptions: {
 			css,
 			dev: !viteConfig.isProduction,
-			hmr: !viteConfig.isProduction && !preResolveOptions.isBuild
+			hmr:
+				!viteConfig.isProduction &&
+				!preResolveOptions.isBuild &&
+				viteConfig.server &&
+				viteConfig.server.hmr !== false
 		}
 	};
 
@@ -217,7 +221,7 @@ export function resolveOptions(preResolveOptions, viteConfig, cache) {
 	removeIgnoredOptions(merged);
 	handleDeprecatedOptions(merged);
 	addExtraPreprocessors(merged, viteConfig);
-	enforceOptionsForHmr(merged);
+	enforceOptionsForHmr(merged, viteConfig);
 	enforceOptionsForProduction(merged);
 	// mergeConfigs would mangle functions on the stats class, so do this afterwards
 	if (log.debug.enabled && isDebugNamespaceEnabled('stats')) {
@@ -228,8 +232,9 @@ export function resolveOptions(preResolveOptions, viteConfig, cache) {
 
 /**
  * @param {import('../types/options.d.ts').ResolvedOptions} options
+ * @param {import('vite').ResolvedConfig} viteConfig
  */
-function enforceOptionsForHmr(options) {
+function enforceOptionsForHmr(options, viteConfig) {
 	if (options.hot) {
 		log.warn(
 			'svelte 5 has hmr integrated in core. Please remove the vitePlugin.hot option and use compilerOptions.hmr instead'
@@ -237,6 +242,12 @@ function enforceOptionsForHmr(options) {
 		delete options.hot;
 		options.compilerOptions.hmr = true;
 	}
+	if (options.compilerOptions.hmr && viteConfig.server?.hmr === false) {
+		log.warn(
+			'vite config server.hmr is false but compilerOptions.hmr is true. Forcing compilerOptions.hmr to false as it would not work.'
+		);
+		options.compilerOptions.hmr = false;
+	}
 }
 
 /**
@@ -264,7 +275,7 @@ function enforceOptionsForProduction(options) {
  */
 function removeIgnoredOptions(options) {
 	const ignoredCompilerOptions = ['generate', 'format', 'filename'];
-	if (options.hot && options.emitCss) {
+	if (options.compilerOptions.hmr && options.emitCss) {
 		ignoredCompilerOptions.push('cssHash');
 	}
 	const passedCompilerOptions = Object.keys(options.compilerOptions || {});