feat: reduce number of js updates when editing component css (#26)

* feat: reduce number of js updates when editing component css

* add changeset

Author: dominikg

.changeset/flat-books-kick.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+improved css hmr

packages/vite-plugin-svelte/src/utils/preprocess.ts

@@ -58,6 +58,22 @@ export function createVitePreprocessorGroup(
 	} as PreprocessorGroup;
 }
 
+/**
+ * this appends a *{} rule to component styles to force the svelte compiler to add style classes to all nodes
+ * That means adding/removing class rules from <style> node won't trigger js updates as the scope classes are not changed
+ *
+ * only used during dev with enabled css hmr
+ */
+function createInjectScopeEverythingRulePreprocessorGroup(): PreprocessorGroup {
+	return {
+		style({ content }) {
+			return {
+				code: `${content} *{}`
+			};
+		}
+	};
+}
+
 export function buildExtraPreprocessors(options: ResolvedOptions, config: ResolvedConfig) {
 	const extraPreprocessors = [];
 	if (options.useVitePreprocess) {
@@ -77,5 +93,9 @@ export function buildExtraPreprocessors(options: ResolvedOptions, config: Resolv
 		);
 	}
 
+	if (options.hot && !options.disableCssHmr) {
+		extraPreprocessors.push(createInjectScopeEverythingRulePreprocessorGroup());
+	}
+
 	return extraPreprocessors;
 }