✨ ( Deprecated ) `config.precedence` for how to insert `<style id="master">` into the DOM tree or HTML

1aron commented 1 year ago

Description

Specifies what strategy to use for inserting <style id="master"> into the DOM tree or HTML.

`config.precedence`

`'highest'` ( default )

Use .append() to Insert <style id="master"> before the </body>

<html>
<head>...</head>
<body>
    ...
    <style id="master"></style>
</body>
</html>

Usually frameworks/libraries will insert statically/dynamically generated styles in <head>, inserting <style id="master"> before the </body> will ensure it has the highest priority most of the time.

`'higher'`

Use .append() to insert <style id="master"> before the </head>

<html>
<head>
    ...
    <style id="master"></style>
</head>
<body>...</body>
</html>

⚠️ This is actually an unsafe setting. Most frameworks/libraries also insert style sheets through this approach, so there is no guarantee that <style id="master"></style> is always before </head> and higher than others.

`'lowest'`

Insert <style id="master"> before the first-found <link> or <style>

<html>
<head>
    <style id="master"></style>
    ...
</head>
<body>...</body>
</html>

Influence

renderIntoHTML
MasterCSS

1aron commented 1 year ago

🎉 Released in https://github.com/master-co/css/releases/tag/v2.0.0-beta.131

1aron commented 1 year ago

It has been confirmed that there is a high probability that document.body does not exist when the page is initialized, causing the JIT to fail, and other countermeasures are being developed.

1aron commented 1 year ago

Deprecated at https://github.com/master-co/css/releases/tag/v2.0.0-beta.135

1aron commented 1 year ago

config.precedence has been experimentally found to cause too many side effects, so it is not intended to be supported, and we believe the following solutions are more reliable:

By default .append() is used to insert <style id="master"> in <head>.

To give the Master CSS syntax the highest priority, manually specify where it should be inserted in an entry file like index.html to ensure it is always applied first.

<!DOCTYPE html>
<html lang="en" style="display: none">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
        window.masterCSSConfig = {
            colors: {
                primary: '#ff0000'
            }
        }
    </script>
    <script src="/main.ts" type="module"></script>
+   <style id="master"></style>
</head>

<body>
    <h1 class="font:40 font:heavy italic m:50 text:center fg:primary">Hello World</h1>
    <!-- or -->
+   <style id="master"></style>
</body>

</html>

master-co / css