Global styles or scripts

[ghostdevv]

Describe the problem

Currently in Svelte Kit the recommended way to import global styles or scripts is in your root layout, this is a problem for the following reasons:

• Slower connects will receive a FOUC (Flash Of Unstyled Content)
• Resets will remove these applied style sheets
• Styles won't be applied if js isn't functioning correctly (in some contexts)
• (opinion) it's weird

Describe the proposed solution

I was reading up in the discord and issues here and I believe one of the following is the best solution:

1. A global js/ts file and global css/scss file

   this would be my initial guess at a solution and it was even shown here Allow inclusion of global styles #1948 but the downsides are that users might want more than provided options such as less or another javascript superset that isn't provided and adding a option might add extra complexity

2. A global js/ts file

   Vite already allows for this easily and can just be treated as a secondary entry point I guess. This is already what you do in vanilla vite, for example on my personal site which is currently in routify

3. A global svelte file

   This might be familiar for those using vanilla svelte, having a App.svelte (this case would probably be better for a global.svelte file). This can be where you import your global styles but also global scripts and logic. Again this is how things are done on sites in Routify, for example global keybinds

4. Processing app.html

   It might be also possible to process the scripts and links inside of app.html and have this the place your global files are placed (processing is necessary since the script or style might be in a superset such as typescript or sass)

Alternatives considered

Writing a script or vite plugin to do this for me but this is just bad for the community

Importance

i cannot use SvelteKit without it

Additional Information

No response

[bluwy]

I think another way is to add it to app.html, but IIRC SvelteKit doesn't process it, and links to styles or scripts are static. Perhaps SvelteKit should have some way of transforming app.html, similar to Vite's index.html.

[Conduitry]

Related: #1530

[ghostdevv]

@bluwy Yep SK doesn't process app.html - already tried

[Kapsonfire-DE]

cant you just add a style tag inside your __layout.svelte to head with vanilla js on first render?

[ghostdevv]

that wouldn't solve any of the issues I brought up @Kapsonfire-DE

[Kapsonfire-DE]

From what I See , the only thing which isnt covered up is the js part. Otherwise you can add the global CSS in Layout and reflect it to the head. This ist permanent and dont have the other mentioned issues. Holen Sie sich Outlook für Android<https://aka.ms/AAb9ysg>

…

________________________________ From: GHOST ***@***.***> Sent: Monday, January 3, 2022 1:15:20 AM To: sveltejs/kit ***@***.***> Cc: Dennis Kaspar ***@***.***>; Mention ***@***.***> Subject: Re: [sveltejs/kit] Global styles or scripts (Issue #3127) that wouldn't solve any of the issues I brought up @Kapsonfire-DE<https://github.com/Kapsonfire-DE> — Reply to this email directly, view it on GitHub<#3127 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AP7SMRHACALFCK3NAQ3SPV3UUDTBRANCNFSM5K6EJEUA>. Triage notifications on the go with GitHub Mobile for iOS<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[ghostdevv]

If you read my original post then you will see why layout related styling isn't optimal. @Kapsonfire-DE

[Kapsonfire-DE]

What I'm missing? If you reflect the style in the head (outside of svelte) it wont be removed. Nothing will flicker, resets wont remove it and so on. The Idea to put this in in __layout and reflect it outside of svelte is that the css will be processed by SK - and multiple to the style will not be loaded multiple times since its cached

[ebeloded]

This is very much wanted 👍

[ghostdevv]

@Kapsonfire-DE While putting styles in your app.svelte works, these scripts/styles don't get processed by Svelte Kit which leads to limitations or extra scripts / build tools needing to be installed. Having the official way to be putting global scripts/styles in a layout (which isn't even global since it can be reset) is a bad move.

[Kapsonfire-DE]

I didnt talk about app.svelte.
You can just put in in __layout.svelte or any other component. Make it processed by svelte kit. After that, copy the css with vanilla javascript into the documents head outside of the svelte scope, which makes them persistent and global.

[ghostdevv]

Again even if you can make that work (at a initial guess it would be additional script(s)) it's terrible DX. Would love to know what your root issue is with this proposed solution @Kapsonfire-DE

[ratorx]

It would be great if app.html could just be processed by Vite in some way after SvelteKit is done with it. Vite already handles all the bundling etc. properly and works the way you would expect if you for example include a Typescript file instead of a Javascript one.

My specific use case is for pages with hydrate = false where I want to inject a small amount of deferred Javascript (or Typescript) for a background canvas animation. Achieving this with SvelteKit requires hydrating the entire page, which seems like a huge waste, especially if the animation is written in plain Javascript.