From 34773e8e3a6e866ce8005f3fcbd4d6a8ce7d1c74 Mon Sep 17 00:00:00 2001
From: Nikhil Saraf <nsaraf98@gmail.com>
Date: Mon, 13 May 2024 23:00:02 +0530
Subject: [PATCH] fix: solidjs/solid-start#1401, css ref counting in dev

---
 .../vinxi/lib/manifest/dev-server-manifest.js |  1 +
 packages/vinxi/runtime/style.js               | 32 +++++++++++++++++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/packages/vinxi/lib/manifest/dev-server-manifest.js b/packages/vinxi/lib/manifest/dev-server-manifest.js
index 2c60cc34..096ac4ee 100644
--- 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
index b3ad05a8..31245ebf 100644
--- 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}`,
+			);
 		}
 	});
 }