An empty style-tag is appended to head every time an element with a transition-directive is mounted

[MathiasWP]

Describe the bug

See the title.

I've tested with the animate-directive as well, but I am only able to achieve this behaviour with transitions.

Reproduction

Repo:
https://github.com/MathiasWP/svelte-transition-stylesheet-bug

REPL (inspect the sandbox and look at the head in its document):
https://svelte.dev/repl/8fb5cf66517145568d2391b6a4c4d92c?version=3.46.4

Logs

No response

System Info

System:
    OS: macOS 11.4
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 47.91 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.1.0 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 98.1.35.100
    Chrome: 98.0.4758.80
    Edge: 98.0.1108.43
    Firefox: 95.0.2
    Safari: 14.1.1

Severity

annoyance

[Prinzhorn]

Related (duplicate?) #7164 #4801

[MathiasWP]

I have tried looking into the reason for this behaviour. My intuition is that it comes from the style_manager.ts, because it uses the "append_empty_stylesheet" function when it creates a rule. Creating a rule is done every time a transition is performed.

The style_manager has a "clear_rules" method which is used for cleanup. This function deletes all rules in the stylesheets the style_manager has created. Is there a reason why it does this instead of removing the stylesheets from the DOM?

Edit: It seems like the behaviour is like that is because the style_manager should only create one stylesheet for every document, and edits this single stylesheet.

[bluwy]

Closing this as duplicate as mentioned by @Prinzhorn. It would be great if you can bring your findings over at either of the linked issues @MathiasWP