frankenstyle 0.0.2 → 0.0.3

package/dist/js/frankenstyle.js

@@ -1 +1 @@
-(()=>{const breakpoints={sm:"40rem",md:"48rem",lg:"64rem",xl:"80rem","2xl":"96rem"};const aliases={w:"width",h:"height",m:"margin",p:"padding","[p]":"padding",bg:"background-color",color:"color"};const withScaling=new Set(["m","p"]);const withDark=new Set(["background-color","color"]);const excludedVars=new Set(["spacing"]);const ruleTemplates={".bg":{"background-color":"color-mix(in oklab,var(--bg-{s})var(--bg-opacity-{s},100%),transparent)"},".color":{color:"color-mix(in oklab,var(--color-{s})var(--color-opacity-{s},100%),transparent)"}};function extractCSSVariables(rules){const variables=new Set;for(const ruleSet of Object.values(rules)){for(const value of Object.values(ruleSet)){const matches=value.match(/--([a-zA-Z][a-zA-Z0-9-]*)-\{s\}/g);if(matches){matches.forEach(match=>{const varName=match.replace("--","").replace("-{s}","");if(!excludedVars.has(varName)){variables.add(varName)}})}}}return variables}function buildVariableChain(bp,variable,order,i,dark=false){const darkPrefix=dark?"dark-":"";const escapedBp=bp==="2xl"?"\\32xl":bp;let chain=`var(--${darkPrefix}${escapedBp}-${variable}`;for(let j=i-1;j>=0;j--){const prev=order[j];const escapedPrev=prev==="2xl"?"\\32xl":prev;chain+=`, var(--${darkPrefix}${escapedPrev}-${variable}`}chain+=`, var(--${variable})`;chain+=")".repeat(i+1);return chain}function expandRuleTemplates(base,breakpoints,withDark){const order=Object.keys(breakpoints);const expanded={...base};const cssVariables=extractCSSVariables(base);for(const[selector,rules]of Object.entries(base)){for(let i=0;i<order.length;i++){const bp=order[i];const escapedBp=bp==="2xl"?"\\32xl":bp;const bpSelector=`.${escapedBp}\\:${selector.slice(1)}`;expanded[bpSelector]={};for(const[prop,value]of Object.entries(rules)){let expandedValue=value;for(const variable of cssVariables){const pattern=new RegExp(`var\\(--${variable}-\\{s\\}\\)`,"g");if(expandedValue.match(pattern)){const chain=buildVariableChain(bp,variable,order,i);expandedValue=expandedValue.replace(pattern,chain)}}expanded[bpSelector][prop]=expandedValue;if(withDark.has(prop)){const darkSelector=`.dark ${bpSelector}`;let darkValue=value;for(const variable of cssVariables){const pattern=new RegExp(`var\\(--${variable}-\\{s\\}\\)`,"g");if(darkValue.match(pattern)){const darkChain=buildVariableChain(bp,variable,order,i,true);darkValue=darkValue.replace(pattern,darkChain)}}if(!expanded[darkSelector]){expanded[darkSelector]={}}expanded[darkSelector][prop]=darkValue}}}for(const[prop,value]of Object.entries(rules)){if(withDark.has(prop)){let baseDarkValue=value;for(const variable of cssVariables){const pattern=new RegExp(`var\\(--${variable}-\\{s\\}\\)`,"g");if(baseDarkValue.match(pattern)){baseDarkValue=baseDarkValue.replace(pattern,`var(--dark-${variable}-{s}, var(--${variable}-{s}))`)}}const darkSelector=`.dark ${selector}`;if(!expanded[darkSelector]){expanded[darkSelector]={}}expanded[darkSelector][prop]=baseDarkValue}}}return expanded}const whitelist=expandRuleTemplates(ruleTemplates,breakpoints,withDark);const ruleCache=new Map;let pendingMutations=new Set;let mutationBatchTimeout=null;function stripBrackets(propAlias){return propAlias.replace(/^\[|\]$/g,"")}function applyStateToWhitelist(ruleObj,state){const updated={};let needDark=false;for(const[prop,val]of Object.entries(ruleObj)){updated[prop]=val.replace(/{s}/g,state);if(withDark.has(prop)){needDark=true}}let darkVariant=null;if(needDark){darkVariant={};for(const[prop,val]of Object.entries(ruleObj)){let darkVal=val.replace(/{s}/g,state);darkVal=darkVal.replace(/var\((--[a-z0-9-]+)([^)]*)\)/gi,(match,varName,rest)=>{if(excludedVars.has(varName)){return match}const darkName=`--dark-${varName.slice(2)}`;return`var(${darkName}, var(${varName}${rest}))`});darkVariant[prop]=darkVal}}return{updated:updated,darkVariant:darkVariant}}function buildNestedFallback(varNames){if(varNames.length===1){return`var(${varNames[0]})`}return varNames.reduceRight((acc,varName)=>acc?`var(${varName}, ${acc})`:`var(${varName})`)}function buildDarkFallback(varNames,propAlias,state){const darkVars=varNames.map(varName=>{const match=varName.match(/^--(.+?)(-\w+)?$/);if(!match){return varName}const[,base]=match;return`--dark-${base}-${state}`});const normalFallback=buildNestedFallback(varNames);return darkVars.reduceRight((acc,darkVar)=>acc?`var(${darkVar}, ${acc})`:`var(${darkVar}, ${normalFallback})`)}function escapeClassName(name){if(typeof CSS!=="undefined"&&typeof CSS.escape==="function"){return CSS.escape(name)}let s=name.replace(/[:\s]/g,"\\$&");if(/^\d/.test(s)){const hex=name.charCodeAt(0).toString(16);s=`\\${hex} ${s.slice(1)}`}return s}function buildCSSBlock(selector,ruleObj){const cacheKey=`${selector}:${JSON.stringify(ruleObj)}`;if(ruleCache.has(cacheKey)){return ruleCache.get(cacheKey)}const block=`${selector} {\n`+Object.entries(ruleObj).map(([k,v])=>`  ${k}: ${v};`).join("\n")+`\n}`;if(ruleCache.size>1e3){const firstKey=ruleCache.keys().next().value;ruleCache.delete(firstKey)}ruleCache.set(cacheKey,block);return block}const classPartsRegex=/\s+/;function getClassProcessingKey(cls,breakpoint,propAlias,state){return`${cls}|${breakpoint||""}|${propAlias}|${state}`}function generateInteractiveStyles(){const nodes=document.querySelectorAll("[data-fs-interactive]");nodes.forEach(node=>{if(!node.style.contain){node.style.contain="style"}});const blocksByBp=new Map;const processedClasses=new Set;const pushBlock=(bpKey,blockText)=>{if(!blocksByBp.has(bpKey))blocksByBp.set(bpKey,[]);blocksByBp.get(bpKey).push(blockText)};nodes.forEach(node=>{const classes=String(node.className||"").split(classPartsRegex).filter(Boolean);classes.forEach(cls=>{if(!cls.includes(":")){return}const parts=cls.split(":").filter(Boolean);if(parts.length<2){return}let state=null;let breakpoint=null;let propAlias=null;if(parts.length===2){[propAlias,state]=parts}else if(parts.length===3){[breakpoint,propAlias,state]=parts}else{state=parts.pop();propAlias=parts.pop();breakpoint=parts.length?parts.join(":"):null}if(!state||!propAlias){return}const classKey=getClassProcessingKey(cls,breakpoint,propAlias,state);if(processedClasses.has(classKey)){return}processedClasses.add(classKey);const selectorKey=breakpoint?`.${breakpoint}.${propAlias}`:`.${propAlias}`;const whitelistRule=whitelist[selectorKey];const darkWhitelistRule=whitelist[`.dark ${selectorKey}`];if(whitelistRule){normalRuleObj={};for(const[prop,val]of Object.entries(whitelistRule)){normalRuleObj[prop]=val.replace(/{s}/g,state)}if(darkWhitelistRule){darkRuleObj={};for(const[prop,val]of Object.entries(darkWhitelistRule)){darkRuleObj[prop]=val.replace(/{s}/g,state)}}}else{const cssProp=aliases[propAlias];if(!cssProp){console.warn(`Unknown property alias: ${propAlias} (from ${cls})`);return}const shouldScale=withScaling.has(propAlias);const cleanPropAlias=stripBrackets(propAlias);let varNames;if(breakpoint){const bpOrder=["2xl","xl","lg","md","sm"];const startIndex=bpOrder.indexOf(breakpoint);if(startIndex===-1){varNames=[`--${breakpoint}-${cleanPropAlias}-${state}`]}else{varNames=[];for(let i=startIndex;i<bpOrder.length;i++){varNames.push(`--${bpOrder[i]}-${cleanPropAlias}-${state}`)}varNames.push(`--${cleanPropAlias}-${state}`)}}else{varNames=[`--${cleanPropAlias}-${state}`]}const nestedFallback=buildNestedFallback(varNames);if(shouldScale){normalRuleObj={[cssProp]:`calc(var(--spacing) * ${nestedFallback})`}}else{normalRuleObj={[cssProp]:nestedFallback}}if(withDark.has(cssProp)){const darkFallback=buildDarkFallback(varNames,cleanPropAlias,state);darkRuleObj={[cssProp]:shouldScale?`calc(var(--spacing) * ${darkFallback})`:darkFallback}}}const esc=escapeClassName(cls);const normalSelector=`.${esc}:${state}`;const normalBlock=buildCSSBlock(normalSelector,normalRuleObj);if(darkRuleObj){const darkSelector=`.dark .${esc}:${state}`;const darkBlock=buildCSSBlock(darkSelector,darkRuleObj);if(breakpoint&&breakpoints[breakpoint]){pushBlock(breakpoint,darkBlock)}else{pushBlock("base",darkBlock)}}if(breakpoint&&breakpoints[breakpoint]){pushBlock(breakpoint,normalBlock)}else{pushBlock("base",normalBlock)}})});const parts=[];const baseBlocks=blocksByBp.get("base");if(baseBlocks?.length){parts.push(...baseBlocks)}const orderedBps=["sm","md","lg","xl","2xl"];for(const bp of orderedBps){const arr=blocksByBp.get(bp);if(!arr?.length){continue}const joined=arr.join("\n\n");parts.push(`@media (min-width: ${breakpoints[bp]}) {\n${joined}\n}`)}const finalCss=parts.length?"@layer styles {\n"+parts.join("\n\n")+"\n}":"";requestAnimationFrame(()=>{let styleTag=document.getElementById("fs-interactive-styles");if(!styleTag){styleTag=document.createElement("style");styleTag.id="fs-interactive-styles";document.head.appendChild(styleTag)}styleTag.textContent=finalCss})}let scheduled=null;function handleMutations(mutationsList){let hasRelevantChanges=false;for(const mutation of mutationsList){if(mutation.type==="attributes"){const{attributeName:attributeName,target:target}=mutation;if(attributeName==="class"||attributeName==="data-fs-interactive"){pendingMutations.add(target);hasRelevantChanges=true}}else if(mutation.type==="childList"){const checkNodes=[...mutation.addedNodes,...mutation.removedNodes];for(const node of checkNodes){if(node.nodeType===1){if(node.hasAttribute?.("data-fs-interactive")||node.querySelector?.("[data-fs-interactive]")){hasRelevantChanges=true;break}}}}}if(hasRelevantChanges){scheduleGenerate()}}function scheduleGenerate(){if(scheduled){clearTimeout(scheduled)}scheduled=setTimeout(()=>{scheduled=null;pendingMutations.clear();generateInteractiveStyles()},60)}function init(){generateInteractiveStyles();const observer=new MutationObserver(handleMutations);observer.observe(document.body,{childList:true,subtree:true,attributes:true,attributeFilter:["data-fs-interactive","class"]});const cleanup=()=>{observer.disconnect();if(scheduled){clearTimeout(scheduled)}pendingMutations.clear();ruleCache.clear()};window.addEventListener("beforeunload",cleanup);window.__fsInteractive={regenerate:generateInteractiveStyles,stop:cleanup,clearCache:()=>ruleCache.clear(),getCacheSize:()=>ruleCache.size,getPendingMutations:()=>Array.from(pendingMutations)}}if(document.readyState==="loading"){document.addEventListener("DOMContentLoaded",init)}else{init()}})();
+const rules={"aspect-ratio":[{selector:"aspect",properties:["aspect-ratio"],arbitrary:true}],"background-color":[{selector:"bg",properties:["background-color"],arbitrary:true,dark:true}],"background-color-opacity":[{selector:"bg/o",properties:["background-color"],values:["color-mix(in oklab, var({var}) var({var2}, 100%), transparent)"],placeholders:{"{var}":"bg","{var2}":"bg-o"},dark:true}],"border-radius":[{selector:"rounded",properties:["border-radius"],arbitrary:true},{selector:"rounded-s",properties:["border-start-start-radius","border-end-start-radius"],values:["var({var})","var({var2})"],placeholders:{"{var}":"rounded-s","{var2}":"rounded-s"}},{selector:"rounded-e",properties:["border-start-end-radius","border-end-end-radius"],values:["var({var})","var({var2})"],placeholders:{"{var}":"rounded-e","{var2}":"rounded-e"}},{selector:"rounded-t",properties:["border-top-left-radius","border-top-right-radius"],values:["var({var})","var({var2})"],placeholders:{"{var}":"rounded-t","{var2}":"rounded-t"}},{selector:"rounded-r",properties:["border-top-right-radius","border-bottom-right-radius"],values:["var({var})","var({var2})"],placeholders:{"{var}":"rounded-r","{var2}":"rounded-r"}},{selector:"rounded-b",properties:["border-bottom-right-radius","border-bottom-left-radius"],values:["var({var})","var({var2})"],placeholders:{"{var}":"rounded-b","{var2}":"rounded-b"}},{selector:"rounded-l",properties:["border-top-left-radius","border-bottom-left-radius"],values:["var({var})","var({var2})"],placeholders:{"{var}":"rounded-l","{var2}":"rounded-l"}},{selector:"rounded-ss",properties:["border-start-start-radius"],arbitrary:true},{selector:"rounded-se",properties:["border-start-end-radius"],arbitrary:true},{selector:"rounded-ee",properties:["border-end-end-radius"],arbitrary:true},{selector:"rounded-es",properties:["border-end-start-radius"],arbitrary:true},{selector:"rounded-tl",properties:["border-top-left-radius"],arbitrary:true},{selector:"rounded-tr",properties:["border-top-right-radius"],arbitrary:true},{selector:"rounded-br",properties:["border-bottom-right-radius"],arbitrary:true},{selector:"rounded-bl",properties:["border-bottom-left-radius"],arbitrary:true}],bottom:[{selector:"bottom",properties:["bottom"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"bottom"}},{selector:"[bottom]",properties:["bottom"],arbitrary:true}],color:[{selector:"color",properties:["color"],arbitrary:true,dark:true}],"color-opacity":[{selector:"color/o",properties:["color"],values:["color-mix(in oklab, var({var}) var({var2}, 100%), transparent)"],placeholders:{"{var}":"color","{var2}":"color-o"},dark:true}],columns:[{selector:"columns",properties:["columns"],arbitrary:true}],"flex-basis":[{selector:"basis",properties:["flex-basis"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"basis"}},{selector:"[basis]",properties:["flex-basis"],arbitrary:true}],"flex-grow":[{selector:"grow",properties:["flex-grow"],arbitrary:true}],"flex-shrink":[{selector:"shrink",properties:["flex-shrink"],arbitrary:true}],flex:[{selector:"flex",properties:["flex"],arbitrary:true}],"from-position":[{selector:"from-position",properties:["--tw-gradient-from-position"],arbitrary:true}],from:[{selector:"from",properties:["--tw-gradient-from","--tw-gradient-stops"],values:["var({var})","var(--tw-gradient-from-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-from) var(--tw-gradient-from-position))"],placeholders:{"{var}":"from"},dark:true}],"from-opacity":[{selector:"from/o",properties:["--tw-gradient-from","--tw-gradient-stops"],values:["color-mix(in oklab, var({var}) var({var2}, 100%), transparent)","var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))"],placeholders:{"{var}":"from","{var2}":"from-o"},dark:true}],gap:[{selector:"gap",properties:["gap"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"gap"}},{selector:"gap-x",properties:["column-gap"],values:["calc(var(--spacing) * var({var}, var(--gap)))"],placeholders:{"{var}":"gap-x"}},{selector:"gap-y",properties:["row-gap"],values:["calc(var(--spacing) * var({var}, var(--gap)))"],placeholders:{"{var}":"gap-y"}},{selector:"[gap]",properties:["gap"],arbitrary:true},{selector:"[gap-x]",properties:["column-gap"],values:["var({var}, var(--gap))"],placeholders:{"{var}":"gap-x"}},{selector:"[gap-y]",properties:["row-gap"],values:["var({var}, var(--gap))"],placeholders:{"{var}":"gap-y"}}],"grid-column":[{selector:"col",properties:["grid-column"],arbitrary:true},{selector:"col-span",properties:["grid-column"],values:["span var({var}) / span var({var2})"],placeholders:{"{var}":"col-span","{var2}":"col-span"}},{selector:"col-start",properties:["grid-column-start"],arbitrary:true},{selector:"col-end",properties:["grid-column-end"],arbitrary:true}],"grid-row":[{selector:"row",properties:["grid-row"],arbitrary:true},{selector:"row-span",properties:["grid-row"],values:["span var({var}) / span var({var2})"],placeholders:{"{var}":"row-span","{var2}":"row-span"}},{selector:"row-start",properties:["grid-row-start"],arbitrary:true},{selector:"row-end",properties:["grid-row-end"],arbitrary:true}],"grid-template-columns":[{selector:"grid-cols",properties:["grid-template-columns"],values:["repeat(var({var}), minmax(0, 1fr))"],placeholders:{"{var}":"grid-cols"}},{selector:"[grid-cols]",properties:["grid-template-columns"],arbitrary:true}],"grid-template-rows":[{selector:"grid-rows",properties:["grid-template-rows"],values:["repeat(var({var}), minmax(0, 1fr))"],placeholders:{"{var}":"grid-rows"}},{selector:"[grid-rows]",properties:["grid-template-rows"],arbitrary:true}],height:[{selector:"h",properties:["height"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"h"}},{selector:"[h]",properties:["height"],arbitrary:true}],inset:[{selector:"inset",properties:["inset"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"inset"}},{selector:"start",properties:["inset-inline-start"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"start"}},{selector:"end",properties:["inset-inline-end"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"end"}},{selector:"inset-x",properties:["inset-inline"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"inset-x"}},{selector:"inset-y",properties:["inset-block"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"inset-y"}},{selector:"[inset]",properties:["inset"],arbitrary:true},{selector:"[start]",properties:["inset-inline-start"],arbitrary:true},{selector:"[end]",properties:["inset-inline-end"],arbitrary:true},{selector:"[inset-x]",properties:["inset-inline"],arbitrary:true},{selector:"[inset-y]",properties:["inset-block"],arbitrary:true}],left:[{selector:"left",properties:["left"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"left"}},{selector:"[left]",properties:["left"],arbitrary:true}],"letter-spacing":[{selector:"tracking",properties:["letter-spacing"],arbitrary:true}],"line-height":[{selector:"leading",properties:["line-height"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"leading"}},{selector:"[leading]",properties:["line-height"],arbitrary:true}],margin:[{selector:"m",properties:["margin"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"m"}},{selector:"[m]",properties:["margin"],arbitrary:true},{selector:"mt",properties:["margin-top"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"mt"}},{selector:"[mt]",properties:["margin-top"],arbitrary:true},{selector:"mb",properties:["margin-bottom"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"mb"}},{selector:"[mb]",properties:["margin-bottom"],arbitrary:true},{selector:"ml",properties:["margin-left"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"ml"}},{selector:"[ml]",properties:["margin-left"],arbitrary:true},{selector:"mr",properties:["margin-right"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"mr"}},{selector:"[mr]",properties:["margin-right"],arbitrary:true},{selector:"ms",properties:["margin-inline-start"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"ms"}},{selector:"[ms]",properties:["margin-inline-start"],arbitrary:true},{selector:"me",properties:["margin-inline-end"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"me"}},{selector:"[me]",properties:["margin-inline-end"],arbitrary:true},{selector:"mx",properties:["margin-inline"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"mx"}},{selector:"[mx]",properties:["margin-inline"],arbitrary:true},{selector:"my",properties:["margin-block"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"my"}},{selector:"[my]",properties:["margin-block"],arbitrary:true}],"max-height":[{selector:"max-h",properties:["max-height"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"max-h"}},{selector:"[max-h]",properties:["max-height"],arbitrary:true}],"max-width":[{selector:"max-w",properties:["max-width"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"max-w"}},{selector:"[max-w]",properties:["max-width"],arbitrary:true}],"min-height":[{selector:"min-h",properties:["min-height"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"min-h"}},{selector:"[min-h]",properties:["min-height"],arbitrary:true}],"min-width":[{selector:"min-w",properties:["min-width"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"min-w"}},{selector:"[min-w]",properties:["min-width"],arbitrary:true}],"object-position":[{selector:"object-position",properties:["object-position"],arbitrary:true}],order:[{selector:"order",properties:["order"],arbitrary:true}],padding:[{selector:"p",properties:["padding"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"p"}},{selector:"[p]",properties:["padding"],arbitrary:true},{selector:"pt",properties:["padding-top"],values:["calc(var(--spacing) * var({var}, var(--p)))"],placeholders:{"{var}":"pt"}},{selector:"pb",properties:["padding-bottom"],values:["calc(var(--spacing) * var({var}, var(--p)))"],placeholders:{"{var}":"pb"}},{selector:"pl",properties:["padding-left"],values:["calc(var(--spacing) * var({var}, var(--p)))"],placeholders:{"{var}":"pl"}},{selector:"pr",properties:["padding-right"],values:["calc(var(--spacing) * var({var}, var(--p)))"],placeholders:{"{var}":"pr"}},{selector:"ps",properties:["padding-inline-start"],values:["calc(var(--spacing) * var({var}, var(--p)))"],placeholders:{"{var}":"ps"}},{selector:"pe",properties:["padding-inline-end"],values:["calc(var(--spacing) * var({var}, var(--p)))"],placeholders:{"{var}":"pe"}},{selector:"[pt]",properties:["padding-top"],values:["var({var}, var(--p))"],placeholders:{"{var}":"pt"}},{selector:"[pb]",properties:["padding-bottom"],values:["var({var}, var(--p))"],placeholders:{"{var}":"pb"}},{selector:"[pl]",properties:["padding-left"],values:["var({var}, var(--p))"],placeholders:{"{var}":"pl"}},{selector:"[pr]",properties:["padding-right"],values:["var({var}, var(--p))"],placeholders:{"{var}":"pr"}},{selector:"[ps]",properties:["padding-inline-start"],values:["var({var}, var(--p))"],placeholders:{"{var}":"ps"}},{selector:"[pe]",properties:["padding-inline-end"],values:["var({var}, var(--p))"],placeholders:{"{var}":"pe"}},{selector:"px",properties:["padding-inline"],values:["calc(var(--spacing) * var({var}, var(--p)))"],placeholders:{"{var}":"px"}},{selector:"py",properties:["padding-block"],values:["calc(var(--spacing) * var({var}, var(--p)))"],placeholders:{"{var}":"py"}},{selector:"[px]",properties:["padding-inline"],values:["var({var}, var(--p))"],placeholders:{"{var}":"px"}},{selector:"[py]",properties:["padding-block"],values:["var({var}, var(--p))"],placeholders:{"{var}":"py"}}],right:[{selector:"right",properties:["right"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"right"}},{selector:"[right]",properties:["right"],arbitrary:true}],size:[{selector:"size",properties:["width","height"],values:["calc(var(--spacing) * var({var}))","calc(var(--spacing) * var({var2}))"],placeholders:{"{var}":"size","{var2}":"size"}},{selector:"[size]",properties:["width","height"],values:["var({var})","var({var2})"],placeholders:{"{var}":"size","{var2}":"size"}}],space:[{selector:"space-x` > :not(:last-child)`",properties:["margin-inline-start","margin-inline-end"],values:["calc(var(--spacing) * var({var}) * var(--tw-space-x-reverse))","calc(var(--spacing) * var({var2}) * (1 - var(--tw-space-x-reverse)))"],placeholders:{"{var}":"space-x","{var2}":"space-x"}},{selector:"[space-x]` > :not(:last-child)`",properties:["margin-inline-start","margin-inline-end"],values:["calc(var({var}) * var(--tw-space-x-reverse))","calc(var({var2}) * (1 - var(--tw-space-x-reverse)))"],placeholders:{"{var}":"space-x","{var2}":"space-x"}},{selector:"space-y` > :not(:last-child)`",properties:["margin-block-start","margin-block-end"],values:["calc(var(--spacing) * var({var}) * var(--tw-space-y-reverse))","calc(var(--spacing) * var({var2}) * (1 - var(--tw-space-y-reverse)))"],placeholders:{"{var}":"space-y","{var2}":"space-y"}},{selector:"[space-y]` > :not(:last-child)`",properties:["margin-block-start","margin-block-end"],values:["calc(var({var}) * var(--tw-space-y-reverse))","calc(var({var2}) * (1 - var(--tw-space-y-reverse)))"],placeholders:{"{var}":"space-y","{var2}":"space-y"}}],to:[{selector:"to",properties:["--tw-gradient-to","--tw-gradient-stops"],values:["var({var})","var(--tw-gradient-to-stops, var(--tw-gradient-position), var(--tw-gradient-to) var(--tw-gradient-to-position), var(--tw-gradient-to) var(--tw-gradient-to-position))"],placeholders:{"{var}":"to"},dark:true}],"to-opacity":[{selector:"to/o",properties:["--tw-gradient-to","--tw-gradient-stops"],values:["color-mix(in oklab, var({var}) var({var2}, 100%), transparent)","var(--tw-gradient-to-stops, var(--tw-gradient-position), var(--tw-gradient-to) var(--tw-gradient-to-position), var(--tw-gradient-to) var(--tw-gradient-to-position))"],placeholders:{"{var}":"to","{var2}":"to-o"},dark:true}],"to-position":[{selector:"to-position",properties:["--tw-gradient-to-position"],arbitrary:true}],top:[{selector:"top",properties:["top"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"top"}},{selector:"[top]",properties:["top"],arbitrary:true}],via:[{selector:"via",properties:["--tw-gradient-via","--tw-gradient-stops"],values:["var({var})","var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position))"],placeholders:{"{var}":"via","{var2}":"via-o"},dark:true}],"via-opacity":[{selector:"via/o",properties:["--tw-gradient-via","--tw-gradient-stops"],values:["color-mix(in oklab, var({var}) var({var2}, 100%), transparent)","var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position))"],placeholders:{"{var}":"via","{var2}":"via-o"},dark:true}],"via-position":[{selector:"via-position",properties:["--tw-gradient-via-position"],arbitrary:true}],width:[{selector:"w",properties:["width"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"w"}},{selector:"[w]",properties:["width"],arbitrary:true}],"z-index":[{selector:"z",properties:["z-index"],arbitrary:true}]};(()=>{const breakpoints={sm:"40rem",md:"48rem",lg:"64rem",xl:"80rem","2xl":"96rem"};const nonPrefixable=["spacing",/^tw/];const ruleCache=new Map;let pendingMutations=new Set;let mutationBatchTimeout=null;const interactiveStates=[":hover",":active",":focus",":focus-within",":target",":checked",":disabled"];function isDarkModeClass(className){return className.startsWith("dark:")}function extractDarkModeClass(className){return className.replace(/^dark:/,"")}function escapeCssIdentifier(str){return str.replace(/([ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g,"\\$1").replace(/^(\d)/,(_,d)=>`\\3${d}`)}function escapeSelectorWithBackticks(selector,prefix){const raw=prefix?`${prefix}\\:${selector}`:selector;let out="";let inProtected=false;let buffer="";for(let i=0;i<raw.length;i++){const ch=raw[i];if(ch==="`"){if(inProtected){out+=buffer}else{out+=escapeCssIdentifier(buffer)}inProtected=!inProtected;buffer=""}else{buffer+=ch}}out+=inProtected?buffer:escapeCssIdentifier(buffer);return"."+out}function normalizeVarName(name,prefix){let base=name.replace(/[^a-zA-Z0-9_-]/g,"");if(prefix)base=`${prefix}-${base}`;return`--${escapeCssIdentifier(base)}`}function shouldPrefix(key){return!nonPrefixable.some(rule=>typeof rule==="string"?rule===key:rule.test(key))}function generateArbitraryValue(selector,prefix){const varName=normalizeVarName(selector,prefix);return`var(${varName})`}function resolvePlaceholders(value,placeholders,baseClass,state,prefix,isDark=false){let result=value;for(const[ph,name]of Object.entries(placeholders||{})){const cleanState=state.replace(":","");const cleanName=name.replace(/[^a-zA-Z0-9-]/g,"");const cleanPrefix=prefix?prefix.replace(/[^a-zA-Z0-9-]/g,""):"";let varName;if(prefix&&isDark){varName=`--${cleanPrefix}-dark-${cleanName}-${cleanState}`}else if(prefix){varName=`--${cleanPrefix}-${cleanName}-${cleanState}`}else if(isDark){varName=`--dark-${cleanName}-${cleanState}`}else{varName=`--${cleanName}-${cleanState}`}result=result.replaceAll(ph,varName)}return result}function generateArbitraryValue(baseClass,state,prefix,isDark=false){const cleanState=state.replace(":","");const cleanBaseClass=baseClass.replace(/[^a-zA-Z0-9-]/g,"");const cleanPrefix=prefix?prefix.replace(/[^a-zA-Z0-9-]/g,""):"";let varName;if(prefix&&isDark){varName=`--${cleanPrefix}-dark-${cleanBaseClass}-${cleanState}`}else if(prefix){varName=`--${cleanPrefix}-${cleanBaseClass}-${cleanState}`}else if(isDark){varName=`--dark-${cleanBaseClass}-${cleanState}`}else{varName=`--${cleanBaseClass}-${cleanState}`}return`var(${varName})`}function findRuleConfig(baseClass){for(const[key,configs]of Object.entries(rules)){for(const config of configs){if(config.selector===baseClass){return config}}}return null}function buildRule(baseClass,fullClass,state,prefix=null,isDark=false){const ruleConfig=findRuleConfig(baseClass);let selector;if(isDark){if(prefix){selector=`.dark .${escapeCssIdentifier(prefix)}\\:dark\\:${escapeCssIdentifier(fullClass)}${state}`}else{selector=`.dark .dark\\:${escapeCssIdentifier(fullClass)}${state}`}}else{if(prefix){selector=`.${escapeCssIdentifier(prefix)}\\:${escapeCssIdentifier(fullClass)}${state}`}else{selector=`.${escapeCssIdentifier(fullClass)}${state}`}}const declarations={};if(!ruleConfig){const value=generateArbitraryValue(baseClass,state,prefix,isDark);declarations[baseClass]=value}else{const{properties:properties,values:values,placeholders:placeholders,arbitrary:arbitrary}=ruleConfig;const props=Array.isArray(properties)?properties:[properties];props.forEach((prop,i)=>{let value;if(arbitrary){value=generateArbitraryValue(baseClass,state,prefix,isDark)}else{const rawValue=values[i]||values[0];value=resolvePlaceholders(rawValue,placeholders,baseClass,state,prefix,isDark)}declarations[prop]=value})}return{selector:selector,declarations:declarations}}function extractInteractiveClasses(element){const classList=Array.from(element.classList);const interactiveClasses=[];classList.forEach(className=>{interactiveStates.forEach(state=>{if(className.endsWith(state)){const baseClass=className.slice(0,-state.length);const isDark=isDarkModeClass(baseClass);const actualBaseClass=isDark?extractDarkModeClass(baseClass):baseClass;interactiveClasses.push({baseClass:actualBaseClass,state:state,fullClass:className,isDark:isDark})}})});return interactiveClasses}function generateCssRules(interactiveClasses){const cssRules=[];const processedRules=new Set;interactiveClasses.forEach(({baseClass:baseClass,state:state,fullClass:fullClass,isDark:isDark})=>{const ruleConfig=findRuleConfig(baseClass);if(isDark&&(!ruleConfig||!ruleConfig.dark)){return}const ruleKey=`${fullClass}${state}${isDark?"-dark":""}`;if(ruleCache.has(ruleKey)){cssRules.push(ruleCache.get(ruleKey));return}if(processedRules.has(ruleKey))return;processedRules.add(ruleKey);const rule=buildRule(baseClass,fullClass,state,null,isDark);const css=`${rule.selector} { ${Object.entries(rule.declarations).map(([prop,val])=>`${prop}: ${val}`).join("; ")}; }`;ruleCache.set(ruleKey,css);cssRules.push(css);if(shouldPrefix(baseClass)){Object.entries(breakpoints).forEach(([bp,size])=>{const responsiveRuleKey=`${bp}:${ruleKey}`;if(!ruleCache.has(responsiveRuleKey)){const responsiveRule=buildRule(baseClass,fullClass,state,bp,isDark);const responsiveCss=`@media (min-width: ${size}) { ${responsiveRule.selector} { ${Object.entries(responsiveRule.declarations).map(([prop,val])=>`${prop}: ${val}`).join("; ")}; } }`;ruleCache.set(responsiveRuleKey,responsiveCss);cssRules.push(responsiveCss)}else{cssRules.push(ruleCache.get(responsiveRuleKey))}})}});return cssRules}function generateInteractiveStyles(){const nodes=document.querySelectorAll("[data-fs-interactive]");const allInteractiveClasses=[];nodes.forEach(node=>{if(!node.style.contain){node.style.contain="style"}const interactiveClasses=extractInteractiveClasses(node);allInteractiveClasses.push(...interactiveClasses)});const cssRules=generateCssRules(allInteractiveClasses);const finalCss=cssRules.join("\n");requestAnimationFrame(()=>{let styleTag=document.getElementById("fs-interactive-styles");if(!styleTag){styleTag=document.createElement("style");styleTag.id="fs-interactive-styles";document.head.appendChild(styleTag)}styleTag.textContent=finalCss})}let scheduled=null;function handleMutations(mutationsList){let hasRelevantChanges=false;for(const mutation of mutationsList){if(mutation.type==="attributes"){const{attributeName:attributeName,target:target}=mutation;if(attributeName==="class"||attributeName==="data-fs-interactive"){pendingMutations.add(target);hasRelevantChanges=true}}else if(mutation.type==="childList"){const checkNodes=[...mutation.addedNodes,...mutation.removedNodes];for(const node of checkNodes){if(node.nodeType===1){if(node.hasAttribute?.("data-fs-interactive")||node.querySelector?.("[data-fs-interactive]")){hasRelevantChanges=true;break}}}}}if(hasRelevantChanges){scheduleGenerate()}}function scheduleGenerate(){if(scheduled){clearTimeout(scheduled)}scheduled=setTimeout(()=>{scheduled=null;pendingMutations.clear();generateInteractiveStyles()},60)}function init(){generateInteractiveStyles();const observer=new MutationObserver(handleMutations);observer.observe(document.body,{childList:true,subtree:true,attributes:true,attributeFilter:["data-fs-interactive","class"]});const cleanup=()=>{observer.disconnect();if(scheduled){clearTimeout(scheduled)}pendingMutations.clear();ruleCache.clear()};window.addEventListener("beforeunload",cleanup);window.__fsInteractive={regenerate:generateInteractiveStyles,stop:cleanup,clearCache:()=>ruleCache.clear(),getCacheSize:()=>ruleCache.size,getPendingMutations:()=>Array.from(pendingMutations),getRuleCache:()=>ruleCache,getBreakpoints:()=>breakpoints}}if(document.readyState==="loading"){document.addEventListener("DOMContentLoaded",init)}else{init()}})();

package/dist/js/frankenstyle.min.js

@@ -1 +1 @@
-(()=>{const e={sm:"40rem",md:"48rem",lg:"64rem",xl:"80rem","2xl":"96rem"},t={w:"width",h:"height",m:"margin",p:"padding","[p]":"padding",bg:"background-color",color:"color"},n=new Set(["m","p"]),o=new Set(["background-color","color"]),r=new Set(["spacing"]);function c(e,t,n,o,r=!1){const c=r?"dark-":"";let s=`var(--${c}${"2xl"===e?"\\32xl":e}-${t}`;for(let e=o-1;e>=0;e--){const o=n[e];s+=`, var(--${c}${"2xl"===o?"\\32xl":o}-${t}`}return s+=`, var(--${t})`,s+=")".repeat(o+1),s}const s=function(e,t,n){const o=Object.keys(t),s={...e},a=function(e){const t=new Set;for(const n of Object.values(e))for(const e of Object.values(n)){const n=e.match(/--([a-zA-Z][a-zA-Z0-9-]*)-\{s\}/g);n&&n.forEach(e=>{const n=e.replace("--","").replace("-{s}","");r.has(n)||t.add(n)})}return t}(e);for(const[t,r]of Object.entries(e)){for(let e=0;e<o.length;e++){const l=o[e],i=`.${"2xl"===l?"\\32xl":l}\\:${t.slice(1)}`;s[i]={};for(const[t,f]of Object.entries(r)){let r=f;for(const t of a){const n=new RegExp(`var\\(--${t}-\\{s\\}\\)`,"g");if(r.match(n)){const s=c(l,t,o,e);r=r.replace(n,s)}}if(s[i][t]=r,n.has(t)){const n=`.dark ${i}`;let r=f;for(const t of a){const n=new RegExp(`var\\(--${t}-\\{s\\}\\)`,"g");if(r.match(n)){const s=c(l,t,o,e,!0);r=r.replace(n,s)}}s[n]||(s[n]={}),s[n][t]=r}}}for(const[e,o]of Object.entries(r))if(n.has(e)){let n=o;for(const e of a){const t=new RegExp(`var\\(--${e}-\\{s\\}\\)`,"g");n.match(t)&&(n=n.replace(t,`var(--dark-${e}-{s}, var(--${e}-{s}))`))}const r=`.dark ${t}`;s[r]||(s[r]={}),s[r][e]=n}}return s}({".bg":{"background-color":"color-mix(in oklab,var(--bg-{s})var(--bg-opacity-{s},100%),transparent)"},".color":{color:"color-mix(in oklab,var(--color-{s})var(--color-opacity-{s},100%),transparent)"}},e,o),a=new Map;let l=new Set;function i(e){return 1===e.length?`var(${e[0]})`:e.reduceRight((e,t)=>e?`var(${t}, ${e})`:`var(${t})`)}function f(e,t){const n=`${e}:${JSON.stringify(t)}`;if(a.has(n))return a.get(n);const o=`${e} {\n`+Object.entries(t).map(([e,t])=>`  ${e}: ${t};`).join("\n")+"\n}";if(a.size>1e3){const e=a.keys().next().value;a.delete(e)}return a.set(n,o),o}const u=/\s+/;function d(){const r=document.querySelectorAll("[data-fs-interactive]");r.forEach(e=>{e.style.contain||(e.style.contain="style")});const c=new Map,a=new Set,l=(e,t)=>{c.has(e)||c.set(e,[]),c.get(e).push(t)};r.forEach(r=>{String(r.className||"").split(u).filter(Boolean).forEach(r=>{if(!r.includes(":"))return;const c=r.split(":").filter(Boolean);if(c.length<2)return;let u=null,d=null,$=null;if(2===c.length?[$,u]=c:3===c.length?[d,$,u]=c:(u=c.pop(),$=c.pop(),d=c.length?c.join(":"):null),!u||!$)return;const g=function(e,t,n,o){return`${e}|${t||""}|${n}|${o}`}(r,d,$,u);if(a.has(g))return;a.add(g);const p=d?`.${d}.${$}`:`.${$}`,m=s[p],h=s[`.dark ${p}`];if(m){normalRuleObj={};for(const[e,t]of Object.entries(m))normalRuleObj[e]=t.replace(/{s}/g,u);if(h){darkRuleObj={};for(const[e,t]of Object.entries(h))darkRuleObj[e]=t.replace(/{s}/g,u)}}else{const e=t[$];if(!e)return void console.warn(`Unknown property alias: ${$} (from ${r})`);const c=n.has($),s=function(e){return e.replace(/^\[|\]$/g,"")}($);let a;if(d){const e=["2xl","xl","lg","md","sm"],t=e.indexOf(d);if(-1===t)a=[`--${d}-${s}-${u}`];else{a=[];for(let n=t;n<e.length;n++)a.push(`--${e[n]}-${s}-${u}`);a.push(`--${s}-${u}`)}}else a=[`--${s}-${u}`];const l=i(a);if(normalRuleObj=c?{[e]:`calc(var(--spacing) * ${l})`}:{[e]:l},o.has(e)){const t=function(e,t,n){const o=e.map(e=>{const t=e.match(/^--(.+?)(-\w+)?$/);if(!t)return e;const[,o]=t;return`--dark-${o}-${n}`}),r=i(e);return o.reduceRight((e,t)=>e?`var(${t}, ${e})`:`var(${t}, ${r})`)}(a,0,u);darkRuleObj={[e]:c?`calc(var(--spacing) * ${t})`:t}}}const b=function(e){if("undefined"!=typeof CSS&&"function"==typeof CSS.escape)return CSS.escape(e);let t=e.replace(/[:\s]/g,"\\$&");/^\d/.test(t)&&(t=`\\${e.charCodeAt(0).toString(16)} ${t.slice(1)}`);return t}(r),v=f(`.${b}:${u}`,normalRuleObj);if(darkRuleObj){const t=f(`.dark .${b}:${u}`,darkRuleObj);l(d&&e[d]?d:"base",t)}l(d&&e[d]?d:"base",v)})});const d=[],$=c.get("base");$?.length&&d.push(...$);const g=["sm","md","lg","xl","2xl"];for(const t of g){const n=c.get(t);if(!n?.length)continue;const o=n.join("\n\n");d.push(`@media (min-width: ${e[t]}) {\n${o}\n}`)}const p=d.length?"@layer styles {\n"+d.join("\n\n")+"\n}":"";requestAnimationFrame(()=>{let e=document.getElementById("fs-interactive-styles");e||(e=document.createElement("style"),e.id="fs-interactive-styles",document.head.appendChild(e)),e.textContent=p})}let $=null;function g(e){let t=!1;for(const n of e)if("attributes"===n.type){const{attributeName:e,target:o}=n;"class"!==e&&"data-fs-interactive"!==e||(l.add(o),t=!0)}else if("childList"===n.type){const e=[...n.addedNodes,...n.removedNodes];for(const n of e)if(1===n.nodeType&&(n.hasAttribute?.("data-fs-interactive")||n.querySelector?.("[data-fs-interactive]"))){t=!0;break}}t&&function(){$&&clearTimeout($);$=setTimeout(()=>{$=null,l.clear(),d()},60)}()}function p(){d();const e=new MutationObserver(g);e.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-fs-interactive","class"]});const t=()=>{e.disconnect(),$&&clearTimeout($),l.clear(),a.clear()};window.addEventListener("beforeunload",t),window.__fsInteractive={regenerate:d,stop:t,clearCache:()=>a.clear(),getCacheSize:()=>a.size,getPendingMutations:()=>Array.from(l)}}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",p):p()})();
+const rules={"aspect-ratio":[{selector:"aspect",properties:["aspect-ratio"],arbitrary:!0}],"background-color":[{selector:"bg",properties:["background-color"],arbitrary:!0,dark:!0}],"background-color-opacity":[{selector:"bg/o",properties:["background-color"],values:["color-mix(in oklab, var({var}) var({var2}, 100%), transparent)"],placeholders:{"{var}":"bg","{var2}":"bg-o"},dark:!0}],"border-radius":[{selector:"rounded",properties:["border-radius"],arbitrary:!0},{selector:"rounded-s",properties:["border-start-start-radius","border-end-start-radius"],values:["var({var})","var({var2})"],placeholders:{"{var}":"rounded-s","{var2}":"rounded-s"}},{selector:"rounded-e",properties:["border-start-end-radius","border-end-end-radius"],values:["var({var})","var({var2})"],placeholders:{"{var}":"rounded-e","{var2}":"rounded-e"}},{selector:"rounded-t",properties:["border-top-left-radius","border-top-right-radius"],values:["var({var})","var({var2})"],placeholders:{"{var}":"rounded-t","{var2}":"rounded-t"}},{selector:"rounded-r",properties:["border-top-right-radius","border-bottom-right-radius"],values:["var({var})","var({var2})"],placeholders:{"{var}":"rounded-r","{var2}":"rounded-r"}},{selector:"rounded-b",properties:["border-bottom-right-radius","border-bottom-left-radius"],values:["var({var})","var({var2})"],placeholders:{"{var}":"rounded-b","{var2}":"rounded-b"}},{selector:"rounded-l",properties:["border-top-left-radius","border-bottom-left-radius"],values:["var({var})","var({var2})"],placeholders:{"{var}":"rounded-l","{var2}":"rounded-l"}},{selector:"rounded-ss",properties:["border-start-start-radius"],arbitrary:!0},{selector:"rounded-se",properties:["border-start-end-radius"],arbitrary:!0},{selector:"rounded-ee",properties:["border-end-end-radius"],arbitrary:!0},{selector:"rounded-es",properties:["border-end-start-radius"],arbitrary:!0},{selector:"rounded-tl",properties:["border-top-left-radius"],arbitrary:!0},{selector:"rounded-tr",properties:["border-top-right-radius"],arbitrary:!0},{selector:"rounded-br",properties:["border-bottom-right-radius"],arbitrary:!0},{selector:"rounded-bl",properties:["border-bottom-left-radius"],arbitrary:!0}],bottom:[{selector:"bottom",properties:["bottom"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"bottom"}},{selector:"[bottom]",properties:["bottom"],arbitrary:!0}],color:[{selector:"color",properties:["color"],arbitrary:!0,dark:!0}],"color-opacity":[{selector:"color/o",properties:["color"],values:["color-mix(in oklab, var({var}) var({var2}, 100%), transparent)"],placeholders:{"{var}":"color","{var2}":"color-o"},dark:!0}],columns:[{selector:"columns",properties:["columns"],arbitrary:!0}],"flex-basis":[{selector:"basis",properties:["flex-basis"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"basis"}},{selector:"[basis]",properties:["flex-basis"],arbitrary:!0}],"flex-grow":[{selector:"grow",properties:["flex-grow"],arbitrary:!0}],"flex-shrink":[{selector:"shrink",properties:["flex-shrink"],arbitrary:!0}],flex:[{selector:"flex",properties:["flex"],arbitrary:!0}],"from-position":[{selector:"from-position",properties:["--tw-gradient-from-position"],arbitrary:!0}],from:[{selector:"from",properties:["--tw-gradient-from","--tw-gradient-stops"],values:["var({var})","var(--tw-gradient-from-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-from) var(--tw-gradient-from-position))"],placeholders:{"{var}":"from"},dark:!0}],"from-opacity":[{selector:"from/o",properties:["--tw-gradient-from","--tw-gradient-stops"],values:["color-mix(in oklab, var({var}) var({var2}, 100%), transparent)","var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))"],placeholders:{"{var}":"from","{var2}":"from-o"},dark:!0}],gap:[{selector:"gap",properties:["gap"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"gap"}},{selector:"gap-x",properties:["column-gap"],values:["calc(var(--spacing) * var({var}, var(--gap)))"],placeholders:{"{var}":"gap-x"}},{selector:"gap-y",properties:["row-gap"],values:["calc(var(--spacing) * var({var}, var(--gap)))"],placeholders:{"{var}":"gap-y"}},{selector:"[gap]",properties:["gap"],arbitrary:!0},{selector:"[gap-x]",properties:["column-gap"],values:["var({var}, var(--gap))"],placeholders:{"{var}":"gap-x"}},{selector:"[gap-y]",properties:["row-gap"],values:["var({var}, var(--gap))"],placeholders:{"{var}":"gap-y"}}],"grid-column":[{selector:"col",properties:["grid-column"],arbitrary:!0},{selector:"col-span",properties:["grid-column"],values:["span var({var}) / span var({var2})"],placeholders:{"{var}":"col-span","{var2}":"col-span"}},{selector:"col-start",properties:["grid-column-start"],arbitrary:!0},{selector:"col-end",properties:["grid-column-end"],arbitrary:!0}],"grid-row":[{selector:"row",properties:["grid-row"],arbitrary:!0},{selector:"row-span",properties:["grid-row"],values:["span var({var}) / span var({var2})"],placeholders:{"{var}":"row-span","{var2}":"row-span"}},{selector:"row-start",properties:["grid-row-start"],arbitrary:!0},{selector:"row-end",properties:["grid-row-end"],arbitrary:!0}],"grid-template-columns":[{selector:"grid-cols",properties:["grid-template-columns"],values:["repeat(var({var}), minmax(0, 1fr))"],placeholders:{"{var}":"grid-cols"}},{selector:"[grid-cols]",properties:["grid-template-columns"],arbitrary:!0}],"grid-template-rows":[{selector:"grid-rows",properties:["grid-template-rows"],values:["repeat(var({var}), minmax(0, 1fr))"],placeholders:{"{var}":"grid-rows"}},{selector:"[grid-rows]",properties:["grid-template-rows"],arbitrary:!0}],height:[{selector:"h",properties:["height"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"h"}},{selector:"[h]",properties:["height"],arbitrary:!0}],inset:[{selector:"inset",properties:["inset"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"inset"}},{selector:"start",properties:["inset-inline-start"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"start"}},{selector:"end",properties:["inset-inline-end"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"end"}},{selector:"inset-x",properties:["inset-inline"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"inset-x"}},{selector:"inset-y",properties:["inset-block"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"inset-y"}},{selector:"[inset]",properties:["inset"],arbitrary:!0},{selector:"[start]",properties:["inset-inline-start"],arbitrary:!0},{selector:"[end]",properties:["inset-inline-end"],arbitrary:!0},{selector:"[inset-x]",properties:["inset-inline"],arbitrary:!0},{selector:"[inset-y]",properties:["inset-block"],arbitrary:!0}],left:[{selector:"left",properties:["left"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"left"}},{selector:"[left]",properties:["left"],arbitrary:!0}],"letter-spacing":[{selector:"tracking",properties:["letter-spacing"],arbitrary:!0}],"line-height":[{selector:"leading",properties:["line-height"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"leading"}},{selector:"[leading]",properties:["line-height"],arbitrary:!0}],margin:[{selector:"m",properties:["margin"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"m"}},{selector:"[m]",properties:["margin"],arbitrary:!0},{selector:"mt",properties:["margin-top"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"mt"}},{selector:"[mt]",properties:["margin-top"],arbitrary:!0},{selector:"mb",properties:["margin-bottom"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"mb"}},{selector:"[mb]",properties:["margin-bottom"],arbitrary:!0},{selector:"ml",properties:["margin-left"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"ml"}},{selector:"[ml]",properties:["margin-left"],arbitrary:!0},{selector:"mr",properties:["margin-right"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"mr"}},{selector:"[mr]",properties:["margin-right"],arbitrary:!0},{selector:"ms",properties:["margin-inline-start"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"ms"}},{selector:"[ms]",properties:["margin-inline-start"],arbitrary:!0},{selector:"me",properties:["margin-inline-end"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"me"}},{selector:"[me]",properties:["margin-inline-end"],arbitrary:!0},{selector:"mx",properties:["margin-inline"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"mx"}},{selector:"[mx]",properties:["margin-inline"],arbitrary:!0},{selector:"my",properties:["margin-block"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"my"}},{selector:"[my]",properties:["margin-block"],arbitrary:!0}],"max-height":[{selector:"max-h",properties:["max-height"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"max-h"}},{selector:"[max-h]",properties:["max-height"],arbitrary:!0}],"max-width":[{selector:"max-w",properties:["max-width"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"max-w"}},{selector:"[max-w]",properties:["max-width"],arbitrary:!0}],"min-height":[{selector:"min-h",properties:["min-height"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"min-h"}},{selector:"[min-h]",properties:["min-height"],arbitrary:!0}],"min-width":[{selector:"min-w",properties:["min-width"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"min-w"}},{selector:"[min-w]",properties:["min-width"],arbitrary:!0}],"object-position":[{selector:"object-position",properties:["object-position"],arbitrary:!0}],order:[{selector:"order",properties:["order"],arbitrary:!0}],padding:[{selector:"p",properties:["padding"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"p"}},{selector:"[p]",properties:["padding"],arbitrary:!0},{selector:"pt",properties:["padding-top"],values:["calc(var(--spacing) * var({var}, var(--p)))"],placeholders:{"{var}":"pt"}},{selector:"pb",properties:["padding-bottom"],values:["calc(var(--spacing) * var({var}, var(--p)))"],placeholders:{"{var}":"pb"}},{selector:"pl",properties:["padding-left"],values:["calc(var(--spacing) * var({var}, var(--p)))"],placeholders:{"{var}":"pl"}},{selector:"pr",properties:["padding-right"],values:["calc(var(--spacing) * var({var}, var(--p)))"],placeholders:{"{var}":"pr"}},{selector:"ps",properties:["padding-inline-start"],values:["calc(var(--spacing) * var({var}, var(--p)))"],placeholders:{"{var}":"ps"}},{selector:"pe",properties:["padding-inline-end"],values:["calc(var(--spacing) * var({var}, var(--p)))"],placeholders:{"{var}":"pe"}},{selector:"[pt]",properties:["padding-top"],values:["var({var}, var(--p))"],placeholders:{"{var}":"pt"}},{selector:"[pb]",properties:["padding-bottom"],values:["var({var}, var(--p))"],placeholders:{"{var}":"pb"}},{selector:"[pl]",properties:["padding-left"],values:["var({var}, var(--p))"],placeholders:{"{var}":"pl"}},{selector:"[pr]",properties:["padding-right"],values:["var({var}, var(--p))"],placeholders:{"{var}":"pr"}},{selector:"[ps]",properties:["padding-inline-start"],values:["var({var}, var(--p))"],placeholders:{"{var}":"ps"}},{selector:"[pe]",properties:["padding-inline-end"],values:["var({var}, var(--p))"],placeholders:{"{var}":"pe"}},{selector:"px",properties:["padding-inline"],values:["calc(var(--spacing) * var({var}, var(--p)))"],placeholders:{"{var}":"px"}},{selector:"py",properties:["padding-block"],values:["calc(var(--spacing) * var({var}, var(--p)))"],placeholders:{"{var}":"py"}},{selector:"[px]",properties:["padding-inline"],values:["var({var}, var(--p))"],placeholders:{"{var}":"px"}},{selector:"[py]",properties:["padding-block"],values:["var({var}, var(--p))"],placeholders:{"{var}":"py"}}],right:[{selector:"right",properties:["right"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"right"}},{selector:"[right]",properties:["right"],arbitrary:!0}],size:[{selector:"size",properties:["width","height"],values:["calc(var(--spacing) * var({var}))","calc(var(--spacing) * var({var2}))"],placeholders:{"{var}":"size","{var2}":"size"}},{selector:"[size]",properties:["width","height"],values:["var({var})","var({var2})"],placeholders:{"{var}":"size","{var2}":"size"}}],space:[{selector:"space-x` > :not(:last-child)`",properties:["margin-inline-start","margin-inline-end"],values:["calc(var(--spacing) * var({var}) * var(--tw-space-x-reverse))","calc(var(--spacing) * var({var2}) * (1 - var(--tw-space-x-reverse)))"],placeholders:{"{var}":"space-x","{var2}":"space-x"}},{selector:"[space-x]` > :not(:last-child)`",properties:["margin-inline-start","margin-inline-end"],values:["calc(var({var}) * var(--tw-space-x-reverse))","calc(var({var2}) * (1 - var(--tw-space-x-reverse)))"],placeholders:{"{var}":"space-x","{var2}":"space-x"}},{selector:"space-y` > :not(:last-child)`",properties:["margin-block-start","margin-block-end"],values:["calc(var(--spacing) * var({var}) * var(--tw-space-y-reverse))","calc(var(--spacing) * var({var2}) * (1 - var(--tw-space-y-reverse)))"],placeholders:{"{var}":"space-y","{var2}":"space-y"}},{selector:"[space-y]` > :not(:last-child)`",properties:["margin-block-start","margin-block-end"],values:["calc(var({var}) * var(--tw-space-y-reverse))","calc(var({var2}) * (1 - var(--tw-space-y-reverse)))"],placeholders:{"{var}":"space-y","{var2}":"space-y"}}],to:[{selector:"to",properties:["--tw-gradient-to","--tw-gradient-stops"],values:["var({var})","var(--tw-gradient-to-stops, var(--tw-gradient-position), var(--tw-gradient-to) var(--tw-gradient-to-position), var(--tw-gradient-to) var(--tw-gradient-to-position))"],placeholders:{"{var}":"to"},dark:!0}],"to-opacity":[{selector:"to/o",properties:["--tw-gradient-to","--tw-gradient-stops"],values:["color-mix(in oklab, var({var}) var({var2}, 100%), transparent)","var(--tw-gradient-to-stops, var(--tw-gradient-position), var(--tw-gradient-to) var(--tw-gradient-to-position), var(--tw-gradient-to) var(--tw-gradient-to-position))"],placeholders:{"{var}":"to","{var2}":"to-o"},dark:!0}],"to-position":[{selector:"to-position",properties:["--tw-gradient-to-position"],arbitrary:!0}],top:[{selector:"top",properties:["top"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"top"}},{selector:"[top]",properties:["top"],arbitrary:!0}],via:[{selector:"via",properties:["--tw-gradient-via","--tw-gradient-stops"],values:["var({var})","var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position))"],placeholders:{"{var}":"via","{var2}":"via-o"},dark:!0}],"via-opacity":[{selector:"via/o",properties:["--tw-gradient-via","--tw-gradient-stops"],values:["color-mix(in oklab, var({var}) var({var2}, 100%), transparent)","var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position))"],placeholders:{"{var}":"via","{var2}":"via-o"},dark:!0}],"via-position":[{selector:"via-position",properties:["--tw-gradient-via-position"],arbitrary:!0}],width:[{selector:"w",properties:["width"],values:["calc(var(--spacing) * var({var}))"],placeholders:{"{var}":"w"}},{selector:"[w]",properties:["width"],arbitrary:!0}],"z-index":[{selector:"z",properties:["z-index"],arbitrary:!0}]};(()=>{const r={sm:"40rem",md:"48rem",lg:"64rem",xl:"80rem","2xl":"96rem"},e=["spacing",/^tw/],a=new Map;let t=new Set;const s=[":hover",":active",":focus",":focus-within",":target",":checked",":disabled"];function o(r){return r.replace(/([ !"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g,"\\$1").replace(/^(\d)/,(r,e)=>`\\3${e}`)}function i(r,e){const a=function(r,e){let a=r.replace(/[^a-zA-Z0-9_-]/g,"");return e&&(a=`${e}-${a}`),`--${o(a)}`}(r,e);return`var(${a})`}function i(r,e,a,t=!1){const s=e.replace(":",""),o=r.replace(/[^a-zA-Z0-9-]/g,""),i=a?a.replace(/[^a-zA-Z0-9-]/g,""):"";let l;return l=a&&t?`--${i}-dark-${o}-${s}`:a?`--${i}-${o}-${s}`:t?`--dark-${o}-${s}`:`--${o}-${s}`,`var(${l})`}function l(r){for(const[e,a]of Object.entries(rules))for(const e of a)if(e.selector===r)return e;return null}function p(r,e,a,t=null,s=!1){const p=l(r);let c;c=s?t?`.dark .${o(t)}\\:dark\\:${o(e)}${a}`:`.dark .dark\\:${o(e)}${a}`:t?`.${o(t)}\\:${o(e)}${a}`:`.${o(e)}${a}`;const n={};if(p){const{properties:e,values:o,placeholders:l,arbitrary:c}=p;(Array.isArray(e)?e:[e]).forEach((e,p)=>{let v;if(c)v=i(r,a,t,s);else{v=function(r,e,a,t,s,o=!1){let i=r;for(const[r,a]of Object.entries(e||{})){const e=t.replace(":",""),l=a.replace(/[^a-zA-Z0-9-]/g,""),p=s?s.replace(/[^a-zA-Z0-9-]/g,""):"";let c;c=s&&o?`--${p}-dark-${l}-${e}`:s?`--${p}-${l}-${e}`:o?`--dark-${l}-${e}`:`--${l}-${e}`,i=i.replaceAll(r,c)}return i}(o[p]||o[0],l,0,a,t,s)}n[e]=v})}else{const e=i(r,a,t,s);n[r]=e}return{selector:c,declarations:n}}function c(t){const s=[],o=new Set;return t.forEach(({baseClass:t,state:i,fullClass:c,isDark:n})=>{const v=l(t);if(n&&(!v||!v.dark))return;const d=`${c}${i}${n?"-dark":""}`;if(a.has(d))return void s.push(a.get(d));if(o.has(d))return;o.add(d);const g=p(t,c,i,null,n),u=`${g.selector} { ${Object.entries(g.declarations).map(([r,e])=>`${r}: ${e}`).join("; ")}; }`;var h;a.set(d,u),s.push(u),h=t,e.some(r=>"string"==typeof r?r===h:r.test(h))||Object.entries(r).forEach(([r,e])=>{const o=`${r}:${d}`;if(a.has(o))s.push(a.get(o));else{const l=p(t,c,i,r,n),v=`@media (min-width: ${e}) { ${l.selector} { ${Object.entries(l.declarations).map(([r,e])=>`${r}: ${e}`).join("; ")}; } }`;a.set(o,v),s.push(v)}})}),s}function n(){const r=document.querySelectorAll("[data-fs-interactive]"),e=[];r.forEach(r=>{r.style.contain||(r.style.contain="style");const a=function(r){const e=Array.from(r.classList),a=[];return e.forEach(r=>{s.forEach(e=>{if(r.endsWith(e)){const t=r.slice(0,-e.length),s=function(r){return r.startsWith("dark:")}(t),o=s?function(r){return r.replace(/^dark:/,"")}(t):t;a.push({baseClass:o,state:e,fullClass:r,isDark:s})}})}),a}(r);e.push(...a)});const a=c(e).join("\n");requestAnimationFrame(()=>{let r=document.getElementById("fs-interactive-styles");r||(r=document.createElement("style"),r.id="fs-interactive-styles",document.head.appendChild(r)),r.textContent=a})}let v=null;function d(r){let e=!1;for(const a of r)if("attributes"===a.type){const{attributeName:r,target:s}=a;"class"!==r&&"data-fs-interactive"!==r||(t.add(s),e=!0)}else if("childList"===a.type){const r=[...a.addedNodes,...a.removedNodes];for(const a of r)if(1===a.nodeType&&(a.hasAttribute?.("data-fs-interactive")||a.querySelector?.("[data-fs-interactive]"))){e=!0;break}}e&&function(){v&&clearTimeout(v);v=setTimeout(()=>{v=null,t.clear(),n()},60)}()}function g(){n();const e=new MutationObserver(d);e.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-fs-interactive","class"]});const s=()=>{e.disconnect(),v&&clearTimeout(v),t.clear(),a.clear()};window.addEventListener("beforeunload",s),window.__fsInteractive={regenerate:n,stop:s,clearCache:()=>a.clear(),getCacheSize:()=>a.size,getPendingMutations:()=>Array.from(t),getRuleCache:()=>a,getBreakpoints:()=>r}}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",g):g()})();

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "frankenstyle",
   "author": "Reden <reden@franken-ui.dev>",
-  "description": "Frankenstyle is a no-buid, lightweight, fully responsive, utiliy-first CSS framework.",
-  "version": "0.0.2",
+  "description": "Frankenstyle is a no-buid, lightweight, fully responsive, utility-first CSS framework.",
+  "version": "0.0.3",
   "type": "module",
   "repository": {
     "type": "git",