diff --git a/app.js b/app.js index ef9bf88..50acb82 100644 --- a/app.js +++ b/app.js @@ -30,7 +30,7 @@ const {DOM, Tag} = Gale({ Orange:{ background:"orange" } -}); +}, "abilities"); const UI =()=> { diff --git a/dist/core.d.ts b/dist/core.d.ts index 856a79b..6b43dfe 100644 --- a/dist/core.d.ts +++ b/dist/core.d.ts @@ -83,8 +83,8 @@ declare global type FilterKeys = Keys extends `${KeyChild|KeyGroup}${infer Rest}` ? Keys : never type CrossMultiply = A extends string ? B extends string ? `${A}${B}` : never : never type CrossMultiplyRecord = keyof Rec | { [K in keyof Rec]: K extends string ? CrossMultiply>> : never }[keyof Rec] - type Tier = (selector:string, obj:UserStyles)=>string; - type CreateSheet = (sheet:UserSheet&T)=>{Tag:(...args:CrossMultiplyRecord[])=>string, CSS:string, DOM:Elemental>} + type Tier = (selector:string, obj:UserStyles, suffix:string)=>string; + type CreateSheet = (sheet:UserSheet&T, hash?:string)=>{Tag:(...args:CrossMultiplyRecord[])=>string, CSS:string, DOM:Elemental>} type Elemental = {[K in keyof HTMLElementTagNameMap]: Van.TagFunc&Circular} diff --git a/shadow.html b/shadow.html new file mode 100644 index 0000000..37f2ad2 --- /dev/null +++ b/shadow.html @@ -0,0 +1,43 @@ + + + + + + Shadow DOM Example + + + + + + + + + \ No newline at end of file diff --git a/src/gale.js b/src/gale.js index b61221c..7feea22 100644 --- a/src/gale.js +++ b/src/gale.js @@ -4,7 +4,7 @@ const KeyChild = "."; const KeyGroup = "^"; /** @type {Gale.Tier} */ -const Tier=(selector, obj)=> +const Tier=(selector, obj, suffix)=> { const styles = Object.keys(obj).map((key)=> { @@ -12,27 +12,26 @@ const Tier=(selector, obj)=> switch(key[0]) { case KeyQuery : - return Tier(`@media(max-width:${key.substring(KeyQuery.length)})`, value); + return Tier(`@media(max-width:${key.substring(KeyQuery.length)})`, value, suffix); case KeyPseudo : - return Tier(`&${key}`, value); + return Tier(`&${key}`, value, suffix); case KeyChild : - return Tier(`${key}`, value); + return Tier(`${key}${suffix}`, value, suffix); case KeyGroup : - return Tier(`&:hover .${key.substring(KeyGroup.length)}`, value); + return Tier(`&:hover .${key.substring(KeyGroup.length)}${suffix}`, value, suffix); } return `${ key.replace(/([a-z])([A-Z])/g, '$1-$2') }: ${value};` }); + return `${selector}{${styles.join("\n")}}`; } -let i = 1; /** @type {Gale.CreateSheet} */ -globalThis.Gale =sheet=> +globalThis.Gale =(sheet, hash="")=> { - const id = i ? "_"+i : ""; - i++; - const css = Object.keys(sheet).map(key=>Tier("."+key, sheet[key])).join(`\n`); - globalThis.document?.head.insertAdjacentHTML("beforeend", ``); + const id = hash ? "_"+hash : ""; + const css = Object.keys(sheet).map(key=>Tier("."+key+id, sheet[key], id)).join(`\n`); + globalThis.document?.head.insertAdjacentHTML("beforeend", ``); /** @type {(needle:string, str:string)=>string} */ const extractLast =(needle, str)=>{ @@ -55,8 +54,7 @@ globalThis.Gale =sheet=> (...args)=> { const element = van.tags[pending](...args); - element.className && mentioned.push(element.className); - element.className = mentioned.join(" "); + element.className = mentioned.join(id+" ")+id + " " + element.className; return element; }, {