Closed 1aron closed 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.
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>
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>
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>
⚠️ 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>
Influence
renderIntoHTML
MasterCSS