This commit is contained in:
Seth Trowbridge 2024-08-01 08:23:47 -04:00
parent 27780931d5
commit 625d532acc
4 changed files with 29 additions and 8 deletions

View File

@ -1,3 +1,3 @@
import {config, Complex} from "./gale.tsx";
import {config} from "./gale.tsx";
export default config({other:"lol"});

View File

@ -17,6 +17,14 @@ const responsive = {
};
let sheet = {insertRule(_:string){}} as CSSStyleSheet;
if(globalThis?.document)
{
const sheetElement = document.createElement("style");
document.head.setAttribute("data-gale", "true");
document.head.appendChild(sheetElement);
sheet = sheetElement.sheet as CSSStyleSheet;
}
const styles = new Map<string, string>();
function Mapper<T extends Record<string, string>>(className:string, propertyName:string, lut:T)
{
@ -27,7 +35,9 @@ function Mapper<T extends Record<string, string>>(className:string, propertyName
if(!check)
{
const body = `{ ${propertyName}:${propertyValue}; }`;
styles.set(selector, activeQuery.val ? `{ @media(${activeQuery.val})${body}}` : body);
const rules = activeQuery.val ? `{ @media(${activeQuery.val})${body}}` : body
styles.set(selector, rules);
sheet.insertRule(selector + " " + rules);
}
return selector;
}

View File

@ -1,5 +1,16 @@
<style>
.py-01{padding:30px 0 30px 0;}
.px-01{padding:0 20px 0 20px;}
</style>
<p class="px-01 py-01">test</p>
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="app"> </div>
<script type="module">
import Gale from "./gale-custom.tsx";
document.querySelector("#app").innerHTML = `
<div class="${Gale.Q.lg( Gale.Face.sans, Gale.Q.md(Gale.Pad.large), Gale.Pad.small )}">
hey
</div>
`
</script>
</body>
</html>

View File

@ -4,5 +4,5 @@ const classes = Gale.Q.lg( Gale.Face.sans, Gale.Q.md(Gale.Pad.large), Gale.Pad.s
console.log(classes);
console.log(Gale.Sheet())
console.log(Gale.Sheet());