Skip to content

Dynamic imported components - Stylesheets not getting inlined #13670

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.

Sign up for GitHub

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

Jump to bottom
Open
keshavdhawan281 opened this issue Apr 3, 2025 · 3 comments · May be fixed by #13723
Open

Dynamic imported components - Stylesheets not getting inlined #13670

keshavdhawan281 opened this issue Apr 3, 2025 · 3 comments · May be fixed by #13723
Labels
bug Something isn't working

Comments

@keshavdhawan281
Copy link

keshavdhawan281 commented Apr 3, 2025 •
edited
Loading

Describe the bug

As mentioned in sveltejs/svelte#15496

We were using inlineStyleThreshold to inline css before migration from svelte 4 to svelte 5. With this migration, we also updated sveltekit from 2.15.2 to the latest version.

This broke inline css for the cases where components are dynamically imported.

Came across this PR #13068
where we are filtering out dynamic imported stylesheets. But the case where components are dynamically imported during SSR, it should be considered to be inlined.

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-ethyrdbh

Logs

NA

System Info

NA

Severity

annoyance

Additional Information

No response
@keshavdhawan281 keshavdhawan281 mentioned this issue Apr 3, 2025
Closed
@dominikg
Copy link
Member

dominikg commented Apr 3, 2025

please update the initial description to add the relevant information from the previous bugreport in svelte repo to help sveltekit maintainers quickly understand.

@eltigerchino eltigerchino added the bug Something isn't working label Apr 7, 2025
@keshavdhawan281
Copy link
Author

Please provide an update on this. This is a blocker for our project. For now, we have downgraded sveltekit to 2.15.2 as a temp fix.

@eltigerchino eltigerchino linked a pull request Apr 17, 2025 that will close this issue
Open
6 tasks
@paras-taneja
Copy link

One more observation here -

  1. In SvelteKit version 2.16.1, the build was failing when using the inlineStyleThreshold configuration in svelte.config.js.

  2. After upgrading to the latest version (@sveltejs/kit@^2.21.0), the build now completes successfully.

  3. However, not all CSS files under the threshold are being inlined. While one larger CSS file (~30KB) was correctly inlined into the document, smaller styles (around 0.5KB to 2KB), especially those from Svelte component styles, are still being fetched separately instead of being inlined.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
4 participants
@dominikg @eltigerchino @paras-taneja @keshavdhawan281