chai-tailwindcss 1.0.0 → 1.0.1

package/dist/chai.js

@@ -0,0 +1 @@
+(()=>{var p={sm:640,md:768,lg:1024};var g={block:{display:"block"},"inline-block":{display:"inline-block"},inline:{display:"inline"},flex:{display:"flex"},"inline-flex":{display:"inline-flex"},grid:{display:"grid"},"inline-grid":{display:"inline-grid"},hidden:{display:"none"},contents:{display:"contents"},"list-item":{display:"list-item"},static:{position:"static"},fixed:{position:"fixed"},absolute:{position:"absolute"},relative:{position:"relative"},sticky:{position:"sticky"},"flex-row":{flexDirection:"row"},"flex-row-reverse":{flexDirection:"row-reverse"},"flex-col":{flexDirection:"column"},"flex-col-reverse":{flexDirection:"column-reverse"},"flex-wrap":{flexWrap:"wrap"},"flex-wrap-reverse":{flexWrap:"wrap-reverse"},"flex-nowrap":{flexWrap:"nowrap"}};var f={0:"0px",1:"4px",2:"8px",3:"12px",4:"16px",5:"20px"};var E={m:["margin"],mt:["margin-top"],mb:["margin-bottom"],ml:["margin-left"],mr:["margin-right"],mx:["margin-left","margin-right"],my:["margin-top","margin-bottom"],p:["padding"],pt:["padding-top"],pb:["padding-bottom"],pl:["padding-left"],pr:["padding-right"],px:["padding-left","padding-right"],py:["padding-top","padding-bottom"],gap:["gap"],"gap-x":["column-gap"],"gap-y":["row-gap"]};function m(e){let t,r;if(e.length===3?(t=`${e[0]}-${e[1]}`,r=e[2]):(t=e[0],r=e[1]),!E[t])return null;let o={};for(let n of E[t])o[n]=f[r];return o}var j={top:"top",bottom:"bottom",left:"left",right:"right"};function a(e){let t=[e[0]],r=e[1];return j[t]?{[j[t]]:f[r]}:null}var H={justify:"justifyContent",items:"alignItems"},A={start:"flex-start",end:"flex-end",center:"center",between:"space-between",around:"space-around",evenly:"space-evenly",stretch:"stretch",baseline:"baseline",normal:"normal"};function b(e){let t=e[0],r=e[1];return H[t]?{[H[t]]:A[r]}:null}var F={0:"0px",px:"1px",.5:"2px",1:"4px",1.5:"6px",2:"8px",2.5:"10px",3:"12px",3.5:"14px",4:"16px",5:"20px",6:"24px",7:"28px",8:"32px",9:"36px",10:"40px",11:"44px",12:"48px",14:"56px",16:"64px",20:"80px",24:"96px",28:"112px",32:"128px",36:"144px",40:"160px",44:"176px",48:"192px",52:"208px",56:"224px",60:"240px",64:"256px",72:"288px",80:"320px",96:"384px",auto:"auto",full:"100%",screen:"100vw",min:"min-content",max:"max-content",fit:"fit-content"},M={w:"width",h:"height","max-w":"max-width","min-w":"min-width","max-h":"max-height","min-h":"min-height"};function x(e){let t,r;return e.length===3?(t=e.slice(0,2).join("-"),r=e[2]):(t=e[0],r=e[1]),M[t]?(console.log("sizeHandler",{property:t,value:r}),{[M[t]]:F[r]}):null}var l={red:"#ef4444",green:"#22c55e",blue:"#3b82f6",black:"#000000",white:"#ffffff",gray:"#9ca3af",slate:"#64748b",neutral:"#404040",zinc:"#18181b",indigo:"#6366f1",violet:"#8b5cf6",sky:"#0ea5e9",emerald:"#10b981",rose:"#f43f5e",amber:"#f59e0b",orange:"#f97316"};function k(e){let t=e[1];return{"background-color":l[t]}}var S={xs:"12px",sm:"14px",base:"16px",lg:"18px",xl:"20px","2xl":"24px","3xl":"30px","4xl":"36px","5xl":"48px","6xl":"60px"};var L={left:"left",center:"center",right:"right",justify:"justify"};function O(e){let t=[{source:S,property:"font-size"},{source:L,property:"text-align"},{source:l,property:"color"}],r=e[1];for(let o of t)if(o.source[r])return{[o.property]:o.source[r]}}var y={0:"0px",DEFAULT:"1px",2:"2px",4:"4px",8:"8px"},P={none:"0px",sm:"2px",DEFAULT:"4px",md:"6px",lg:"8px",xl:"12px","2xl":"16px","3xl":"24px",full:"9999px"},z={"border-t":["border-top-width"],"border-b":["border-bottom-width"],"border-l":["border-left-width"],"border-r":["border-right-width"],"border-x":["border-left-width","border-right-width"],"border-y":["border-top-width","border-bottom-width"]},T={solid:"solid",dashed:"dashed",dotted:"dotted",double:"double",none:"none"};function h(e){console.log("inside border handler",e);let t={"border-width":y.DEFAULT,"border-style":"solid","border-color":l.black},r,o;if(e.length===3){if(r=e.slice(0,2).join("-"),o=e[2]||"DEFAULT",!z[r])return null;let n={...t};return z[r].forEach(i=>{n[i]=y[o]}),n}else{o=e[1]||"DEFAULT",console.log(r,o);let n=[{source:y,property:"border-width"},{source:P,property:"border-radius"},{source:T,property:"border-style"},{source:l,property:"border-color"}];for(let i of n)if(console.log(i.property,i.source[o]),i.source[o])return{...t,[i.property]:i.source[o]}}}var C={thin:"100",extralight:"200",light:"300",normal:"400",medium:"500",semibold:"600",bold:"700",extrabold:"800",black:"900"},q={sans:"system-ui, -apple-system, sans-serif",serif:"ui-serif, Georgia, serif",mono:"ui-monospace, SFMono-Regular, monospace"};function $(e){let t=[{source:C,property:"font-weight"},{source:q,property:"font-family"}],r=e[1];for(let o of t)if(o.source[r])return{[o.property]:o.source[r]}}var s={1:"1",2:"2",3:"3",4:"4",5:"5",6:"6",7:"7",8:"8",9:"9",10:"10",11:"11",12:"12"},w={"grid-cols":e=>({"grid-template-columns":`repeat(${s[e]}, minmax(0, 1fr))`}),"grid-rows":e=>({"grid-template-rows":`repeat(${s[e]}, minmax(0, 1fr))`}),"col-span":e=>({"grid-column":`span ${s[e]} / span ${s[e]}`}),"row-span":e=>({"grid-row":`span ${s[e]} / span ${s[e]}`})};function c(e){let t=e.slice(0,2).join("-"),r=e[2];return!w[t]||!s[r]?null:(console.log("inside grid handler",t,r),console.log(w[t](r)),w[t](r))}var D={0:"0",50:"0.5",75:"0.75",90:"0.9",95:"0.95",100:"1",105:"1.05",110:"1.1",125:"1.25",150:"1.5"},U={scale:e=>({transform:`scale(${e})`}),"scale-x":e=>({transform:`scaleX(${e})`}),"scale-y":e=>({transform:`scaleY(${e})`})};function u(e){let t,r;return e.length===3?(t=e.slice(0,2).join("-"),r=D[e[2]]):(t=e[0],r=D[e[1]]),!U[t]||r===void 0?null:U[t](r)}var B=Object.fromEntries(["m","mx","my","mt","mb","ml","mr"].map(e=>[e,m])),N=Object.fromEntries(["p","px","py","pt","pb","pl","pr"].map(e=>[e,m])),R=Object.fromEntries(["gap","gap-x","gap-y"].map(e=>[e,m])),G=Object.fromEntries(["w","h","max-w","min-w","max-h","min-h"].map(e=>[e,x])),v={...B,...N,...G,...R,bg:k,text:O,z:e=>({"z-index":e[1]}),w:x,h:x,top:a,bottom:a,left:a,right:a,justify:b,items:b,border:h,rounded:h,font:$,"grid-cols":c,"grid-rows":c,"col-span":c,"row-span":c,scale:u,"scale-x":u,"scale-y":u};var W=()=>document.body.querySelectorAll("[class^='chai-'], [class*=' chai-']");document.addEventListener("DOMContentLoaded",I);function I(){W().forEach(d);for(let t of Object.values(p))window.matchMedia(`(min-width: ${t}px)`).addEventListener("change",()=>W().forEach(d));new MutationObserver(t=>{for(let r of t)r.type==="childList"&&r.addedNodes.forEach(o=>{o.nodeType===Node.ELEMENT_NODE&&([...o.classList].some(n=>n.startsWith("chai-"))&&d(o),o.querySelectorAll("[class^='chai-'], [class*=' chai-']").forEach(d))}),r.type==="attributes"&&d(r.target)}).observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["class"]})}function d(e){let t={base:{}};for(let o of Object.keys(p))t[o]={};for(let o of e.classList){if(!o.startsWith("chai-"))continue;o=o.replace("chai-","");let{style:n,breakpoint:i}=V(o);n&&Object.assign(t[i],n)}let r={...t.base};for(let[o,n]of Object.entries(p))window.innerWidth>=n&&Object.assign(r,t[o]);Object.assign(e.style,r)}function V(e){let t=e.split("-"),r="base";if(p[t[0]]&&(r=t[0],t.shift(),e=t.join("-")),g[e])return{style:g[e],breakpoint:r};let o=X(t);if(!o)return null;let n=v[o](t);return n?{style:n,breakpoint:r}:null}function X(e){for(let t=e.length;t>0;t--){let r=e.slice(0,t).join("-");if(v[r])return r}return null}})();

package/package.json

@@ -1,12 +1,27 @@
 {
-  "name": "chai-tailwindcss",
-  "version": "1.0.0",
-  "description": "",
-  "license": "ISC",
-  "author": "Alok Yadav",
-  "type": "module",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  }
+    "name": "chai-tailwindcss",
+    "version": "1.0.1",
+    "description": "A lightweight utility-first CSS engine",
+    "browser": "./dist/chai.js",
+    "files": ["dist/"],
+    "homepage": "https://github.com/AlokYadavCodes/chai-tailwind-css#readme",
+    "bugs": {
+        "url": "https://github.com/AlokYadavCodes/chai-tailwind-css/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/AlokYadavCodes/chai-tailwind-css.git"
+    },
+    "license": "ISC",
+    "author": "",
+    "type": "module",
+    "main": "src/main.js",
+    "scripts": {
+        "format": "prettier --write .",
+        "build": "esbuild src/main.js --bundle --format=iife --outfile=dist/chai.js --minify"
+    },
+    "devDependencies": {
+        "esbuild": "^0.27.4",
+        "prettier": "3.8.1"
+    }
 }

package/src/main.js

@@ -0,0 +1,98 @@
+import { breakpoints } from "./config/breakpoints.js";
+import { staticUtilities } from "./config/static.js";
+import { utilities } from "./utilities/registry.js";
+
+const allElements = () => document.body.querySelectorAll("[class^='chai-'], [class*=' chai-']");
+
+document.addEventListener("DOMContentLoaded", init);
+
+function init() {
+    allElements().forEach(processElement);
+
+    // Register a matchMedia listener per breakpoint
+    for (const minWidth of Object.values(breakpoints)) {
+        window
+            .matchMedia(`(min-width: ${minWidth}px)`)
+            .addEventListener("change", () => allElements().forEach(processElement));
+    }
+
+    // Observe DOM changes for added elements and class changes
+    const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+            if (mutation.type === "childList") {
+                mutation.addedNodes.forEach((node) => {
+                    if (node.nodeType !== Node.ELEMENT_NODE) return;
+                    if ([...node.classList].some((c) => c.startsWith("chai-")))
+                        processElement(node);
+                    node.querySelectorAll("[class^='chai-'], [class*=' chai-']").forEach(
+                        processElement
+                    );
+                });
+            }
+            if (mutation.type === "attributes") {
+                processElement(mutation.target);
+            }
+        }
+    });
+
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["class"],
+    });
+}
+
+function processElement(el) {
+    const stylesByBreakpoint = { base: {} };
+    for (const bp of Object.keys(breakpoints)) stylesByBreakpoint[bp] = {};
+
+    for (let className of el.classList) {
+        if (!className.startsWith("chai-")) continue;
+
+        // remove "chai-" prefix
+        className = className.replace("chai-", "");
+        const { style, breakpoint } = parseClass(className);
+        if (!style) continue;
+
+        Object.assign(stylesByBreakpoint[breakpoint], style);
+    }
+
+    const styles = { ...stylesByBreakpoint.base };
+    for (const [bp, minWidth] of Object.entries(breakpoints)) {
+        if (window.innerWidth >= minWidth) {
+            Object.assign(styles, stylesByBreakpoint[bp]);
+        }
+    }
+
+    Object.assign(el.style, styles);
+}
+
+function parseClass(className) {
+    const parts = className.split("-");
+    let breakpoint = "base";
+    if (breakpoints[parts[0]]) {
+        breakpoint = parts[0];
+        parts.shift();
+        className = parts.join("-");
+    }
+
+    if (staticUtilities[className]) return { style: staticUtilities[className], breakpoint };
+
+    const prefix = getPrefix(parts);
+    if (!prefix) return null;
+
+    const style = utilities[prefix](parts);
+    if (!style) return null;
+
+    return { style, breakpoint };
+}
+
+function getPrefix(parts) {
+    // return longest match first (e.g. "max-w" and not "max" for something like "max-w-96")
+    for (let i = parts.length; i > 0; i--) {
+        const candidate = parts.slice(0, i).join("-");
+        if (utilities[candidate]) return candidate;
+    }
+    return null;
+}