diff --git a/.changeset/silver-oranges-switch.md b/.changeset/silver-oranges-switch.md new file mode 100644 index 00000000..e24bf22b --- /dev/null +++ b/.changeset/silver-oranges-switch.md @@ -0,0 +1,5 @@ +--- +"vinxi": patch +--- + +fix: solidjs/solid-start#1401, css ref counting in dev diff --git a/packages/vinxi/lib/manifest/dev-server-manifest.js b/packages/vinxi/lib/manifest/dev-server-manifest.js index 2c60cc34..52c985e6 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-ref": "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; children: string }[]} styles * @param {*} data */ export function updateStyles(styles, data) { @@ -12,6 +12,10 @@ export function updateStyles(styles, data) { } } +/** + * + * @param {{ attrs: Record; 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; 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}[]} 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}`, + ); } }); }