How to Import FSCSS from javascript in HTML

#fscss #javascript #webcomponents #html

Import FSCSS from javascript file
In my javascript file I do something like this:

//fscss.js

async function styleWith(e){
let fscss = await import("https://wbf.tiiny.site/newFscss.js");
newFscss = (`
:root .box{ 
$rgb: %3([200,]);
$bg-color: #00F0F0;
}
.box{
  %2(
   Width, 
   Height[: 100px;]);                                                                               
            background: $bg-color!;
Border: 4px solid rgb($rgb!1);
} 
$(@keyframes box, .box &[ 3s linear infinite alternate]) {
0%{
Transform: rotateX(0);
}
100%{
Transform: rotateX(360deg);
}}
`);
fscss.exec(newFscss).use;
}
styleWith(this);

Index.html:

<!--- index.html --->
<!DOCTYPE html>
<haed>
<title>JavaScript FSCSS</title>
</head>
<body>
<div class='box'></div>
<script src='scripts/fscss.js'></script>
</body>

Example:

<!DOCTYPE html>
<html>
<body>
<div class='box' name='box'></div>
<script  src="https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-4b571a79-5bd4-c6de-a17d-ef34f7c91e90"></script>
</body>
</html>