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.

Sign up for GitHub

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

Jump to bottom

✨Ability to compile on build instead of JIT #81

Closed
henrikvilhelmberglund opened this issue Nov 4, 2022 · 5 comments
Closed

✨Ability to compile on build instead of JIT #81

henrikvilhelmberglund opened this issue Nov 4, 2022 · 5 comments
Labels
feature New feature
Milestone
2.0 RC

Comments

@henrikvilhelmberglund
Copy link

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: sveltejs/kit#6227
@henrikvilhelmberglund henrikvilhelmberglund added the feature New feature label Nov 4, 2022
@1aron
Copy link
Member

1aron commented Nov 4, 2022 •
edited
Loading

@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
Copy link
Member

1aron commented Nov 29, 2022

#58 (comment)

@1aron 1aron closed this as completed Nov 29, 2022
@1aron 1aron added this to the Master CSS 2.0 milestone Jan 18, 2023
@1aron
Copy link
Member

1aron commented Mar 22, 2023

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
Copy link
Member

1aron commented Mar 29, 2023 •
edited
Loading

@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
Copy link
Member

1aron commented Jul 12, 2023

@henrikvilhelmberglund Check out the latest Svelte examples:

Compilation Modes of Master CSS

  • Progressive Rendering - Scan the requested HTML on the server side, generate CSS rules, and enable runtime-rendering compilation on the browser side
  • Runtime Rendering - Observe the DOM tree, manipulate CSS rules according to the changed class name, and synchronize to the running style sheet at runtime (Just-in-time)
  • Static Extraction - Scan source files for class names at build time, extract class names, and generate CSS files/virtual modules, then import them in the entry file (Ahead-of-time)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature New feature
Projects
None yet
Milestone
2.0 RC
Development

No branches or pull requests
2 participants
@1aron @henrikvilhelmberglund