reduce

app.js

@@ -1,4 +1,4 @@
-import Styles from "./styles.dev.js";
+import Styles from "./gale.js";
 
 
 const sheet = Styles({

deno.json

@@ -5,6 +5,6 @@
             "deno.window",
             "DOM"
         ],
-        "types": ["./drill.d.ts", "./types.d.ts"]
+        "types": ["./types.d.ts"]
     }
 }

drill.d.ts

@@ -1,11 +0,0 @@
-
-export {}
-declare global {
-    namespace Gale
-    {
-        type Elemental<T extends string> = {[K in keyof HTMLElementTagNameMap]: Circular<T, K>}
-        type Circular<Keys extends string, ElementName extends keyof HTMLElementTagNameMap> = {
-            [K in Keys]: Circular<Keys, ElementName>&Van.TagFunc<HTMLElementTagNameMap[ElementName]>;
-        };
-    }
-}

gale.js

@@ -1,4 +1,3 @@
-// @ts-check
 const KeyQuery = "@";
 const KeyPseudo = ":";
 const KeyChild = ".";
@@ -51,8 +50,41 @@ const Tier=(selector, obj)=>
     return `${selector}{${styles.join("\n")}}`;
 }
 
+
+/** @type {<T extends UserSheet>(ref:T)=>Gale.Elemental<CrossMultiplyRecord<T>>} */
+function MakeElemental(ref)
+{
+    let pending = false;
+    let classes = [];
+
+    const collector = new Proxy((...args)=>{
+        console.log("original func invoked!", pending, classes);
+        const element = van.tags[pending](...args);
+        element.className = classes.join(" ");
+        return element
+    },
+        {
+            get(target, prop, rec)
+            {
+                classes.push(prop);
+                return collector;
+            }
+        }
+    );
+
+    const obj = new Proxy({}, {get(target, prop, rec)
+        {
+            pending = prop;
+            classes = [];
+            return collector;
+        }
+    });
+
+    return obj;
+}
+
 let i = 0;
-/** @type {<T extends UserSheet>(sheet:UserSheet&T)=> ((...args:CrossMultiplyRecord<T>[])=>string)&{css:string}} */
+/** @type {<T extends UserSheet>(sheet:UserSheet&T)=> ((...args:CrossMultiplyRecord<T>[])=>string)&{css:string, dom:Gale.Elemental<CrossMultiplyRecord<T>>} } */
 export default (sheet)=>
 {
     const id = i ? "_"+i : "";
@@ -68,5 +100,6 @@ export default (sheet)=>
         return args.map((arg)=>extractLast(KeyGroup, extractLast(KeyChild, arg))).join(id+" ")+id;
     }
     classes.css = css;
+    classes.dom = MakeElemental(sheet);
     return classes;
 }

styles.dev.js

@@ -1,105 +0,0 @@
-const KeyQuery = "@";
-const KeyPseudo = ":";
-const KeyChild = ".";
-const KeyGroup = "^";
-
-/** @typedef { Partial<CSSStyleDeclaration> & {[key: `${KeyQuery|KeyPseudo|KeyChild|KeyGroup}${string}`]: UserStyles } } UserStyles */
-/** @typedef {Record<string, UserStyles>} UserSheet */
-
-
-/**
- * @template Obj
- * @typedef { { [Key in keyof Obj]: Obj[Key] extends object ? Key | CollectKeys<Obj[Key]> : Key }[keyof Obj] } CollectKeys
- */
-
-/**
- * @template Keys
- * @typedef { Keys extends `${KeyChild|KeyGroup}${infer Rest}` ? Keys : never } FilterKeys
- */
-/**
- * @template A
- * @template B
- * @typedef {A extends string ? B extends string ? `${A}${B}` : never : never } CrossMultiply
- */
-
-/**
- * @template Rec
- * @typedef { keyof Rec | { [K in keyof Rec]: K extends string ? CrossMultiply<K, FilterKeys<CollectKeys<Rec[K]>>> : never }[keyof Rec] } CrossMultiplyRecord
- */
-
-
-/** @type {(selector:string, obj:UserStyles)=>string} */
-const Tier=(selector, obj)=>
-{
-    const styles = Object.keys(obj).map((key)=>
-    {
-        const value = obj[key];
-        switch(key[0])
-        {
-            case KeyQuery :
-                return Tier(`@media(max-width:${key.substring(KeyQuery.length)})`, value);
-            case KeyPseudo :
-                return Tier(`&${key}`, value);
-            case KeyChild :
-                return Tier(`${key}`, value);
-            case KeyGroup :
-                return Tier(`&:hover .${key.substring(KeyGroup.length)}`, value);
-        }
-        return `${ key.replace(/([a-z])([A-Z])/g, '$1-$2') }: ${value};`
-    });
-    return `${selector}{${styles.join("\n")}}`;
-}
-
-
-/** @type {<T extends UserSheet>(ref:T)=>Gale.Elemental<CrossMultiplyRecord<T>>} */
-function MakeElemental(ref)
-{
-    let pending = false;
-    let classes = [];
-
-    const collector = new Proxy((...args)=>{
-        console.log("original func invoked!", pending, classes);
-        const element = van.tags[pending](...args);
-        element.className = classes.join(" ");
-        return element
-    },
-        {
-            get(target, prop, rec)
-            {
-                classes.push(prop);
-                return collector;
-            }
-        }
-    );
-
-    const obj = new Proxy({}, {get(target, prop, rec)
-        {
-            pending = prop;
-            classes = [];
-            return collector;
-        }
-    });
-
-    return obj;
-}
-
-let i = 0;
-/** @type {<T extends UserSheet>(sheet:UserSheet&T)=> ((...args:CrossMultiplyRecord<T>[])=>string)&{css:string, dom:Gale.Elemental<CrossMultiplyRecord<T>>} } */
-export default (sheet)=>
-{
-    const id = i ? "_"+i : "";
-    i++;
-    const css = Object.keys(sheet).map(key=>Tier("."+key, sheet[key])).join(`\n`);
-    globalThis.document?.head.insertAdjacentHTML("beforeend", `<style data-sheet="${i}">${css}</style>`);
-    const classes =(...args)=>{
-        /** @type {(needle:string, str:string)=>string} */
-        const extractLast =(needle, str)=>{
-            const ind = str.lastIndexOf(needle)+needle.length;
-            return ind ? str.substring(ind) : str;
-        }
-        return args.map((arg)=>extractLast(KeyGroup, extractLast(KeyChild, arg))).join(id+" ")+id;
-    }
-    classes.css = css;
-    classes.dom = MakeElemental(sheet);
-    return classes;
-}

types.d.ts

@@ -80,6 +80,12 @@ declare global
     type CrossMultiplyRecord<Rec> = keyof Rec | { [K in keyof Rec]: K extends string ? CrossMultiply<K, FilterKeys<CollectKeys<Rec[K]>>> : never }[keyof Rec]
     type Tier = (selector:string, obj:UserStyles)=>string;
     type CreateSheet = <T extends UserSheet>(sheet:UserSheet&T)=> ((...args:CrossMultiplyRecord<T>[])=>string)&{css:string}
+    
+    type Elemental<T extends string> = {[K in keyof HTMLElementTagNameMap]: Circular<T, K>}
+    type Circular<Keys extends string, ElementName extends keyof HTMLElementTagNameMap> = {
+        [K in Keys]: Circular<Keys, ElementName>&Van.TagFunc<HTMLElementTagNameMap[ElementName]>;
+    };
+  
   }
 
   const Gale:Gale.CreateSheet