diff --git a/src/runtime/internal/style_manager.js b/src/runtime/internal/style_manager.js index 346895f423..52101628a5 100644 --- a/src/runtime/internal/style_manager.js +++ b/src/runtime/internal/style_manager.js @@ -9,20 +9,19 @@ let active = 0; * @returns {number} */ function hash(str) { - let hash = 5381; - let i = str.length; - while (i--) - hash = ((hash << 5) - hash) ^ str.charCodeAt(i); - return hash >>> 0; + let hash = 5381; + let i = str.length; + while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i); + return hash >>> 0; } /** @param {Document | ShadowRoot} doc * @param {Element & ElementCSSInlineStyle} node * @returns {{ stylesheet: any; rules: {}; }} */ function create_style_information(doc, node) { - const info = { stylesheet: append_empty_stylesheet(node), rules: {} }; - managed_styles.set(doc, info); - return info; + const info = { stylesheet: append_empty_stylesheet(node), rules: {} }; + managed_styles.set(doc, info); + return info; } /** @param {Element & ElementCSSInlineStyle} node * @param {number} a @@ -35,62 +34,59 @@ function create_style_information(doc, node) { * @returns {string} */ export function create_rule(node, a, b, duration, delay, ease, fn, uid = 0) { - const step = 16.666 / duration; - let keyframes = '{\n'; - for (let p = 0; p <= 1; p += step) { - const t = a + (b - a) * ease(p); - keyframes += p * 100 + `%{${fn(t, 1 - t)}}\n`; - } - const rule = keyframes + `100% {${fn(b, 1 - b)}}\n}`; - const name = `__svelte_${hash(rule)}_${uid}`; - const doc = get_root_for_style(node); - const { stylesheet, rules } = managed_styles.get(doc) || create_style_information(doc, node); - if (!rules[name]) { - rules[name] = true; - stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length); - } - const animation = node.style.animation || ''; - node.style.animation = `${animation ? `${animation}, ` : ''}${name} ${duration}ms linear ${delay}ms 1 both`; - active += 1; - return name; + const step = 16.666 / duration; + let keyframes = '{\n'; + for (let p = 0; p <= 1; p += step) { + const t = a + (b - a) * ease(p); + keyframes += p * 100 + `%{${fn(t, 1 - t)}}\n`; + } + const rule = keyframes + `100% {${fn(b, 1 - b)}}\n}`; + const name = `__svelte_${hash(rule)}_${uid}`; + const doc = get_root_for_style(node); + const { stylesheet, rules } = managed_styles.get(doc) || create_style_information(doc, node); + if (!rules[name]) { + rules[name] = true; + stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length); + } + const animation = node.style.animation || ''; + node.style.animation = `${ + animation ? `${animation}, ` : '' + }${name} ${duration}ms linear ${delay}ms 1 both`; + active += 1; + return name; } /** @param {Element & ElementCSSInlineStyle} node * @param {string} name * @returns {void} */ export function delete_rule(node, name) { - const previous = (node.style.animation || '').split(', '); - const next = previous.filter(name - ? (anim) => anim.indexOf(name) < 0 // remove specific animation - : (anim) => anim.indexOf('__svelte') === -1 // remove all Svelte animations - ); - const deleted = previous.length - next.length; - if (deleted) { - node.style.animation = next.join(', '); - active -= deleted; - if (!active) - clear_rules(); - } + const previous = (node.style.animation || '').split(', '); + const next = previous.filter( + name + ? (anim) => anim.indexOf(name) < 0 // remove specific animation + : (anim) => anim.indexOf('__svelte') === -1 // remove all Svelte animations + ); + const deleted = previous.length - next.length; + if (deleted) { + node.style.animation = next.join(', '); + active -= deleted; + if (!active) clear_rules(); + } } /** @returns {void} */ export function clear_rules() { - raf(() => { - if (active) - return; - managed_styles.forEach((info) => { - const { ownerNode } = info.stylesheet; - // there is no ownerNode if it runs on jsdom. - if (ownerNode) - detach(ownerNode); - }); - managed_styles.clear(); - }); + raf(() => { + if (active) return; + managed_styles.forEach((info) => { + const { ownerNode } = info.stylesheet; + // there is no ownerNode if it runs on jsdom. + if (ownerNode) detach(ownerNode); + }); + managed_styles.clear(); + }); } - - - /** @typedef {Object} StyleInformation * @property {CSSStyleSheet} stylesheet - * @property {Record} rules - */ \ No newline at end of file + * @property {Record} rules + */