FOUC while loading javascript style library that needs to be loaded before DOM loading #6227
Comments
|
This isn't a bug in SvelteKit. It's because of how |
|
Fair enough. Leaving aside the pros/cons of |
|
I didn't find this thread until just now. 👀 @Rich-Harris Master CSS provides three rendering modes, including pre-rendering, runtime rendering, and static extraction same as UnoCSS and TailwindCSS.
It's recommended to use Master CSS Progressive Rendering with Svelte. It only generates the required CSS rules based on the page, rather than bundling the entire application. // src/hooks.server.ts
import { render } from '@master/css-server'
import { config } from '../master.css'
/** @type {import('@sveltejs/kit').Handle} */
export async function handle({ event, resolve }) {
return await resolve(event, {
transformPageChunk: ({ html }) => render(html, config).html
})
}See the full guide for Svelte integration: https://rc.css.master.co/docs/installation/svelte |
|
@bhvngt If you are using a pure SPA, you only need to set <!DOCTYPE html>
<html lang="en" style="display:none"> |
Uh oh!
There was an error while loading. Please reload this page.
Describe the bug
As per this comment from @Rich-Harris, after #6174 FOUC should not be possible when we are importing global css within root layout.
I have been using a style javascript library that needs to be loaded before any DOM content gets loaded. I could see FOUC happening. This is different than the scenario where styles are imported which, as per the comment, gets imported as
styletag.Reproduction
https://stackblitz.com/edit/sveltejs-kit-template-default-7xrgjy?file=src%2Froutes%2F%2Blayout.svelte,package.json,package-lock.json&terminal=dev
In the following reproduction one can see a flicker of
FOUC TESThappening on the right hand side of the band. It's best to see the preview in a separate tab.Logs
No response
System Info
Severity
annoyance
Additional Information
No response
The text was updated successfully, but these errors were encountered: