From 8f45fc7b5efb6ce390cd253f8b150a55ad158340 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Sat, 10 Aug 2024 13:29:43 +0100 Subject: [PATCH] fix --- .../svelte/src/internal/client/dom/css.js | 50 ++++--------------- 1 file changed, 10 insertions(+), 40 deletions(-) diff --git a/packages/svelte/src/internal/client/dom/css.js b/packages/svelte/src/internal/client/dom/css.js index 17990055cf..b7a8ca68e8 100644 --- a/packages/svelte/src/internal/client/dom/css.js +++ b/packages/svelte/src/internal/client/dom/css.js @@ -1,49 +1,19 @@ -import { DEV } from 'esm-env'; -import { effect } from '../reactivity/effects.js'; - -var css_counter = new Map(); - /** * @param {Node} anchor * @param {{ hash: string, code: string }} css */ export function append_styles(anchor, css) { - const maybe_append_styles = () => { - var root = anchor.getRootNode(); - - var target = /** @type {ShadowRoot} */ (root).host - ? /** @type {ShadowRoot} */ (root) - : /** @type {Document} */ (root).head ?? /** @type {Document} */ (root.ownerDocument).head; - - if (!target.querySelector('#' + css.hash)) { - const style = document.createElement('style'); - style.id = css.hash; - style.textContent = css.code; - - target.appendChild(style); - } - }; - - // Use an effect to ensure `anchor` is in the DOM, otherwise getRootNode() will yield wrong results - effect(() => { - // In dev, always check the DOM, so that styles can be replaced with HMR - if (DEV) { - maybe_append_styles(); - return; - } - // Otherwise, for prod we can use the css object as a key and count the usage to skip the lookup - var count = css_counter.get(css) ?? 0; - - css_counter.set(css, count + 1); + var root = anchor.getRootNode(); - if (count > 0) return; + var target = /** @type {ShadowRoot} */ (root).host + ? /** @type {ShadowRoot} */ (root) + : /** @type {Document} */ (root).head ?? /** @type {Document} */ (root.ownerDocument).head; - maybe_append_styles(); + if (!target.querySelector('#' + css.hash)) { + const style = document.createElement('style'); + style.id = css.hash; + style.textContent = css.code; - return () => { - var count = css_counter.get(css) - 1; - css_counter.set(css, count); - if (count === 0) css_counter.delete(css); - }; - }); + target.appendChild(style); + } }