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

fix hashing/id per-sheet

Browse Source
This commit is contained in:
Seth Trowbridge 2025-02-25 09:09:51 -05:00
parent 511f37c167
commit 178ea703fe
4 changed files with 57 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.js
View File

@ -30,7 +30,7 @@ const {DOM, Tag} = Gale({
Orange:{ Orange:{
background:"orange" background:"orange"
} }
}); }, "abilities");
const UI =()=> const UI =()=>
{ {

4
dist/core.d.ts vendored
View File

@ -83,8 +83,8 @@ declare global
type FilterKeys<Keys> = Keys extends `${KeyChild|KeyGroup}${infer Rest}` ? Keys : never type FilterKeys<Keys> = Keys extends `${KeyChild|KeyGroup}${infer Rest}` ? Keys : never
type CrossMultiply<A, B> = A extends string ? B extends string ? `${A}${B}` : never : never type CrossMultiply<A, B> = A extends string ? B extends string ? `${A}${B}` : never : never
type CrossMultiplyRecord<Rec> = keyof Rec | { [K in keyof Rec]: K extends string ? CrossMultiply<K, FilterKeys<CollectKeys<Rec[K]>>> : never }[keyof Rec] 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 Tier = (selector:string, obj:UserStyles, suffix:string)=>string;
type CreateSheet = <T extends UserSheet>(sheet:UserSheet&T)=>{Tag:(...args:CrossMultiplyRecord<T>[])=>string, CSS:string, DOM:Elemental<CrossMultiplyRecord<T>>} type CreateSheet = <T extends UserSheet>(sheet:UserSheet&T, hash?:string)=>{Tag:(...args:CrossMultiplyRecord<T>[])=>string, CSS:string, DOM:Elemental<CrossMultiplyRecord<T>>}
type Elemental<T extends string> = {[K in keyof HTMLElementTagNameMap]: Van.TagFunc<HTMLElementTagNameMap[K]>&Circular<T, K>} type Elemental<T extends string> = {[K in keyof HTMLElementTagNameMap]: Van.TagFunc<HTMLElementTagNameMap[K]>&Circular<T, K>}

43
shadow.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow DOM Example</title>
</head>
<body>
<script>
// Define the custom web component
class APP extends HTMLElement {
constructor() {
super();
// Attach a shadow root to the custom element
const shadowRoot = this.attachShadow({ mode: 'open' });
// Add custom markup and styles to the shadow root
shadowRoot.innerHTML = `
<style>
.shadow-content {
color: white;
background-color: black;
padding: 10px;
border-radius: 5px;
}
</style>
<div class="shadow-content">
This is content inside the shadow root of a web component.
</div>
`;
}
}
// Register the custom element
customElements.define('gale-app', APP);
</script>
<gale-app></gale-app>
</body>
</html>

24
src/gale.js
View File

@ -4,7 +4,7 @@ const KeyChild = ".";
const KeyGroup = "^"; const KeyGroup = "^";
/** @type {Gale.Tier} */ /** @type {Gale.Tier} */
const Tier=(selector, obj)=> const Tier=(selector, obj, suffix)=>
{ {
const styles = Object.keys(obj).map((key)=> const styles = Object.keys(obj).map((key)=>
{ {
@ -12,27 +12,26 @@ const Tier=(selector, obj)=>
switch(key[0]) switch(key[0])
{ {
case KeyQuery : 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 : case KeyPseudo :
return Tier(`&${key}`, value); return Tier(`&${key}`, value, suffix);
case KeyChild : case KeyChild :
return Tier(`${key}`, value); return Tier(`${key}${suffix}`, value, suffix);
case KeyGroup : 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 `${ key.replace(/([a-z])([A-Z])/g, '$1-$2') }: ${value};`
}); });
return `${selector}{${styles.join("\n")}}`; return `${selector}{${styles.join("\n")}}`;
} }
let i = 1;
/** @type {Gale.CreateSheet} */ /** @type {Gale.CreateSheet} */
globalThis.Gale =sheet=> globalThis.Gale =(sheet, hash="")=>
{ {
const id = i ? "_"+i : ""; const id = hash ? "_"+hash : "";
i++; const css = Object.keys(sheet).map(key=>Tier("."+key+id, sheet[key], id)).join(`\n`);
const css = Object.keys(sheet).map(key=>Tier("."+key, sheet[key])).join(`\n`); globalThis.document?.head.insertAdjacentHTML("beforeend", `<style data-sheet="${id}">${css}</style>`);
globalThis.document?.head.insertAdjacentHTML("beforeend", `<style data-sheet="${i}">${css}</style>`);
/** @type {(needle:string, str:string)=>string} */ /** @type {(needle:string, str:string)=>string} */
const extractLast =(needle, str)=>{ const extractLast =(needle, str)=>{
@ -55,8 +54,7 @@ globalThis.Gale =sheet=>
(...args)=> (...args)=>
{ {
const element = van.tags[pending](...args); const element = van.tags[pending](...args);
element.className && mentioned.push(element.className); element.className = mentioned.join(id+" ")+id + " " + element.className;
element.className = mentioned.join(" ");
return element; return element;
}, },
{ {