fix: solidjs/solid-start#1401, css ref counting in dev

nksaraf · May 13, 2024 · 34773e8 · 34773e8
1 parent 6f3d81b
commit 34773e8
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/packages/vinxi/lib/manifest/dev-server-manifest.js b/packages/vinxi/lib/manifest/dev-server-manifest.js
@@ -54,6 +54,7 @@ export function createDevManifest(app) {
 							type: "text/css",
 							key,
 							"data-vite-dev-id": key,
+							"data-vite-css-count": "0",
 						},
 						children: value,
 					}));

diff --git a/packages/vinxi/runtime/style.js b/packages/vinxi/runtime/style.js
@@ -1,6 +1,6 @@
 /**
  *
- * @param {*} styles
+ * @param {{ attrs: Record<string, string>; children: string }[]} styles
  * @param {*} data
  */
 export function updateStyles(styles, data) {
@@ -12,6 +12,10 @@ export function updateStyles(styles, data) {
 	}
 }
 
+/**
+ *
+ * @param {{ attrs: Record<string, string>; children: string }[]} styles
+ */
 export function preloadStyles(styles) {
 	styles.forEach((style) => {
 		if (!style.attrs.href) {
@@ -32,6 +36,10 @@ export function preloadStyles(styles) {
 	});
 }
 
+/**
+ *
+ * @param {{ attrs: Record<string, string>; children: string }[]} styles
+ */
 export function appendStyles(styles) {
 	styles.forEach((style) => {
 		let element = document.head.querySelector(
@@ -41,18 +49,38 @@ export function appendStyles(styles) {
 			element = document.createElement("style");
 			element.setAttribute("data-vite-dev-id", style.attrs["data-vite-dev-id"]);
 			element.innerHTML = style.children;
+			element.setAttribute("data-vite-ref", "0");
 			document.head.appendChild(element);
 		}
+
+		element.setAttribute(
+			"data-vite-ref",
+			`${Number(element.getAttribute("data-vite-ref")) + 1}`,
+		);
 	});
 }
 
+/**
+ *
+ * @param {{ attrs: Record<string, string>}[]} styles
+ */
 export function cleanupStyles(styles) {
 	styles.forEach((style) => {
 		let element = document.head.querySelector(
 			`style[data-vite-dev-id="${style.attrs["data-vite-dev-id"]}"]`,
 		);
-		if (element) {
+
+		if (!element) {
+			return;
+		}
+
+		if (Number(element.getAttribute("data-vite-ref")) == 1) {
 			element.remove();
+		} else {
+			element.setAttribute(
+				"data-vite-ref",
+				`${Number(element.getAttribute("data-vite-ref")) - 1}`,
+			);
 		}
 	});
 }