From 625d532acc60ac7b76a366a2469fcee5096a346c Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Thu, 1 Aug 2024 08:23:47 -0400 Subject: [PATCH] idk --- gale-custom.tsx | 2 +- gale.tsx | 12 +++++++++++- index.html | 21 ++++++++++++++++----- styler.tsx | 2 +- 4 files changed, 29 insertions(+), 8 deletions(-) diff --git a/gale-custom.tsx b/gale-custom.tsx index 0a46831..828f76e 100644 --- a/gale-custom.tsx +++ b/gale-custom.tsx @@ -1,3 +1,3 @@ -import {config, Complex} from "./gale.tsx"; +import {config} from "./gale.tsx"; export default config({other:"lol"}); \ No newline at end of file diff --git a/gale.tsx b/gale.tsx index f02907f..e58c3c8 100644 --- a/gale.tsx +++ b/gale.tsx @@ -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(); function Mapper>(className:string, propertyName:string, lut:T) { @@ -27,7 +35,9 @@ function Mapper>(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; } diff --git a/index.html b/index.html index 04e08b3..38e07e8 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,16 @@ - -

test

\ No newline at end of file + + + + +
+ + + \ No newline at end of file diff --git a/styler.tsx b/styler.tsx index b3b22e8..4528a8d 100644 --- a/styler.tsx +++ b/styler.tsx @@ -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());