frankenstyle 0.0.1 → 0.0.2

package/dist/js/frankenstyle.js

@@ -0,0 +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()}})();

package/dist/js/frankenstyle.min.js

@@ -0,0 +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()})();

package/package.json

@@ -1,6 +1,40 @@
 {
-    "name": "frankenstyle",
-    "version": "0.0.1",
-    "main": "index.js"
-  }
-  
+  "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",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/franken-ui/style.git"
+  },
+  "bugs": {
+    "url": "https://github.com/franken-ui/style/issues"
+  },
+  "homepage": "https://www.franken.style",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "gzip-size": "^7.0.0",
+    "lightningcss-cli": "^1.30.1",
+    "prettier": "^3.6.2",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.4"
+  },
+  "exports": {
+    ".": {
+      "default": "./dist/js/frankenstyle.js"
+    },
+    "./js/*": {
+      "default": "./dist/js/*.js"
+    },
+    "./css/frankenstyle.css": "./dist/css/frankenstyle.css"
+  },
+  "files": [
+    "dist"
+  ]
+}