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

inject css in head to prevent content shift when using SSR, fixes #1760 #1988

Closed
wants to merge 4 commits into from

Conversation

buhrmi
Copy link
Contributor

@buhrmi buhrmi commented Sep 25, 2024

Svelte 4 removed the CSS output from the component's render method. However, the css: 'inject' compiler option can be used instead to inject that CSS into the <head>, as documented here. According to Rich Harris, this solution is only for toy projects. So I guess we'll just stay a toy project forever.

@pedroborges
Copy link
Collaborator

@buhrmi My understanding from issue #1760 is that the css: 'inject' compiler option is typically needed when you are styling directly within components. Since that's not the case for the Svelte playground, I'm not sure if the change is necessary. Also, I haven't noticed any CSS-related issues in the current playground setup.

Could you clarify if I'm missing something here? If the issue you were facing has been resolved, feel free to close the PR 😉

@buhrmi
Copy link
Contributor Author

buhrmi commented Sep 27, 2024

@pedroborges Yeah, you're right. It doesn't make sense to add this to the playground. For some reason, my mind was set on providing a "feature-complete" reference project, where styling in components also works. But yeah, since the playground isn't using any regular styling (only tailwind), it doesn't make sense. We should however find a place in the documentation to tell people that css: 'inject' is needed for SSR when using component styling.

@buhrmi buhrmi closed this Sep 27, 2024
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 this pull request may close these issues.

2 participants