SethTrowbridge/gale
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

idk

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gale-custom.tsx
View File

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

12
gale.tsx
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>(); const styles = new Map<string, string>();
function Mapper<T extends Record<string, string>>(className:string, propertyName:string, lut:T) 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) if(!check)
{ {
const body = `{ ${propertyName}:${propertyValue}; }`; 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; return selector;
} }

21
index.html
View File

@ -1,5 +1,16 @@
<style> <!DOCTYPE html>
.py-01{padding:30px 0 30px 0;} <html>
.px-01{padding:0 20px 0 20px;} <head></head>
</style> <body>
<p class="px-01 py-01">test</p> <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>

2
styler.tsx
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(classes);
console.log(Gale.Sheet()) console.log(Gale.Sheet());