Closed henrikvilhelmberglund closed 1 year ago
@henrikvilhelmberglund In 2.0, we give four compilation modes for developers to choose from. Currently, the issue can be solved by AOT.
Check out the Svelte + Master CSS AOT example: https://github.com/master-co/css-compiler/tree/beta/examples/svelte
In addition, you can add JIT to hydrate it so that you can continue to reap the benefits of just-in-time compilation.
Using JIT to add following to main.js
:
import config from './master.css'
import MasterCSS from '@master/css'
export const css = new MasterCSS({ config }).
In 2.0, we refer to JIT + AOT/SSR/SSG
as Progressive Rendering
In fact, Master CSS JIT has a way to avoid FOUC. Take CDN as an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.masterCSSConfig = {
colors: {
primary: '#ff0000'
}
}
</script>
<script src="https://cdn.master.co/css@beta"></script>
<link rel="stylesheet" href="https://cdn.master.co/normal.css@beta">
<link rel="preload" as="style" href="https://cdn.master.co/normal.css@beta">
<link rel="preload" as="script" href="https://cdn.master.co/css@beta">
</head>
<body>
<h1 class="fg:primary m:50 text:center font:sans font:heavy font:48">Hello World</h1>
</body>
</html>
To preload
critical resources.
But if you want to use Svelte, React, and Vue, you need to do this by splitting @master/css
into a chunk. There is currently no official guide for this, but the progressive rendering for Svelte will be released next week!
@henrikvilhelmberglund We figured out how to fix FOUC in pure JIT mode yesterday.
It's recommended to refer to the latest ^2.0.0-beta.131 pure JIT guide: https://beta.css.master.co/docs/guides/svelte/just-in-time#avoid-fouc-in-pure-jit
Just add style="display: none;"
to <html>
in src/app.html
// src/app.html
<!DOCTYPE html>
<html lang="en" style="display: none;">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
This looks silly, but it totally works, and after I tried it, the page stopped flickering on load.
But I guess you will be more interested in our new compilation mode - Master CSS Progressive Rendering in Svelte.
@henrikvilhelmberglund Check out the latest Svelte examples:
Description
In Sveltekit at least there's a FOUC when loading the page so it would be nice if you could compile the results of master CSS when building since you're doing that with Svelte anyway.
Maybe there's a way to avoid this even now but I don't know how to.
Related: https://github.com/sveltejs/kit/issues/6227