Import FSCSS from javascript file.
In my javascript file I do something like this:
//fscss.js
//FSCSS v1.1.6
import { exec } from "https://cdn.jsdelivr.net/npm/fscss@1.1.20/e/xfscss.min.js";
const DEBUG = true;
function applyFSCSS({ type, content }) {
exec({
type,
content,
onSuccess: (styleElement) => {
DEBUG && console.log("✅ FSCSS applied:", styleElement);
},
onError: (error) => {
console.error("❌ Failed to apply FSCSS:", error);
alert("⚠️ Could not load styles. Please try again later.");
}
});
}
exec({
type,
content,
onSuccess: (styleElement) => {
DEBUG && console.log("✅ FSCSS applied:", styleElement);
},
onError: (error) => {
console.error("❌ Failed to apply FSCSS:", error);
alert("⚠️ Could not load styles. Please try again later.");
}
});
}
applyFSCSS({
type: "text",
content: `
$rgb: %3([200,]);
$bg-color: #00F0F0;
.box{
%2(
Width,
Height[: 100px;])
background: $bg-color!;
Border: 4px solid rgb($rgb!1);
}
Re(animationSettings:'3s linear infinite alternate forwards')
$(@keyframes box, .box &[animationSettings]) {
0%{
Transform: rotateX(0);
}
100%{
Transform: rotateX(360deg);
}}
`});
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" type="module"></script>
</body>
</html>
Demo:
Method 2
Old version( 1.0.0 to 1.1.5)
Test code:
<div contenteditable="true"></div>
<script>
(async function(){
let i = await import('https://cdn.jsdelivr.net/npm/fscss@1.1.2/xfscss.min.js');
fscss = i.write;
new i.exec((fscss), (`
body{
background: #eefeee;
}
$(contenteditable){
border: 4px solid #7eeff7;
caret-color: red;
}
`));
})()
</script>
Top comments (0)