Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Injecting CSS via <svelte:head> breaks loading +layout css #13086

Closed
brianschwabauer opened this issue Aug 30, 2024 · 1 comment · Fixed by #13152
Closed

Injecting CSS via <svelte:head> breaks loading +layout css #13086

brianschwabauer opened this issue Aug 30, 2024 · 1 comment · Fixed by #13152

Comments

@brianschwabauer
Copy link

brianschwabauer commented Aug 30, 2024

Describe the bug

One of my pages has the following code. Adding this code prevents the proper CSS loading for all subsequent +layout/+page css files. The /+layout.svelte?t=1724986125513&svelte&type=style&lang.css file shows up in the network tab, but the css is never injected into the head of the document.

<svelte:head>
  <link rel="stylesheet" href="https://example.com/styles.css" />
  <script type="module" src="https://example.com/script.esm.js"></script>
</svelte:head>

Here's a video showing me navigating from the "Delivery Page" page (where the svelte:head code is) to the "Media" page where the CSS is broken. But when I refresh on the "Media " page, the CSS loads properly.
https://github.com/user-attachments/assets/5c52acd0-8738-4092-b97b-d15b7e2a59f2

Reproduction

Here's a minimal reproduction:

https://stackblitz.com/edit/svelte5-sveltehead-css-issue?file=src%2Froutes%2F%2Blayout.svelte,src%2Froutes%2Fchild1%2F%2Bpage.svelte,src%2Froutes%2Fchild2%2F%2Bpage.svelte,src%2Froutes%2Fchild3%2F%2Bpage.svelte

Here's the real world video of it happening:

2024-08-30.15-59-57.mp4

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
    Memory: 28.03 GB / 63.86 GB
  Binaries:
    Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.5.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.2.0 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Chrome: 127.0.6533.100
    Edge: Spartan (44.19041.1266.0), Chromium (127.0.2651.74)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    svelte: 5.0.0-next.240 => 5.0.0-next.240

Severity

blocking an upgrade

@dummdidumm
Copy link
Member

Investigation so far: This is because of <script> being the last in the head. We have a run_scripts function which is invoked in this case, and that function replaces the script tags (so that they actually run). But because it's last in the chain, the replacement is not picked up by our node.last_node logic anymore, so it contains a stale tag. That means on cleanup the remove logic just runs past the script tag till the very end of the head, removing the just added style tag from the new page.

dummdidumm added a commit that referenced this issue Sep 6, 2024
We have a `run_scripts` function which is invoked in case a template block contains a script tag, and that function replaces the script tags (so that they actually run). If such a script tag is first or last in the template, the replacement is not picked up by our `node.first_node/last_node` logic anymore, and so it contains a stale tag. That means on cleanup the remove logic fails. In the case of the referenced issue, it just runs past the script tag till the very end of the head, removing the just added style tag from the new page.

Fixes #13086
dummdidumm added a commit that referenced this issue Sep 6, 2024
We have a `run_scripts` function which is invoked in case a template block contains a script tag, and that function replaces the script tags (so that they actually run). If such a script tag is first or last in the template, the replacement is not picked up by our `node.first_node/last_node` logic anymore, and so it contains a stale tag. That means on cleanup the remove logic fails. In the case of the referenced issue, it just runs past the script tag till the very end of the head, removing the just added style tag from the new page.

Fixes #13086
dummdidumm added a commit that referenced this issue Sep 6, 2024
We have a `run_scripts` function which is invoked in case a template block contains a script tag, and that function replaces the script tags (so that they actually run). If such a script tag is first or last in the template, the replacement is not picked up by our `node.first_node/last_node` logic anymore, and so it contains a stale tag. That means on cleanup the remove logic fails. In the case of the referenced issue, it just runs past the script tag till the very end of the head, removing the just added style tag from the new page.

Fixes #13086
dummdidumm added a commit that referenced this issue Sep 6, 2024
We have a `run_scripts` function which is invoked in case a template block contains a script tag, and that function replaces the script tags (so that they actually run). If such a script tag is first or last in the template, the replacement is not picked up by our `node.first_node/last_node` logic anymore, and so it contains a stale tag. That means on cleanup the remove logic fails. In the case of the referenced issue, it just runs past the script tag till the very end of the head, removing the just added style tag from the new page.

Fixes #13086
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants