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:{
background:"orange"
}
});
}, "abilities");
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 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 Tier = (selector:string, obj:UserStyles)=>string;
type CreateSheet = <T extends UserSheet>(sheet:UserSheet&T)=>{Tag:(...args:CrossMultiplyRecord<T>[])=>string, CSS:string, DOM:Elemental<CrossMultiplyRecord<T>>}
type Tier = (selector:string, obj:UserStyles, suffix:string)=>string;
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>}

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 = "^";
/** @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", `<style data-sheet="${i}">${css}</style>`);
const id = hash ? "_"+hash : "";
const css = Object.keys(sheet).map(key=>Tier("."+key+id, sheet[key], id)).join(`\n`);
globalThis.document?.head.insertAdjacentHTML("beforeend", `<style data-sheet="${id}">${css}</style>`);
/** @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;
},
{