search

master-co / css

The CSS Language and Framework
https://css.master.co
MIT License
1.78k stars 41 forks source link

✨Ability to compile on build instead of JIT #81

Closed henrikvilhelmberglund closed 1 year ago

henrikvilhelmberglund commented 1 year ago

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

1aron commented 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

1aron commented 1 year ago

https://github.com/master-co/css/issues/58#issuecomment-1326029327

1aron commented 1 year ago

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!

1aron commented 1 year ago

@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.

1aron commented 1 year ago

@henrikvilhelmberglund Check out the latest Svelte examples:

Compilation Modes of Master CSS