CODEWITHSUNDEEP
javascriptsvelte
LAZ
LAZ

Reputation: 534

Svelte transitions create empty style tags in the markup

At the moment there's a bug in svelte where any svelte/transition will create a new style in the document head when it fires. Needless to say this stacks up quickly when transitions are present all over a codebase. I was wondering if anyone found a way to either prevent this from happening or if the quick and dirty fix I made to my own site will break anything.

On the top level I setInterval() that gets all the empty styles in <head> and removes them. I'm unsure if the synchronous nature of JS makes this safe or not, or if when the timing is just right, it breaks.

Thanks

Upvotes: 1

Views: 195

Answers (2)

Dolby
Dolby

Reputation: 1

I noticed this issue recently. Until Svelte core fixes this I added this code:

const remove_empty_styles  = () => {
    var styles = document.getElementsByTagName('head')[0].getElementsByTagName('style');
    Array.from(styles).forEach(v=>{
        if (v.innerText === '')
        {
            v.parentNode.removeChild(v);
        }
    })
}
setInterval(remove_empty_styles, 10000);

Upvotes: 0

brunnerh
brunnerh

Reputation: 184524

Whether it is safe or not depends on whether the Svelte code that interacts with the style is asynchronous or not. If your code is synchronous it will run uninterrupted, however, the Svelte code might interact with the style tag in a way that causes problems if it is split up into multiple interactions.

Chances of this are low, even if the code is asynchronous because if you remove the style tag and the creating code still has a reference to it, it may not matter whether the style tag has been removed from the document or not as long there is no reliance on the hierarchy (like parent nodes). I doubt that there is much if any asynchronous interaction with the style but to be sure, you would have to check the Svelte source code responsible.

Upvotes: 2

Related Questions