From b8fb21fb51f9cae38bb2e9abea783b9cab966aa4 Mon Sep 17 00:00:00 2001 From: Ulysse ARNAUD Date: Sun, 2 Mar 2025 19:03:05 +0100 Subject: [PATCH 1/9] 0.3.9 --- README.md | 2 +- build/index.min.js | 2 +- build/index.min.js.gz | Bin 1331 -> 1332 bytes index.js | 2 +- package.json | 4 ++-- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 39b8636..a8d09c3 100644 --- a/README.md +++ b/README.md @@ -111,7 +111,7 @@ __Older browsers__ 1. Import `main.js` in your HTML file ```html - + ``` 2. Add one line of CSS to hide the page while building (and permits to hide elements with hidden attribute) diff --git a/build/index.min.js b/build/index.min.js index 7ca2384..d563e2e 100644 --- a/build/index.min.js +++ b/build/index.min.js @@ -1 +1 @@ -(()=>{function L(){let A=i();function i(){let n=Array.from(Object.keys(window).filter(c=>/^on/.test(c)).map(c=>c.slice(2)));return n.push("hover"),n}function N(n){let c=[];for(;n.tagName!=="HTML";){let a=n.tagName;if(n.id){a+="#"+n.id,c.unshift(a);break}else{let u=n,t=1;for(;u=u.previousElementSibling;)u.tagName===n.tagName&&t++;t!=1&&(a+=`:nth-of-type(${t})`)}c.unshift(a),n=n.parentElement}return c.unshift("HTML"),c.join(">")}function j(){let n=document.querySelectorAll('[class*="["]'),c=[/\/\*[\s\S]*?\*\//g,/\/\/.*/g];for(let t of n){let b=t.className.matchAll(c[0]);for(let d of b)t.className=t.className.replace(d[0],"").trim();let E=t.className.matchAll(c[1]);for(let d of E)t.className=t.className.replace(d[0],"").trim()}let a=[/([a-zA-Z0-9\-,]+)-\[([a-zA-Z0-9 .%#,\-()'"\/]+)\]/g,/((?:\[[a-zA-Z0-9\-@():>, ]+\]:)*)\{\s*?((?:[a-zA-Z\-]+-\[[a-zA-Z0-9,%. \-()/ ]+\]\s*?)+)\}/g];for(let t of n){let b=t.className.matchAll(a[1]),E={events:void 0,media:void 0,query:void 0,classes:void 0};for(let h of b){t.className=t.className.replace(h[0],"").trim();let s=h[0].split("]:"),o={...E};for(let e=0;eA.includes(l))?o.events=e:s[e].startsWith("@media(")?o.media=e:s[e].startsWith("{")&&s[e].endsWith("}")?o.classes=e:o.query=e;let y=Object.entries(o).sort((e,l)=>e[1]-l[1]).filter(e=>e[1]!==void 0).map(e=>e[0]);if(y.join(",")==="events,query,classes"){let e=s[o.events].split(","),l=s[o.query].replaceAll(/current\s*,?/g,N(t)+","),f=Array.from(s[o.classes].slice(1,-1).matchAll(a[0])).map(r=>r.slice(1)),p=document.querySelectorAll(l);for(let r of p)for(let v of e)v==="hover"?(r._style=Object.assign({},r.style),r.addEventListener("mouseover",function(){for(let[m,g]of f)r.style.setProperty(m,g)}),r.addEventListener("mouseout",function(){for(let[m,g]of f)r.style.setProperty(m,r._style[m]??"initial")})):r.addEventListener(v,function(){for(let[m,g]of f)r.style.setProperty(m,g)});continue}if(y.join(",")==="query,classes"){let e=s[o.query].replaceAll(/current\s*,?/g,N(t)+","),l=Array.from(s[o.classes].slice(1,-1).matchAll(a[0])).map(p=>p.slice(1));e.startsWith(">")&&(console.log("before : ",e),e=N(t)+e,console.log("after : ",e)),e.endsWith(",")&&(e=e.slice(0,-1));let f=document.querySelectorAll(e);for(let p of f)for(let[r,v]of l)p.style.setProperty(r,v);continue}if(y.join(",")==="classes"){let e=Array.from(s[o.classes].slice(1,-1).matchAll(a[0])).map(l=>l.slice(1));for(let[l,f]of e)t.style.setProperty(l,f);continue}}let d=t.className.matchAll(a[0]);for(let h of d){let[s,o,y]=h;t.style.setProperty(o,y),t.className=t.className.replace(s,"").trim()}}document.documentElement.setAttribute("aria-busy","false");let u=new Event("css-in-js-in-html-ready");document.dispatchEvent(u)}j()}var q;window.addEventListener("css-in-js-in-html-ready",function(){q||(q=new MutationObserver(A=>{for(let i of A){if(i.type==="attributes"&&i.attributeName==="class"){L();break}if(i.type==="childList"&&(i.addedNodes.length||i.removedNodes.length)){L();break}}}),q.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["class"]}))});document.addEventListener("DOMContentLoaded",L);})(); +(()=>{function L(){let A=i();function i(){let n=Array.from(Object.keys(window).filter(c=>/^on/.test(c)).map(c=>c.slice(2)));return n.push("hover"),n}function N(n){let c=[];for(;n.tagName!=="HTML";){let a=n.tagName;if(n.id){a+="#"+n.id,c.unshift(a);break}else{let u=n,t=1;for(;u=u.previousElementSibling;)u.tagName===n.tagName&&t++;t!=1&&(a+=`:nth-of-type(${t})`)}c.unshift(a),n=n.parentElement}return c.unshift("HTML"),c.join(">")}function j(){let n=document.querySelectorAll('[class*="["]'),c=[/\/\*[\s\S]*?\*\//g,/\/\/.*/g];for(let t of n){let b=t.className.matchAll(c[0]);for(let d of b)t.className=t.className.replace(d[0],"").trim();let E=t.className.matchAll(c[1]);for(let d of E)t.className=t.className.replace(d[0],"").trim()}let a=[/([a-zA-Z0-9\-,]+)-\[([a-zA-Z0-9 .%#,\-()'"\/]+)\]/g,/((?:\[[a-zA-Z0-9\-@():>,+ ]+\]:)*)\{\s*?((?:[a-zA-Z\-]+-\[[a-zA-Z0-9,%. \-()/ ]+\]\s*?)+)\}/g];for(let t of n){let b=t.className.matchAll(a[1]),E={events:void 0,media:void 0,query:void 0,classes:void 0};for(let h of b){t.className=t.className.replace(h[0],"").trim();let s=h[0].split("]:"),o={...E};for(let e=0;eA.includes(l))?o.events=e:s[e].startsWith("@media(")?o.media=e:s[e].startsWith("{")&&s[e].endsWith("}")?o.classes=e:o.query=e;let y=Object.entries(o).sort((e,l)=>e[1]-l[1]).filter(e=>e[1]!==void 0).map(e=>e[0]);if(y.join(",")==="events,query,classes"){let e=s[o.events].split(","),l=s[o.query].replaceAll(/current\s*,?/g,N(t)+","),f=Array.from(s[o.classes].slice(1,-1).matchAll(a[0])).map(r=>r.slice(1)),p=document.querySelectorAll(l);for(let r of p)for(let v of e)v==="hover"?(r._style=Object.assign({},r.style),r.addEventListener("mouseover",function(){for(let[m,g]of f)r.style.setProperty(m,g)}),r.addEventListener("mouseout",function(){for(let[m,g]of f)r.style.setProperty(m,r._style[m]??"initial")})):r.addEventListener(v,function(){for(let[m,g]of f)r.style.setProperty(m,g)});continue}if(y.join(",")==="query,classes"){let e=s[o.query].replaceAll(/current\s*,?/g,N(t)+","),l=Array.from(s[o.classes].slice(1,-1).matchAll(a[0])).map(p=>p.slice(1));e.startsWith(">")&&(console.log("before : ",e),e=N(t)+e,console.log("after : ",e)),e.endsWith(",")&&(e=e.slice(0,-1));let f=document.querySelectorAll(e);for(let p of f)for(let[r,v]of l)p.style.setProperty(r,v);continue}if(y.join(",")==="classes"){let e=Array.from(s[o.classes].slice(1,-1).matchAll(a[0])).map(l=>l.slice(1));for(let[l,f]of e)t.style.setProperty(l,f);continue}}let d=t.className.matchAll(a[0]);for(let h of d){let[s,o,y]=h;t.style.setProperty(o,y),t.className=t.className.replace(s,"").trim()}}document.documentElement.setAttribute("aria-busy","false");let u=new Event("css-in-js-in-html-ready");document.dispatchEvent(u)}j()}var q;window.addEventListener("css-in-js-in-html-ready",function(){q||(q=new MutationObserver(A=>{for(let i of A){if(i.type==="attributes"&&i.attributeName==="class"){L();break}if(i.type==="childList"&&(i.addedNodes.length||i.removedNodes.length)){L();break}}}),q.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["class"]}))});document.addEventListener("DOMContentLoaded",L);})(); diff --git a/build/index.min.js.gz b/build/index.min.js.gz index 7fdf0b817cfad0dfe7ef2359cca85756e1522229..369bad62465f319d66068950af4b4223fde16d7b 100644 GIT binary patch delta 849 zcmV-X1FrnD3bYEa@d1Bi;zW}$n&B}H51}3}EMLbJdeOui%8*yov5KdSjOE6lzWz?E zV~Yj3Vh6s1MC;kE5UF!PwmcPae`vDb9~vFJXRMF5Hf@>?-@D^R?Odd@{kOqi4HA2Rvf-)2Z&}!6kpjq@i}|3D|~U)gDPU zUs91LvP!u|65~ZdTNoIhwIU`~M*k%Y%#b$?Cdjp1&F?v;gNsL_hRXA_qt%T_hZ_hL zZ96gE#J*?UumihFfFA`oUMPbQClUrIhXi@jW~rZmyd}brYID#|z=mr31_so=YikG< zW{KOz)TXh|pWA;{1qZ+RRN1pmt*@7!^f85z4$2%KvJMI@q(SNnsOWs2a{)lys z4mAOL_5#CCoTgVc{%fHP&jDX|3&WW=Do8&RVI+2jf-QepM_?+$oerwG`9l>YS7wjk z64y^@t;}9(H~xe#u9*@#6WO8j;Vgk&?~J zQ;qoiLD$V~*CFs;7Z8{%*2rCP2%I}J$0d+u&Ke&$dB78A&`uo-@C;g(GzvN6oyiO9 zS39e+C#rvwpQ^KT8nAox71>$zB`(jP50_73|0U|r#SrG59AMb{CP@}Gy<^V!2A2ch znpZD<>?Ik#+Rby2HXa9>6l5Qtlp&ou2p3?q*sa9 zTUB}wIA$@dV{V&4SjhNir)e4FCR%$U_imf-#%zD32ise^2iB7np-UTND^cMZ7NmL? zE9cH{chfV?{+QZfXWrf4qr1kJca@1P@%>731#<^2?c&@aDJ+spe1N(T)NXyYB;r0y z?T$u*9*^Dn*p>_w3@qK|mOo delta 848 zcmV-W1F!tF3bP8Z@d1Cti6&t*!($vCLOotswvH+EqKP*YA+M-o^-dcZ%Z)*M{hd(9 z77B934txiB*0Wt9Qs;tfc`D-m&?LV@#Snl!Uis!J)LG@}_5 zX2A}W(yNnx&MtiZi>8w2YqRnBWP(pe&o+k+c*N|dQ{9b&ON@U>L+#WPunobgJ(6s` zq#{pbm2!VJKMHWXPzE7RB+O3^3G$@PQa=EBON1HK=Aa#b4b`>{%%^?V)etI- z61R=1O=F)wx2=B)4uJJR4-q1=xoAY9K6kcWrb(sjWPy4k3#jB9WbmYs$cFRV3U`*G zJ`cpZ#KXb^XIs}5o2x;x$|uH-JhiQ|1y|z!xU)x&cQ)X5+Aolz|7x?ByoVV45$hZs zY6AA`1%{tEO|NYH*Fqbf1HSGSW;1V8kbWk@MC=R&Te5$Sz*L4i9aMAkhbl_0%pSod zuAkCcndd0&0|~a#V&RHh7!gYt*%;5xnA$zlZ9ge;Bl3#ZU)Rv%#q&KiBA;C&C7YM0 z8u9squAAGgL*TtGATU|1k-Op$ICo}_OCZafH9m0ifG5tNojMla8MG{E6mrHplNZ*n zc2;FiR40EwRcGlmVE5=Nva{$*T%JK6E}z8yOVpo>AHWO`?6)ujACU1-VGVQc zjuuF*%jk&Ksz~?baPn{V0(OSpoIU7jWfbT3_sI3OdD&(`=XV5ytsZ3HYkYru|L#{P aN=qwZaNZ@?*sn1-_rw1Ot#P|{3;+Pa)SyNH diff --git a/index.js b/index.js index 3565ccc..e84bcdb 100644 --- a/index.js +++ b/index.js @@ -47,7 +47,7 @@ function init() { } const regularExpressions = [ /([a-zA-Z0-9\-,]+)-\[([a-zA-Z0-9 .%#,\-()'"\/]+)\]/g, - /((?:\[[a-zA-Z0-9\-@():>, ]+\]:)*)\{\s*?((?:[a-zA-Z\-]+-\[[a-zA-Z0-9,%. \-()/ ]+\]\s*?)+)\}/g + /((?:\[[a-zA-Z0-9\-@():>,+ ]+\]:)*)\{\s*?((?:[a-zA-Z\-]+-\[[a-zA-Z0-9,%. \-()/ ]+\]\s*?)+)\}/g ]; for (const element of elements) { const matches = element.className.matchAll(regularExpressions[1]); diff --git a/package.json b/package.json index d98eb0f..5eafa19 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,12 @@ { "name": "@ulyssear/css-in-js-in-html", - "version": "0.3.8", + "version": "0.3.9", "description": "CSS-in-JS-in-HTML is a library that allows you to use CSS-in-JS with HTML only.", "main": "build/index.js", "scripts": { "tests": "echo \"Error: no test specified\" && exit 1", "compress": "node scripts/compress.js", - "build": "npm run compress && esbuild index.js --bundle --outfile=build/index.min.js --minify" + "build": "esbuild index.js --bundle --outfile=build/index.min.js --minify && npm run compress" }, "repository": { "type": "git", From cd953a36607f3ad13b9a084957df418da912805a Mon Sep 17 00:00:00 2001 From: Ulysse ARNAUD Date: Sun, 2 Mar 2025 20:58:23 +0100 Subject: [PATCH 2/9] 0.3.11 --- README.md | 2 +- build/index.min.js | 2 +- build/index.min.js.gz | Bin 1332 -> 1241 bytes index.js | 57 ++++++++++++++++++------------------------ package.json | 2 +- 5 files changed, 27 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index a8d09c3..33992ef 100644 --- a/README.md +++ b/README.md @@ -111,7 +111,7 @@ __Older browsers__ 1. Import `main.js` in your HTML file ```html - + ``` 2. Add one line of CSS to hide the page while building (and permits to hide elements with hidden attribute) diff --git a/build/index.min.js b/build/index.min.js index d563e2e..ab7686d 100644 --- a/build/index.min.js +++ b/build/index.min.js @@ -1 +1 @@ -(()=>{function L(){let A=i();function i(){let n=Array.from(Object.keys(window).filter(c=>/^on/.test(c)).map(c=>c.slice(2)));return n.push("hover"),n}function N(n){let c=[];for(;n.tagName!=="HTML";){let a=n.tagName;if(n.id){a+="#"+n.id,c.unshift(a);break}else{let u=n,t=1;for(;u=u.previousElementSibling;)u.tagName===n.tagName&&t++;t!=1&&(a+=`:nth-of-type(${t})`)}c.unshift(a),n=n.parentElement}return c.unshift("HTML"),c.join(">")}function j(){let n=document.querySelectorAll('[class*="["]'),c=[/\/\*[\s\S]*?\*\//g,/\/\/.*/g];for(let t of n){let b=t.className.matchAll(c[0]);for(let d of b)t.className=t.className.replace(d[0],"").trim();let E=t.className.matchAll(c[1]);for(let d of E)t.className=t.className.replace(d[0],"").trim()}let a=[/([a-zA-Z0-9\-,]+)-\[([a-zA-Z0-9 .%#,\-()'"\/]+)\]/g,/((?:\[[a-zA-Z0-9\-@():>,+ ]+\]:)*)\{\s*?((?:[a-zA-Z\-]+-\[[a-zA-Z0-9,%. \-()/ ]+\]\s*?)+)\}/g];for(let t of n){let b=t.className.matchAll(a[1]),E={events:void 0,media:void 0,query:void 0,classes:void 0};for(let h of b){t.className=t.className.replace(h[0],"").trim();let s=h[0].split("]:"),o={...E};for(let e=0;eA.includes(l))?o.events=e:s[e].startsWith("@media(")?o.media=e:s[e].startsWith("{")&&s[e].endsWith("}")?o.classes=e:o.query=e;let y=Object.entries(o).sort((e,l)=>e[1]-l[1]).filter(e=>e[1]!==void 0).map(e=>e[0]);if(y.join(",")==="events,query,classes"){let e=s[o.events].split(","),l=s[o.query].replaceAll(/current\s*,?/g,N(t)+","),f=Array.from(s[o.classes].slice(1,-1).matchAll(a[0])).map(r=>r.slice(1)),p=document.querySelectorAll(l);for(let r of p)for(let v of e)v==="hover"?(r._style=Object.assign({},r.style),r.addEventListener("mouseover",function(){for(let[m,g]of f)r.style.setProperty(m,g)}),r.addEventListener("mouseout",function(){for(let[m,g]of f)r.style.setProperty(m,r._style[m]??"initial")})):r.addEventListener(v,function(){for(let[m,g]of f)r.style.setProperty(m,g)});continue}if(y.join(",")==="query,classes"){let e=s[o.query].replaceAll(/current\s*,?/g,N(t)+","),l=Array.from(s[o.classes].slice(1,-1).matchAll(a[0])).map(p=>p.slice(1));e.startsWith(">")&&(console.log("before : ",e),e=N(t)+e,console.log("after : ",e)),e.endsWith(",")&&(e=e.slice(0,-1));let f=document.querySelectorAll(e);for(let p of f)for(let[r,v]of l)p.style.setProperty(r,v);continue}if(y.join(",")==="classes"){let e=Array.from(s[o.classes].slice(1,-1).matchAll(a[0])).map(l=>l.slice(1));for(let[l,f]of e)t.style.setProperty(l,f);continue}}let d=t.className.matchAll(a[0]);for(let h of d){let[s,o,y]=h;t.style.setProperty(o,y),t.className=t.className.replace(s,"").trim()}}document.documentElement.setAttribute("aria-busy","false");let u=new Event("css-in-js-in-html-ready");document.dispatchEvent(u)}j()}var q;window.addEventListener("css-in-js-in-html-ready",function(){q||(q=new MutationObserver(A=>{for(let i of A){if(i.type==="attributes"&&i.attributeName==="class"){L();break}if(i.type==="childList"&&(i.addedNodes.length||i.removedNodes.length)){L();break}}}),q.observe(document.body,{attributes:!0,childList:!0,subtree:!0,attributeFilter:["class"]}))});document.addEventListener("DOMContentLoaded",L);})(); +(()=>{function E(){let x=m();function m(){let c=Array.from(Object.keys(window).filter(l=>/^on/.test(l)).map(l=>l.slice(2)));return c.push("hover"),c}function q(c=""){return(c?c+"-":"")+"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(l){let a=Math.random()*16|0;return(l==="x"?a:a&3|8).toString(16)})}function j(){let c=document.querySelectorAll('[class*="["]'),l=[/\/\*[\s\S]*?\*\//g,/\/\/.*/g];for(let s of c){let v=s.className.matchAll(l[0]);for(let f of v)s.className=s.className.replace(f[0],"").trim();let A=s.className.matchAll(l[1]);for(let f of A)s.className=s.className.replace(f[0],"").trim()}let a=[/([a-zA-Z0-9\-,]+)-\[([a-zA-Z0-9 .%#,\-()'"\/]+)\]/g,/((?:\[[a-zA-Z0-9\-@():>,+ ]+\]:)*)\{\s*?((?:[a-zA-Z\-]+-\[[a-zA-Z0-9,%. \-()/ ]+\]\s*?)+)\}/g];for(let s of c){let v=s.className.matchAll(a[1]),A={events:void 0,media:void 0,query:void 0,classes:void 0};for(let y of v){s.className=s.className.replace(y[0],"").trim();let n=y[0].split("]:"),o={...A};for(let e=0;ex.includes(t))?o.events=e:n[e].startsWith("@media(")?o.media=e:n[e].startsWith("{")&&n[e].endsWith("}")?o.classes=e:o.query=e;let d=Object.entries(o).sort((e,t)=>e[1]-t[1]).filter(e=>e[1]!==void 0).map(e=>e[0]);if(d.join(",")==="events,query,classes"){let e=n[o.events].split(","),t=n[o.query].replaceAll(/current\s*,?/g,"#"+uuid+","),u=Array.from(n[o.classes].slice(1,-1).matchAll(a[0])).map(r=>r.slice(1));t.startsWith(">")&&(t="#"+uuid+t),t.endsWith(",")&&(t=t.slice(0,-1));let b=document.querySelectorAll(t);s.removeAttribute("id");for(let r of b)for(let p of e)p==="hover"?(r._style=Object.assign({},r.style),r.addEventListener("mouseover",function(){for(let[i,h]of u)r.style.setProperty(i,h)}),r.addEventListener("mouseout",function(){for(let[i,h]of u)r.style.setProperty(i,r._style[i]??"initial")})):r.addEventListener(p,function(){for(let[i,h]of u)r.style.setProperty(i,h)});continue}if(d.join(",")==="query,classes"){let e=q("cijih");s.setAttribute("id",e);let t=n[o.query].replaceAll(/current\s*,?/g,"#"+e+","),u=Array.from(n[o.classes].slice(1,-1).matchAll(a[0])).map(r=>r.slice(1));t.startsWith(">")&&(t="#"+e+t),t.endsWith(",")&&(t=t.slice(0,-1));let b=document.querySelectorAll(t);s.removeAttribute("id");for(let r of b)for(let[p,i]of u)r.style.setProperty(p,i);continue}if(d.join(",")==="classes"){let e=Array.from(n[o.classes].slice(1,-1).matchAll(a[0])).map(t=>t.slice(1));for(let[t,u]of e)s.style.setProperty(t,u);continue}}let f=s.className.matchAll(a[0]);for(let y of f){let[n,o,d]=y;s.style.setProperty(o,d),s.className=s.className.replace(n,"").trim()}}document.documentElement.setAttribute("aria-busy","false");let N=new Event("css-in-js-in-html-ready");document.dispatchEvent(N)}j()}var g;window.addEventListener("css-in-js-in-html-ready",function(){g||(g=new MutationObserver(function(x){for(let m of x)(m.type==="childList"&&m.addedNodes.length>0||m.type==="attributes"&&m.attributeName==="class")&&E()}),g.observe(document.body,{childList:!0,attributes:!0,subtree:!0,attributeFilter:["class"]}))});document.addEventListener("DOMContentLoaded",E);})(); diff --git a/build/index.min.js.gz b/build/index.min.js.gz index 369bad62465f319d66068950af4b4223fde16d7b..eb16997f062369e4ce9fd68aee65bd42cdd1d7f5 100644 GIT binary patch literal 1241 zcmV;~1Sb0*iwFP!000006UA0rZ`(E$e&4TfS=1qIigLE0*zC!!(Pd9-I-m~&CTW8# z(Ka((9Fj_{Ir{HAq$FEuofOT(rUyYhJlF3#JQT*nn;+I?9&1tLgDXr9Dc6I&mtitH zinCT6drK*!imhdl;rFW>9&7eDuN3|$@}&4k*jl8TOPqRh_s=4CndVC4ln|ChJ0ne* zN=3}^w}g$*t)`Pf-aOWvz{ai;G2T*mqHO^Ci5|X3A z+8ErCp5_Cq4w5w(QGk*`O@?h_x_r$4<){9aU+cea;PzeYN6tS>=Z}f=W8lzmOq{^) z$p-AzOBy(sT%f>(-N4Z1V!W6Je&6y9Cet|`55jQ}PRWP_hd_-MMz7ThoN(;)ZRjgD zFpgboW3&mlufG!O$Y4R2-htl%(Q0~Eh-5IK8BaviEiC)p!usHyVttHNH8dT*gkyDv zr`$7Argo{&7==?fHidU!j4e<8xi^{dpK_M+e51EBJ|2_P(zzTCaqjcbGq2WldpIu% zp;p?urw|*8l@-?Be9uH4r)9zw)`Tny*1+KLX=9=zsnzd7!-0NdF~P`a+0S!I2SkQL zE9H68%4%!U;s!=VbDTVGYfrp(@<3cEAddnPFQmqpQw`IM13`{9EOq0EH^LX5*Kp8` zBP%uMMyzqdZVHjxQq7@nYHDcg_(M%sZ~&|;x{namcEg&49e1W*+_;nyw4vYV0$Lfp zMB}m)$=F(z{fTNEw9&$j3+h~we)B=XP5RQC%M)QU{Q%XuK^5pa2GfvW4`JHw>(;}> zglSr9^~4anb_UgEz%Q_5e<@w1yyFoH z7MmO&Y6=CJ4FVrgl3W>(e-%pe97sf2Q7Ud-oTfNAw1Ip6uWwXQn-ii(HGmsJ1MwW`0P;&Ccq^GPB;rQo?Z!GzU4oVwgJEkk>d)S291vzME_ zXV;J2UH$(AdjYL&#(qusGEmG|%Z`bbRoag}nre%OwY6p^zkRRuV% zqf~L!FnjIg{Nuo$ALwPJ9FaRW_Py0v>PQ|X6{wz~2(>dsHWt^UhF`M!E|P=Itob!P zbMhZ^+drn8`+K~xxx6cNWQ6Zmic1(m_^7o%p5{Sj5Zx1;FS8OclcISM#KUv_&V>gd%;txz$`d1s+_^^hAh~gtOd#wZ$)Y3Y zY^hYdr6)JCx(9FdyPJeJS{$Bnh9yRLJ6Bs|0(h*HC!8%U`)4hX{ia-QY0Mx zgfaFNH!aNpl(&Wx7DRqlDCFnV#Os@Q%U>|&{{H8?Yu9gC zVs^apMTT-JQhbOf%zf!j?13b-%JoKM2F2K4DIR~SxzxN7u2@bCyKGHVtfHmjJ5f~n zO7bnw%?GiPB47Ks>TNJ~vNsx;$;3A=*yU)1z~skSZZ=+#d1ha7^y9(Q_#>`|_DK%X zWvoDTXQA%UIB~VnVetF55IJ(^EQvmA{I=;X*do-9e#+$i*OuHr)y$qQ#zimTZFAv;}n_GLBC>#HhOHNkVlhjtnwtd zi11M$wE`Lm$1gkQVi6mG-F!h+CZ76wDfHwe$>Wa31VFq+{p4iBLoFDzfj z6?)Oc8_JMZ)Uk@Ejf~~SpuYZ2tYeD>xnc*tgGB4ut`MnnLAE>% zv_QR)1(fm)GI-KRWWxb&g*!`8p9kVy;$h)|v#slj&D9`Te+7rdKxpYoQI#0bh3u!iHN9ib_y(5)-)EqtYdDQL0HK6XQycy731#<^2?c&@a zDJ+spe1N(T)NXyYB;r0y?T$u*9*^Dn*p>_w3@qK'); + function generateUUID(prefix="") { + return (prefix ? prefix + "-" : "") + 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { + const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8); + return v.toString(16); + }); } function main() { @@ -83,9 +68,16 @@ function init() { if (_entry.join(',') === 'events,query,classes') { const events = split[entry.events].split(','); - const query = split[entry.query].replaceAll(/current\s*,?/g, getFullPathToElement(element) + ','); + let query = split[entry.query].replaceAll(/current\s*,?/g, '#' + uuid + ','); const classes = Array.from(split[entry.classes].slice(1, -1).matchAll(regularExpressions[0])).map(e => e.slice(1)); + if (query.startsWith('>')) { + query = '#' + uuid + query; + } + if (query.endsWith(',')) { + query = query.slice(0, -1); + } const elements = document.querySelectorAll(query); + element.removeAttribute('id'); for (const element of elements) { for (const event of events) { if (event === 'hover') { @@ -115,17 +107,18 @@ function init() { } if (_entry.join(',') === 'query,classes') { - let query = split[entry.query].replaceAll(/current\s*,?/g, getFullPathToElement(element) + ','); + const uuid = generateUUID('cijih'); + element.setAttribute('id',uuid) + let query = split[entry.query].replaceAll(/current\s*,?/g, '#' + uuid + ','); const classes = Array.from(split[entry.classes].slice(1, -1).matchAll(regularExpressions[0])).map(e => e.slice(1)); if (query.startsWith('>')) { - console.log('before : ', query); - query = getFullPathToElement(element) + query; - console.log('after : ', query); + query = '#' + uuid + query; } if (query.endsWith(',')) { query = query.slice(0, -1); } const elements = document.querySelectorAll(query); + element.removeAttribute('id'); for (const element of elements) { for (const [property, value] of classes) { element.style.setProperty(property, value); @@ -164,22 +157,20 @@ function init() { let observer; window.addEventListener('css-in-js-in-html-ready', function () { if (!observer) { - observer = new MutationObserver((mutationsList) => { + observer = new MutationObserver(function (mutationsList) { for (const mutation of mutationsList) { - if (mutation.type === 'attributes' && mutation.attributeName === 'class') { - init(); - break; - } - if (mutation.type === 'childList' && (mutation.addedNodes.length || mutation.removedNodes.length)) { + if ( + (mutation.type === 'childList' && mutation.addedNodes.length > 0) || + (mutation.type === 'attributes' && mutation.attributeName === 'class') + ) { init(); - break; } } }); observer.observe(document.body, { - attributes: true, childList: true, + attributes: true, subtree: true, attributeFilter: ['class'] }); diff --git a/package.json b/package.json index 5eafa19..88274dc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ulyssear/css-in-js-in-html", - "version": "0.3.9", + "version": "0.3.11", "description": "CSS-in-JS-in-HTML is a library that allows you to use CSS-in-JS with HTML only.", "main": "build/index.js", "scripts": { From 01369cbaf5fddc2ba97836082e9cecd720dbafc9 Mon Sep 17 00:00:00 2001 From: Ulysse ARNAUD Date: Mon, 3 Mar 2025 21:12:02 +0100 Subject: [PATCH 3/9] 0.3.12 --- build/index.min.js | 2 +- build/index.min.js.gz | Bin 1241 -> 1269 bytes index.js | 9 +++++++++ 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/build/index.min.js b/build/index.min.js index ab7686d..2ecacf6 100644 --- a/build/index.min.js +++ b/build/index.min.js @@ -1 +1 @@ -(()=>{function E(){let x=m();function m(){let c=Array.from(Object.keys(window).filter(l=>/^on/.test(l)).map(l=>l.slice(2)));return c.push("hover"),c}function q(c=""){return(c?c+"-":"")+"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(l){let a=Math.random()*16|0;return(l==="x"?a:a&3|8).toString(16)})}function j(){let c=document.querySelectorAll('[class*="["]'),l=[/\/\*[\s\S]*?\*\//g,/\/\/.*/g];for(let s of c){let v=s.className.matchAll(l[0]);for(let f of v)s.className=s.className.replace(f[0],"").trim();let A=s.className.matchAll(l[1]);for(let f of A)s.className=s.className.replace(f[0],"").trim()}let a=[/([a-zA-Z0-9\-,]+)-\[([a-zA-Z0-9 .%#,\-()'"\/]+)\]/g,/((?:\[[a-zA-Z0-9\-@():>,+ ]+\]:)*)\{\s*?((?:[a-zA-Z\-]+-\[[a-zA-Z0-9,%. \-()/ ]+\]\s*?)+)\}/g];for(let s of c){let v=s.className.matchAll(a[1]),A={events:void 0,media:void 0,query:void 0,classes:void 0};for(let y of v){s.className=s.className.replace(y[0],"").trim();let n=y[0].split("]:"),o={...A};for(let e=0;ex.includes(t))?o.events=e:n[e].startsWith("@media(")?o.media=e:n[e].startsWith("{")&&n[e].endsWith("}")?o.classes=e:o.query=e;let d=Object.entries(o).sort((e,t)=>e[1]-t[1]).filter(e=>e[1]!==void 0).map(e=>e[0]);if(d.join(",")==="events,query,classes"){let e=n[o.events].split(","),t=n[o.query].replaceAll(/current\s*,?/g,"#"+uuid+","),u=Array.from(n[o.classes].slice(1,-1).matchAll(a[0])).map(r=>r.slice(1));t.startsWith(">")&&(t="#"+uuid+t),t.endsWith(",")&&(t=t.slice(0,-1));let b=document.querySelectorAll(t);s.removeAttribute("id");for(let r of b)for(let p of e)p==="hover"?(r._style=Object.assign({},r.style),r.addEventListener("mouseover",function(){for(let[i,h]of u)r.style.setProperty(i,h)}),r.addEventListener("mouseout",function(){for(let[i,h]of u)r.style.setProperty(i,r._style[i]??"initial")})):r.addEventListener(p,function(){for(let[i,h]of u)r.style.setProperty(i,h)});continue}if(d.join(",")==="query,classes"){let e=q("cijih");s.setAttribute("id",e);let t=n[o.query].replaceAll(/current\s*,?/g,"#"+e+","),u=Array.from(n[o.classes].slice(1,-1).matchAll(a[0])).map(r=>r.slice(1));t.startsWith(">")&&(t="#"+e+t),t.endsWith(",")&&(t=t.slice(0,-1));let b=document.querySelectorAll(t);s.removeAttribute("id");for(let r of b)for(let[p,i]of u)r.style.setProperty(p,i);continue}if(d.join(",")==="classes"){let e=Array.from(n[o.classes].slice(1,-1).matchAll(a[0])).map(t=>t.slice(1));for(let[t,u]of e)s.style.setProperty(t,u);continue}}let f=s.className.matchAll(a[0]);for(let y of f){let[n,o,d]=y;s.style.setProperty(o,d),s.className=s.className.replace(n,"").trim()}}document.documentElement.setAttribute("aria-busy","false");let N=new Event("css-in-js-in-html-ready");document.dispatchEvent(N)}j()}var g;window.addEventListener("css-in-js-in-html-ready",function(){g||(g=new MutationObserver(function(x){for(let m of x)(m.type==="childList"&&m.addedNodes.length>0||m.type==="attributes"&&m.attributeName==="class")&&E()}),g.observe(document.body,{childList:!0,attributes:!0,subtree:!0,attributeFilter:["class"]}))});document.addEventListener("DOMContentLoaded",E);})(); +(()=>{function j(){let v=f();function f(){let c=Array.from(Object.keys(window).filter(l=>/^on/.test(l)).map(l=>l.slice(2)));return c.push("hover"),c}function E(c=""){return(c?c+"-":"")+"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(l){let i=Math.random()*16|0;return(l==="x"?i:i&3|8).toString(16)})}function L(){let c=document.querySelectorAll('[class*="["]'),l=[/\/\*[\s\S]*?\*\//g,/\/\/.*/g];for(let s of c){let A=s.className.matchAll(l[0]);for(let d of A)s.className=s.className.replace(d[0],"").trim();let b=s.className.matchAll(l[1]);for(let d of b)s.className=s.className.replace(d[0],"").trim()}let i=[/([a-zA-Z0-9\-,]+)-\[([a-zA-Z0-9 .%#,\-()'"\/]+)\]/g,/((?:\[[a-zA-Z0-9\-@():>,+ ]+\]:)*)\{\s*?((?:[a-zA-Z\-]+-\[[a-zA-Z0-9,%. \-()/ ]+\]\s*?)+)\}/g];for(let s of c){let A=s.className.matchAll(i[1]),b={events:void 0,media:void 0,query:void 0,classes:void 0};for(let y of A){s.className=s.className.replace(y[0],"").trim();let n=y[0].split("]:"),o={...b};for(let e=0;ev.includes(t))?o.events=e:n[e].startsWith("@media(")?o.media=e:n[e].startsWith("{")&&n[e].endsWith("}")?o.classes=e:o.query=e;let u=Object.entries(o).sort((e,t)=>e[1]-t[1]).filter(e=>e[1]!==void 0).map(e=>e[0]),p,W=u.join(",");if(u.includes("query,")&&(p=E("cijih"),s.setAttribute("id",p)),u.join(",")==="events,query,classes"){let e=n[o.events].split(","),t=n[o.query].replaceAll(/current\s*,?/g,"#"+p+","),m=Array.from(n[o.classes].slice(1,-1).matchAll(i[0])).map(r=>r.slice(1));t.startsWith(">")&&(t="#"+p+t),t.endsWith(",")&&(t=t.slice(0,-1));let g=document.querySelectorAll(t);s.removeAttribute("id");for(let r of g)for(let h of e)h==="hover"?(r._style=Object.assign({},r.style),r.addEventListener("mouseover",function(){for(let[a,x]of m)r.style.setProperty(a,x)}),r.addEventListener("mouseout",function(){for(let[a,x]of m)r.style.setProperty(a,r._style[a]??"initial")})):r.addEventListener(h,function(){for(let[a,x]of m)r.style.setProperty(a,x)});continue}if(u.join(",")==="query,classes"){let e=E("cijih");s.setAttribute("id",e);let t=n[o.query].replaceAll(/current\s*,?/g,"#"+e+","),m=Array.from(n[o.classes].slice(1,-1).matchAll(i[0])).map(r=>r.slice(1));t.startsWith(">")&&(t="#"+e+t),t.endsWith(",")&&(t=t.slice(0,-1));let g=document.querySelectorAll(t);s.removeAttribute("id");for(let r of g)for(let[h,a]of m)r.style.setProperty(h,a);continue}if(u.join(",")==="classes"){let e=Array.from(n[o.classes].slice(1,-1).matchAll(i[0])).map(t=>t.slice(1));for(let[t,m]of e)s.style.setProperty(t,m);continue}}let d=s.className.matchAll(i[0]);for(let y of d){let[n,o,u]=y;s.style.setProperty(o,u),s.className=s.className.replace(n,"").trim()}}document.documentElement.setAttribute("aria-busy","false");let q=new Event("css-in-js-in-html-ready");document.dispatchEvent(q)}L()}var N;window.addEventListener("css-in-js-in-html-ready",function(){N||(N=new MutationObserver(function(v){for(let f of v)(f.type==="childList"&&f.addedNodes.length>0||f.type==="attributes"&&f.attributeName==="class")&&j()}),N.observe(document.body,{childList:!0,attributes:!0,subtree:!0,attributeFilter:["class"]}))});document.addEventListener("DOMContentLoaded",j);})(); diff --git a/build/index.min.js.gz b/build/index.min.js.gz index eb16997f062369e4ce9fd68aee65bd42cdd1d7f5..3971411e54e317e178334a62e68e2c91fe210d58 100644 GIT binary patch literal 1269 zcmV|)gMF-2$kwG&+*GJ%@eIh9EB);NodYP zKk}nd80qLkJeo(N$cOl>%x5Ei6$i@_fCQ_0P%Z~)JWO7q$cNp?md(d_K8?b@=4(u*Gddo`<0zhz5sCJZ9?k8!_EhA>W3R76 zU$B8S>^mKMnt=Jk7h)|f7IeY)Vh4rR(_JaE!Gvx^CX;UAs^2Y~4bdGu9DUVInfCvN zV|}Jh1-DYBx4ASJ#ZzdTlJ6N~i<5o9CxQ5>V7Vw(W*vy}n4Fg0#c+s=P{iDRTGMTF zUJyc^v^7t`HzccSZ1`-)WRd1oCNwsL%uCk5z{RvtF^MwzqcqUauN@{B*;DTCxkGzI zhC?S6Mb^p=PNl^Sl**=^xNx~wyq!GYS4oJYguqK>Fc#FnG!sxD&)6z;<482ZXPh@R zXvUF~Lf_CW{m3hJQ_8~S8ptKCPFW)7o7yn(mS16%${V=`z%|ptTpEaBQ5k`e%n;oI zbUjmcfHe3tl<2sC8iok~zXPz3HZ^X;sl*)*Ecg7hQVLE3cj+A30zF6L?bxYo`lH!u zx31!@sMNb4eHKIJ4GxOW)T#1;c~G92%iHkAlY!8Bb)xO2Y1JpzM?=un6Qj_OKtom= znD-CiJB=7+dt*hq<=QRJ!vf5K{IzQ$;mNSMU)Ig*7m zGRYBmBGWUj)?XQRkd}p!MI{c7-VZ2xo|`AC2j{3RnnHgGRmFcsRq=mOHC)r=@lwF% zlZE)a1Ye62%xTlZsf*3fP3#&;pNS1Nd$GCOI(zH}?7ueLHI})E!-AHyig_KJa{ya* zXg+<}75x{(;aHgN&s8qm`XLp)A^5??YHUm{XM>RvAnBHVukM)S|}Jo z_;_k}?B>DJBDy1Z$xOW!ju&g0XVxbg4wp6vkzJQ?IklJhY;u2pI-GRC=;m~{beMM} zv+V$neHdrgtZah8M;sPqR@42_>Gauzo{ZX+t`(ImYpUD0E f{@oj(o0XLbWQ6Dq2@V8aIN$sY$A!hqmJ9#@a58t` literal 1241 zcmV;~1Sb0*iwFP!000006UA0rZ`(E$e&4TfS=1qIigLE0*zC!!(Pd9-I-m~&CTW8# z(Ka((9Fj_{Ir{HAq$FEuofOT(rUyYhJlF3#JQT*nn;+I?9&1tLgDXr9Dc6I&mtitH zinCT6drK*!imhdl;rFW>9&7eDuN3|$@}&4k*jl8TOPqRh_s=4CndVC4ln|ChJ0ne* zN=3}^w}g$*t)`Pf-aOWvz{ai;G2T*mqHO^Ci5|X3A z+8ErCp5_Cq4w5w(QGk*`O@?h_x_r$4<){9aU+cea;PzeYN6tS>=Z}f=W8lzmOq{^) z$p-AzOBy(sT%f>(-N4Z1V!W6Je&6y9Cet|`55jQ}PRWP_hd_-MMz7ThoN(;)ZRjgD zFpgboW3&mlufG!O$Y4R2-htl%(Q0~Eh-5IK8BaviEiC)p!usHyVttHNH8dT*gkyDv zr`$7Argo{&7==?fHidU!j4e<8xi^{dpK_M+e51EBJ|2_P(zzTCaqjcbGq2WldpIu% zp;p?urw|*8l@-?Be9uH4r)9zw)`Tny*1+KLX=9=zsnzd7!-0NdF~P`a+0S!I2SkQL zE9H68%4%!U;s!=VbDTVGYfrp(@<3cEAddnPFQmqpQw`IM13`{9EOq0EH^LX5*Kp8` zBP%uMMyzqdZVHjxQq7@nYHDcg_(M%sZ~&|;x{namcEg&49e1W*+_;nyw4vYV0$Lfp zMB}m)$=F(z{fTNEw9&$j3+h~we)B=XP5RQC%M)QU{Q%XuK^5pa2GfvW4`JHw>(;}> zglSr9^~4anb_UgEz%Q_5e<@w1yyFoH z7MmO&Y6=CJ4FVrgl3W>(e-%pe97sf2Q7Ud-oTfNAw1Ip6uWwXQn-ii(HGmsJ1MwW`0P;&Ccq^GPB;rQo?Z!GzU4oVwgJEkk>d)S291vzME_ zXV;J2UH$(AdjYL&#(qusGEmG|%Z`bbRoag}nre%OwY6p^zkRRuV% zqf~L!FnjIg{Nuo$ALwPJ9FaRW_Py0v>PQ|X6{wz~2(>dsHWt^UhF`M!E|P=Itob!P zbMhZ^+drn8`+K~xxx6cNWQ6Zmic1(m_^7o%p5{Sj5Zx1;F a[1] - b[1]).filter(e => e[1] !== undefined).map(e => e[0]); + let uuid; + + const __entry = _entry.join(',') + + if (_entry.includes('query,')) { + uuid = generateUUID('cijih'); + element.setAttribute('id', uuid); + } + if (_entry.join(',') === 'events,query,classes') { const events = split[entry.events].split(','); let query = split[entry.query].replaceAll(/current\s*,?/g, '#' + uuid + ','); From ce01505fcfb9de9274f8d2f41a3a66f8256ede67 Mon Sep 17 00:00:00 2001 From: Ulysse ARNAUD Date: Mon, 3 Mar 2025 21:13:14 +0100 Subject: [PATCH 4/9] 0.3.12 (updated readme and package.json --- README.md | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 33992ef..540861c 100644 --- a/README.md +++ b/README.md @@ -111,7 +111,7 @@ __Older browsers__ 1. Import `main.js` in your HTML file ```html - + ``` 2. Add one line of CSS to hide the page while building (and permits to hide elements with hidden attribute) diff --git a/package.json b/package.json index 88274dc..08e75fe 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ulyssear/css-in-js-in-html", - "version": "0.3.11", + "version": "0.3.12", "description": "CSS-in-JS-in-HTML is a library that allows you to use CSS-in-JS with HTML only.", "main": "build/index.js", "scripts": { From 30e08d70c1621bb4cf17f6a4da303127bf568029 Mon Sep 17 00:00:00 2001 From: Ulysse ARNAUD Date: Mon, 3 Mar 2025 21:23:31 +0100 Subject: [PATCH 5/9] 0.3.13 --- README.md | 2 +- build/index.min.js | 2 +- build/index.min.js.gz | Bin 1269 -> 1263 bytes index.js | 2 +- package.json | 2 +- 5 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 540861c..85450ed 100644 --- a/README.md +++ b/README.md @@ -111,7 +111,7 @@ __Older browsers__ 1. Import `main.js` in your HTML file ```html - + ``` 2. Add one line of CSS to hide the page while building (and permits to hide elements with hidden attribute) diff --git a/build/index.min.js b/build/index.min.js index 2ecacf6..1245227 100644 --- a/build/index.min.js +++ b/build/index.min.js @@ -1 +1 @@ -(()=>{function j(){let v=f();function f(){let c=Array.from(Object.keys(window).filter(l=>/^on/.test(l)).map(l=>l.slice(2)));return c.push("hover"),c}function E(c=""){return(c?c+"-":"")+"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(l){let i=Math.random()*16|0;return(l==="x"?i:i&3|8).toString(16)})}function L(){let c=document.querySelectorAll('[class*="["]'),l=[/\/\*[\s\S]*?\*\//g,/\/\/.*/g];for(let s of c){let A=s.className.matchAll(l[0]);for(let d of A)s.className=s.className.replace(d[0],"").trim();let b=s.className.matchAll(l[1]);for(let d of b)s.className=s.className.replace(d[0],"").trim()}let i=[/([a-zA-Z0-9\-,]+)-\[([a-zA-Z0-9 .%#,\-()'"\/]+)\]/g,/((?:\[[a-zA-Z0-9\-@():>,+ ]+\]:)*)\{\s*?((?:[a-zA-Z\-]+-\[[a-zA-Z0-9,%. \-()/ ]+\]\s*?)+)\}/g];for(let s of c){let A=s.className.matchAll(i[1]),b={events:void 0,media:void 0,query:void 0,classes:void 0};for(let y of A){s.className=s.className.replace(y[0],"").trim();let n=y[0].split("]:"),o={...b};for(let e=0;ev.includes(t))?o.events=e:n[e].startsWith("@media(")?o.media=e:n[e].startsWith("{")&&n[e].endsWith("}")?o.classes=e:o.query=e;let u=Object.entries(o).sort((e,t)=>e[1]-t[1]).filter(e=>e[1]!==void 0).map(e=>e[0]),p,W=u.join(",");if(u.includes("query,")&&(p=E("cijih"),s.setAttribute("id",p)),u.join(",")==="events,query,classes"){let e=n[o.events].split(","),t=n[o.query].replaceAll(/current\s*,?/g,"#"+p+","),m=Array.from(n[o.classes].slice(1,-1).matchAll(i[0])).map(r=>r.slice(1));t.startsWith(">")&&(t="#"+p+t),t.endsWith(",")&&(t=t.slice(0,-1));let g=document.querySelectorAll(t);s.removeAttribute("id");for(let r of g)for(let h of e)h==="hover"?(r._style=Object.assign({},r.style),r.addEventListener("mouseover",function(){for(let[a,x]of m)r.style.setProperty(a,x)}),r.addEventListener("mouseout",function(){for(let[a,x]of m)r.style.setProperty(a,r._style[a]??"initial")})):r.addEventListener(h,function(){for(let[a,x]of m)r.style.setProperty(a,x)});continue}if(u.join(",")==="query,classes"){let e=E("cijih");s.setAttribute("id",e);let t=n[o.query].replaceAll(/current\s*,?/g,"#"+e+","),m=Array.from(n[o.classes].slice(1,-1).matchAll(i[0])).map(r=>r.slice(1));t.startsWith(">")&&(t="#"+e+t),t.endsWith(",")&&(t=t.slice(0,-1));let g=document.querySelectorAll(t);s.removeAttribute("id");for(let r of g)for(let[h,a]of m)r.style.setProperty(h,a);continue}if(u.join(",")==="classes"){let e=Array.from(n[o.classes].slice(1,-1).matchAll(i[0])).map(t=>t.slice(1));for(let[t,m]of e)s.style.setProperty(t,m);continue}}let d=s.className.matchAll(i[0]);for(let y of d){let[n,o,u]=y;s.style.setProperty(o,u),s.className=s.className.replace(n,"").trim()}}document.documentElement.setAttribute("aria-busy","false");let q=new Event("css-in-js-in-html-ready");document.dispatchEvent(q)}L()}var N;window.addEventListener("css-in-js-in-html-ready",function(){N||(N=new MutationObserver(function(v){for(let f of v)(f.type==="childList"&&f.addedNodes.length>0||f.type==="attributes"&&f.attributeName==="class")&&j()}),N.observe(document.body,{childList:!0,attributes:!0,subtree:!0,attributeFilter:["class"]}))});document.addEventListener("DOMContentLoaded",j);})(); +(()=>{function j(){let v=m();function m(){let c=Array.from(Object.keys(window).filter(l=>/^on/.test(l)).map(l=>l.slice(2)));return c.push("hover"),c}function E(c=""){return(c?c+"-":"")+"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(l){let i=Math.random()*16|0;return(l==="x"?i:i&3|8).toString(16)})}function L(){let c=document.querySelectorAll('[class*="["]'),l=[/\/\*[\s\S]*?\*\//g,/\/\/.*/g];for(let s of c){let A=s.className.matchAll(l[0]);for(let d of A)s.className=s.className.replace(d[0],"").trim();let b=s.className.matchAll(l[1]);for(let d of b)s.className=s.className.replace(d[0],"").trim()}let i=[/([a-zA-Z0-9\-,]+)-\[([a-zA-Z0-9 .%#,\-()'"\/]+)\]/g,/((?:\[[a-zA-Z0-9\-@():>,+ ]+\]:)*)\{\s*?((?:[a-zA-Z\-]+-\[[a-zA-Z0-9,%. \-()/ ]+\]\s*?)+)\}/g];for(let s of c){let A=s.className.matchAll(i[1]),b={events:void 0,media:void 0,query:void 0,classes:void 0};for(let y of A){s.className=s.className.replace(y[0],"").trim();let n=y[0].split("]:"),o={...b};for(let e=0;ev.includes(t))?o.events=e:n[e].startsWith("@media(")?o.media=e:n[e].startsWith("{")&&n[e].endsWith("}")?o.classes=e:o.query=e;let f=Object.entries(o).sort((e,t)=>e[1]-t[1]).filter(e=>e[1]!==void 0).map(e=>e[0]),p;if(f.join(",").includes("query,")&&(p=E("cijih"),s.setAttribute("id",p)),f.join(",")==="events,query,classes"){let e=n[o.events].split(","),t=n[o.query].replaceAll(/current\s*,?/g,"#"+p+","),u=Array.from(n[o.classes].slice(1,-1).matchAll(i[0])).map(r=>r.slice(1));t.startsWith(">")&&(t="#"+p+t),t.endsWith(",")&&(t=t.slice(0,-1));let g=document.querySelectorAll(t);s.removeAttribute("id");for(let r of g)for(let h of e)h==="hover"?(r._style=Object.assign({},r.style),r.addEventListener("mouseover",function(){for(let[a,x]of u)r.style.setProperty(a,x)}),r.addEventListener("mouseout",function(){for(let[a,x]of u)r.style.setProperty(a,r._style[a]??"initial")})):r.addEventListener(h,function(){for(let[a,x]of u)r.style.setProperty(a,x)});continue}if(f.join(",")==="query,classes"){let e=E("cijih");s.setAttribute("id",e);let t=n[o.query].replaceAll(/current\s*,?/g,"#"+e+","),u=Array.from(n[o.classes].slice(1,-1).matchAll(i[0])).map(r=>r.slice(1));t.startsWith(">")&&(t="#"+e+t),t.endsWith(",")&&(t=t.slice(0,-1));let g=document.querySelectorAll(t);s.removeAttribute("id");for(let r of g)for(let[h,a]of u)r.style.setProperty(h,a);continue}if(f.join(",")==="classes"){let e=Array.from(n[o.classes].slice(1,-1).matchAll(i[0])).map(t=>t.slice(1));for(let[t,u]of e)s.style.setProperty(t,u);continue}}let d=s.className.matchAll(i[0]);for(let y of d){let[n,o,f]=y;s.style.setProperty(o,f),s.className=s.className.replace(n,"").trim()}}document.documentElement.setAttribute("aria-busy","false");let q=new Event("css-in-js-in-html-ready");document.dispatchEvent(q)}L()}var N;window.addEventListener("css-in-js-in-html-ready",function(){N||(N=new MutationObserver(function(v){for(let m of v)(m.type==="childList"&&m.addedNodes.length>0||m.type==="attributes"&&m.attributeName==="class")&&j()}),N.observe(document.body,{childList:!0,attributes:!0,subtree:!0,attributeFilter:["class"]}))});document.addEventListener("DOMContentLoaded",j);})(); diff --git a/build/index.min.js.gz b/build/index.min.js.gz index 3971411e54e317e178334a62e68e2c91fe210d58..d80dd5aa9d17db4c24a365d95451e786ee067325 100644 GIT binary patch literal 1263 zcmVY^91VzFFRh#IQd_rSV6Zr^QFYRx&d};f&Ay-;3O5MreaGLfAImS!%{~ zCKG|bCWOqCFr~@|3EP!=gVCng3xxZ9E&oN$E5q2a{IA{iqOO@TB<_wDDoQ(~9JV9*cltH@u|PBl2?B9i=lY&J~A;6Fq;x_I+2X&nQ9IY;+sA*XWq&BJ$u znc~(cnXmE18&Z>#o9~YBq(xG0MQ+%KQmE=yWPnhiF0%~34w5X^dc;wHqSu6GJn%z5 z90j2cZ==y79ECpkXK6kg`Ri!5Dga2(st3htkTe!9xn@q!b-Wb-s!29hc@|6}aui6d zz$NK%K9cGnNkNDLlni3B*|ws~r}STZs(<;p`s)Vnz{f%C{dMX6Hu1g>JsORP7Y04r zfW3N2Ll2YJDD>epv}yA(UQENFFZmXe>70%S(Kw8zWJJP4s7DLS*K&nkH1_&3^c5Re z#lDlV+yvCupNX}!SkNUuh&?1)PxpmP2NSv#sf@dg%YL_UIz-1-f*%-T%aeY=Co}Ow&N7j&&1NRXV{+Ph7sDaW0}*k%w5r?YydZ=+ zYO9`tZ3tFX*zozD$vnx*RA_7nSrn{+fs1J)Vq#_VuhKw6zjc^kWVzh$Ii>?5!=a;! zJZ)*U6KQb+p`vLgE?n#@-cBB{t0eeQfa8TS7z=7(nh8jdXKa?baU>ez3(lJyG~>uo zp>ODJCRcdH?h2VV!5$+-&Mvhs;vK)jD3Nz^17K^Wg}F3fe_0xVkxUWY0c<@jc6c<{ zH099M0cxsC0Pr1neWa;z2TmmFYQWZ=pOi`gH`Fa%Kue&PXuKOck+MIQt#oTD>Jm!5 z3(~J(h`PZ*@wqx>eP$k|X71uPys>1!wO)>BduUqmiM7!b=lYp3Xvj=MR9l$!kKsFw z7iIfmO}g#IZUxy`Jewc@p{Aw6H4r&6DtD|OK%`g2NE{AZ;q{;yIEHZ*=Z6>#`$B0f#Q zm*NC7+VpVhd^5C+TqEf-zQJM7H+NH~Pu+g~mxjB-Qs;4y(}J!dUd_%KfFnCJpTFqx z{%fH=CZ_wj%7oiLF2`8O*jtvm0vuOyrUhy;`+?`;FifUlh|?@JR~;>}VE1w#lQx%S6y z9&9b5dxE#jR6F77Vk5KE+C;jEyP_9CB89v)82aR-cUxVx>xyel%>4)D;2 zadyp$#u@;ZgM=-zY9=88P?x&mgKSH@# ZS`kA;h~AM|P2hF&)!%8r1qzZ3002E(XHWnD literal 1269 zcmV|)gMF-2$kwG&+*GJ%@eIh9EB);NodYP zKk}nd80qLkJeo(N$cOl>%x5Ei6$i@_fCQ_0P%Z~)JWO7q$cNp?md(d_K8?b@=4(u*Gddo`<0zhz5sCJZ9?k8!_EhA>W3R76 zU$B8S>^mKMnt=Jk7h)|f7IeY)Vh4rR(_JaE!Gvx^CX;UAs^2Y~4bdGu9DUVInfCvN zV|}Jh1-DYBx4ASJ#ZzdTlJ6N~i<5o9CxQ5>V7Vw(W*vy}n4Fg0#c+s=P{iDRTGMTF zUJyc^v^7t`HzccSZ1`-)WRd1oCNwsL%uCk5z{RvtF^MwzqcqUauN@{B*;DTCxkGzI zhC?S6Mb^p=PNl^Sl**=^xNx~wyq!GYS4oJYguqK>Fc#FnG!sxD&)6z;<482ZXPh@R zXvUF~Lf_CW{m3hJQ_8~S8ptKCPFW)7o7yn(mS16%${V=`z%|ptTpEaBQ5k`e%n;oI zbUjmcfHe3tl<2sC8iok~zXPz3HZ^X;sl*)*Ecg7hQVLE3cj+A30zF6L?bxYo`lH!u zx31!@sMNb4eHKIJ4GxOW)T#1;c~G92%iHkAlY!8Bb)xO2Y1JpzM?=un6Qj_OKtom= znD-CiJB=7+dt*hq<=QRJ!vf5K{IzQ$;mNSMU)Ig*7m zGRYBmBGWUj)?XQRkd}p!MI{c7-VZ2xo|`AC2j{3RnnHgGRmFcsRq=mOHC)r=@lwF% zlZE)a1Ye62%xTlZsf*3fP3#&;pNS1Nd$GCOI(zH}?7ueLHI})E!-AHyig_KJa{ya* zXg+<}75x{(;aHgN&s8qm`XLp)A^5??YHUm{XM>RvAnBHVukM)S|}Jo z_;_k}?B>DJBDy1Z$xOW!ju&g0XVxbg4wp6vkzJQ?IklJhY;u2pI-GRC=;m~{beMM} zv+V$neHdrgtZah8M;sPqR@42_>Gauzo{ZX+t`(ImYpUD0E f{@oj(o0XLbWQ6Dq2@V8aIN$sY$A!hqmJ9#@a58t` diff --git a/index.js b/index.js index d28dab2..26d75d5 100644 --- a/index.js +++ b/index.js @@ -70,7 +70,7 @@ function init() { const __entry = _entry.join(',') - if (_entry.includes('query,')) { + if (__entry.includes('query,')) { uuid = generateUUID('cijih'); element.setAttribute('id', uuid); } diff --git a/package.json b/package.json index 08e75fe..a97cd79 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ulyssear/css-in-js-in-html", - "version": "0.3.12", + "version": "0.3.13", "description": "CSS-in-JS-in-HTML is a library that allows you to use CSS-in-JS with HTML only.", "main": "build/index.js", "scripts": { From 141512551b338053675ddd5f431ce1caeaafc55d Mon Sep 17 00:00:00 2001 From: Ulysse ARNAUD Date: Thu, 1 May 2025 15:53:01 +0200 Subject: [PATCH 6/9] Updated to 0.4.0 --- .github/workflows/deploy-image.yml | 2 + README.md | 83 +++--------- build/index.js | 201 +++++++++++++++++++++++++++ build/index.min.js | 2 +- build/index.min.js.gz | Bin 1263 -> 1252 bytes index.js | 188 ------------------------- package.json | 4 +- src/index.js | 211 +++++++++++++++++++++++++++++ 8 files changed, 438 insertions(+), 253 deletions(-) create mode 100644 build/index.js delete mode 100644 index.js create mode 100644 src/index.js diff --git a/.github/workflows/deploy-image.yml b/.github/workflows/deploy-image.yml index 94ba56e..a79c48d 100644 --- a/.github/workflows/deploy-image.yml +++ b/.github/workflows/deploy-image.yml @@ -39,6 +39,7 @@ jobs: commit_author: github-actions file_pattern: | ./.gitignore + build/index.js build/index.min.js build/index.min.js.gz skip_dirty_check: true @@ -61,6 +62,7 @@ jobs: uses: softprops/action-gh-release@v1 with: files: | + build/index.js build/index.min.js build/index.min.js.gz tag_name: ${{ steps.package-version.outputs.current-version }} diff --git a/README.md b/README.md index 85450ed..bcdae78 100644 --- a/README.md +++ b/README.md @@ -19,11 +19,6 @@

CSS-in-JS without CSS and JS
- Explore the docs » -
-
- View Demo - · Report Bug · Request Feature @@ -45,12 +40,10 @@

  • Getting Started
    • -
  • Usage
    • -
  • Roadmap
  • Contributing
  • License
  • Contact
    • @@ -84,74 +77,40 @@ CSS-in-JS-in-HTML is a JavaScript library which permits you to apply CSS propert ## Getting Started -### Prerequisites - -> ⚠️ The following prerequisites were tested with the version 0.1.6 of the library and not the current version. However, the compatibility should be the same. - -The followed prerequisites are the minimum requirements to use the library. The library may work with older browsers with the polyfills but it's not guaranteed (and recommended). +### Compatible browsers -__Modern browers__ - - Chrome 9+ - - Edge 12+ - - Firefox 6+ - - Safari 5.1+ - - Opera 12.1+ - -__Browsers for mobile__ - - IOS Safari 5.1+ - - UC Browser for Android 11 - - Firefox for Android 49 - -__Older browsers__ - - IE10+ +* Chrome : 73+ +* Firefox : 67+ +* Safari : 13+ +* Edge (Chromium) : 79+ +* Opera : 60+ +* Samsung Internet : 11.1+ +* iOS Safari : 13+ ### Installation #### From CDN 1. Import `main.js` in your HTML file - ```html - - ``` +```html + +``` 2. Add one line of CSS to hide the page while building (and permits to hide elements with hidden attribute) - ```css - html[aria-busy="true"], [hidden] { display: none!important; } - ``` +```css +[hidden]:not([hidden="false"]) { display: none!important; } +``` #### Manual installation 1. Clone the repo - ```sh - git clone https://github.com/ulyssear/css-in-js-in-html.git - ``` +```sh +git clone https://github.com/ulyssear/css-in-js-in-html.git +``` 2. Import `main.js` in your HTML file - ```html - - ``` - -

    (back to top)

    - - - -## Usage - - - -

    (back to top)

    - - - - -## Roadmap - - -See the [open issues](https://github.com/ulyssear/css-in-js-in-html/issues) for a full list of proposed features (and known issues). +```html + +```

    (back to top)

    diff --git a/build/index.js b/build/index.js new file mode 100644 index 0000000..01357f1 --- /dev/null +++ b/build/index.js @@ -0,0 +1,201 @@ +const EVENTS = Object.keys(window).filter(e=>e.substring(0,2)=='on').map(e=>e.substring(2).toLowerCase()); + +const REGEXES_COMMENTS = [ + /\/\*[\s\S]*?\*\//g, + /\/\/.*/g +]; +const REGEXES = [ + /([a-zA-Z0-9\-,]+)-\[([a-zA-Z0-9 .%#,\-()'"\/:?!]+)\]/g, + /((?:\[[a-zA-Z0-9\-@():>,+ ]+\]:)*)\{\s*?((?:[a-zA-Z\-]+-\[[a-zA-Z0-9,%. \-()/ :?!'"#]+\]\s*?)+)\}/g +]; + +function getIndexChildren(element,index=0) { + if ('HTML' !== element.tagName) { + return getIndexChildren(element.parentElement,index+1); + } + return index; +} + +function joinArrays(...arrays) { + const newArray = []; + const highestLength = Math.max(...arrays.map(arr => arr.length)); + for (let i = 0; i < highestLength; i++) { + const newElement = []; + for (const arr of arrays) { + newElement.push(arr[i] || null); + } + newArray.push(newElement); + } + return newArray; +} + +function isEvents(string) { + const events = string.split(',').map(e => e.trim().toLowerCase()); + return events.every(e => EVENTS.includes(e)); +} + +function getCurrentDOMPath(element) { + let dompath = ''; + let currentElement = element; + while (currentElement && currentElement.tagName !== 'HTML') { + const tagName = currentElement.tagName.toLowerCase(); + const siblingsWithSameTag = Array.from(currentElement.parentNode.children).filter(child => child.tagName === currentElement.tagName); + const index = siblingsWithSameTag.indexOf(currentElement) + 1; + dompath = `>${tagName}${index > 1 ? `:nth-of-type(${index})` : ''}` + dompath; + currentElement = currentElement.parentNode; + if (currentElement.hasAttribute('data-cijih-current-tag')) { + dompath = `${currentElement.getAttribute('data-cijih-current-tag')}` + dompath; + return dompath; + } + } + if (currentElement.tagName === 'HTML') { + return `html`; + } + return xpath.substring(1); +} + +function getQueries(string) { + const queries = []; + let currentQuery = ''; + let indexBracket = 0; + for (let i = 0; i < string.length; i++) { + const char = string[i]; + if (char === '[') { + indexBracket++; + currentQuery += char; + } else if (char === ']') { + indexBracket--; + currentQuery += char; + } else if (char === ',' && indexBracket === 0) { + queries.push(currentQuery.trim()); + currentQuery = ''; + } else { + currentQuery += char; + } + } + if (currentQuery) { + queries.push(currentQuery.trim()); + } + return queries; +} + +function getGroupsBrackets(string,result={ + media: '', + events: '', + query: '' +}) { + const groups = [] + let j = 0; + for (let i = 0; i < string.length; i++) { + const char = string[i]; + if (char === '[') { + j = i + 1; + while (j < string.length && string[j] !== ']') { + j++; + } + groups.push(string.slice(i, j + 1)); + i = j; + } + } + for (let i = 0; i < groups.length; i++) { + const group = groups[i].substring(1, groups[i].length - 1); + if (group.startsWith('@media(')) { + result.media = group + } else if (isEvents(group)) { + result.events = group + } else { + result.query = group + } + } + return result; +} + +function getStylesFromClasses(classes) { + const styles = {}; + const matches = classes.matchAll(REGEXES[0]); + for (const match of matches) { + const [_, property, value] = match; + styles[property] = value; + } + return styles; +} + +window.addEventListener('DOMContentLoaded', function () { + let elements = document.querySelectorAll('[class]'); + const indexes = Array.from(elements).map(e => getIndexChildren(e)); + elements = Array.from(elements).map((e, i) => [e, indexes[i]]); + elements = elements.sort((a, b) => a[1] - b[1]); + for (let i = 0; i < elements.length; i++) { + const element = elements[i][0]; + + for (const regex of REGEXES_COMMENTS) { + element.className = element.className.replace(regex, ''); + } + + const matchesSecondCase = element.className.matchAll(REGEXES[1]); + + for (const match of matchesSecondCase) { + const [_, groupsBrackets, classes] = match; + const groups = getGroupsBrackets(groupsBrackets); + const queries = getQueries(groups.query); + for (let i = 0; i < queries.length; i++) { + if (queries[i].startsWith('>')) { + const currentDOMPath = getCurrentDOMPath(element); + element.dataset.cijihCurrentTag = currentDOMPath; + queries[i] = currentDOMPath+queries[i]; + } + if ('current'===queries[i]) { + const currentDOMPath = getCurrentDOMPath(element); + element.dataset.cijihCurrentTag = currentDOMPath; + queries[i] = currentDOMPath; + } + } + if (groups.events) { + const events = groups.events.split(',').map(e => e.trim().toLowerCase()); + for (const event of events) { + element.addEventListener(event, function () { + if (queries.length > 0) { + for (const query of queries) { + const elements = element.querySelectorAll(query); + const styles = getStylesFromClasses(classes); + for (const [property, value] of Object.entries(styles)) { + elements.forEach(el => el.style.setProperty(property, value)); + } + } + } + else { + const styles = getStylesFromClasses(classes); + for (const [property, value] of Object.entries(styles)) { + element.style.setProperty(property, value); + } + } + }); + } + } + for (const query of queries) { + const elements = document.querySelectorAll(query); + const styles = getStylesFromClasses(classes); + for (const [property, value] of Object.entries(styles)) { + elements.forEach(el => el.style.setProperty(property, value)); + } + } + const length = match[0].length; + const spaces = ' '.repeat(length); + element.className = element.className.replace(match[0], spaces); + } + + const matchesFirstCase = element.className.matchAll(REGEXES[0]); + const styles = getStylesFromClasses(element.className); + for (const [property, value] of Object.entries(styles)) { + element.style.setProperty(property, value); + } + for (const match of matchesFirstCase) { + const length = match[0].length; + const spaces = ' '.repeat(length); + element.className = element.className.replace(match[0], spaces); + } + element.className = element.className.trim(); + } + this.document.documentElement.removeAttribute('hidden'); + const elementsWithClasses = document.querySelector('[class]'); +}); \ No newline at end of file diff --git a/build/index.min.js b/build/index.min.js index 1245227..5459e0e 100644 --- a/build/index.min.js +++ b/build/index.min.js @@ -1 +1 @@ -(()=>{function j(){let v=m();function m(){let c=Array.from(Object.keys(window).filter(l=>/^on/.test(l)).map(l=>l.slice(2)));return c.push("hover"),c}function E(c=""){return(c?c+"-":"")+"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(l){let i=Math.random()*16|0;return(l==="x"?i:i&3|8).toString(16)})}function L(){let c=document.querySelectorAll('[class*="["]'),l=[/\/\*[\s\S]*?\*\//g,/\/\/.*/g];for(let s of c){let A=s.className.matchAll(l[0]);for(let d of A)s.className=s.className.replace(d[0],"").trim();let b=s.className.matchAll(l[1]);for(let d of b)s.className=s.className.replace(d[0],"").trim()}let i=[/([a-zA-Z0-9\-,]+)-\[([a-zA-Z0-9 .%#,\-()'"\/]+)\]/g,/((?:\[[a-zA-Z0-9\-@():>,+ ]+\]:)*)\{\s*?((?:[a-zA-Z\-]+-\[[a-zA-Z0-9,%. \-()/ ]+\]\s*?)+)\}/g];for(let s of c){let A=s.className.matchAll(i[1]),b={events:void 0,media:void 0,query:void 0,classes:void 0};for(let y of A){s.className=s.className.replace(y[0],"").trim();let n=y[0].split("]:"),o={...b};for(let e=0;ev.includes(t))?o.events=e:n[e].startsWith("@media(")?o.media=e:n[e].startsWith("{")&&n[e].endsWith("}")?o.classes=e:o.query=e;let f=Object.entries(o).sort((e,t)=>e[1]-t[1]).filter(e=>e[1]!==void 0).map(e=>e[0]),p;if(f.join(",").includes("query,")&&(p=E("cijih"),s.setAttribute("id",p)),f.join(",")==="events,query,classes"){let e=n[o.events].split(","),t=n[o.query].replaceAll(/current\s*,?/g,"#"+p+","),u=Array.from(n[o.classes].slice(1,-1).matchAll(i[0])).map(r=>r.slice(1));t.startsWith(">")&&(t="#"+p+t),t.endsWith(",")&&(t=t.slice(0,-1));let g=document.querySelectorAll(t);s.removeAttribute("id");for(let r of g)for(let h of e)h==="hover"?(r._style=Object.assign({},r.style),r.addEventListener("mouseover",function(){for(let[a,x]of u)r.style.setProperty(a,x)}),r.addEventListener("mouseout",function(){for(let[a,x]of u)r.style.setProperty(a,r._style[a]??"initial")})):r.addEventListener(h,function(){for(let[a,x]of u)r.style.setProperty(a,x)});continue}if(f.join(",")==="query,classes"){let e=E("cijih");s.setAttribute("id",e);let t=n[o.query].replaceAll(/current\s*,?/g,"#"+e+","),u=Array.from(n[o.classes].slice(1,-1).matchAll(i[0])).map(r=>r.slice(1));t.startsWith(">")&&(t="#"+e+t),t.endsWith(",")&&(t=t.slice(0,-1));let g=document.querySelectorAll(t);s.removeAttribute("id");for(let r of g)for(let[h,a]of u)r.style.setProperty(h,a);continue}if(f.join(",")==="classes"){let e=Array.from(n[o.classes].slice(1,-1).matchAll(i[0])).map(t=>t.slice(1));for(let[t,u]of e)s.style.setProperty(t,u);continue}}let d=s.className.matchAll(i[0]);for(let y of d){let[n,o,f]=y;s.style.setProperty(o,f),s.className=s.className.replace(n,"").trim()}}document.documentElement.setAttribute("aria-busy","false");let q=new Event("css-in-js-in-html-ready");document.dispatchEvent(q)}L()}var N;window.addEventListener("css-in-js-in-html-ready",function(){N||(N=new MutationObserver(function(v){for(let m of v)(m.type==="childList"&&m.addedNodes.length>0||m.type==="attributes"&&m.attributeName==="class")&&j()}),N.observe(document.body,{childList:!0,attributes:!0,subtree:!0,attributeFilter:["class"]}))});document.addEventListener("DOMContentLoaded",j);})(); +(()=>{var L=Object.keys(window).filter(s=>s.substring(0,2)=="on").map(s=>s.substring(2).toLowerCase()),O=[/\/\*[\s\S]*?\*\//g,/\/\/.*/g],v=[/([a-zA-Z0-9\-,]+)-\[([a-zA-Z0-9 .%#,\-()'"\/:?!]+)\]/g,/((?:\[[a-zA-Z0-9\-@():>,+ ]+\]:)*)\{\s*?((?:[a-zA-Z\-]+-\[[a-zA-Z0-9,%. \-()/ :?!'"#]+\]\s*?)+)\}/g];function b(s,r=0){return s.tagName!=="HTML"?b(s.parentElement,r+1):r}function M(s){return s.split(",").map(t=>t.trim().toLowerCase()).every(t=>L.includes(t))}function E(s){let r="",t=s;for(;t&&t.tagName!=="HTML";){let n=t.tagName.toLowerCase(),o=Array.from(t.parentNode.children).filter(u=>u.tagName===t.tagName).indexOf(t)+1;if(r=`>${n}${o>1?`:nth-of-type(${o})`:""}`+r,t=t.parentNode,t.hasAttribute("data-cijih-current-tag"))return r=`${t.getAttribute("data-cijih-current-tag")}`+r,r}return t.tagName==="HTML"?"html":xpath.substring(1)}function T(s){let r=[],t="",n=0;for(let e=0;eb(n));s=Array.from(s).map((n,e)=>[n,r[e]]),s=s.sort((n,e)=>n[1]-e[1]);for(let n=0;n")){let c=E(e);e.dataset.cijihCurrentTag=c,i[a]=c+i[a]}if(i[a]==="current"){let c=E(e);e.dataset.cijihCurrentTag=c,i[a]=c}}if(N.events){let a=N.events.split(",").map(c=>c.trim().toLowerCase());for(let c of a)e.addEventListener(c,function(){if(i.length>0)for(let m of i){let f=e.querySelectorAll(m),h=g(d);for(let[A,j]of Object.entries(h))f.forEach(q=>q.style.setProperty(A,j))}else{let m=g(d);for(let[f,h]of Object.entries(m))e.style.setProperty(f,h)}})}for(let a of i){let c=document.querySelectorAll(a),m=g(d);for(let[f,h]of Object.entries(m))c.forEach(A=>A.style.setProperty(f,h))}let S=l[0].length,w=" ".repeat(S);e.className=e.className.replace(l[0],w)}let u=e.className.matchAll(v[0]),C=g(e.className);for(let[l,p]of Object.entries(C))e.style.setProperty(l,p);for(let l of u){let p=l[0].length,y=" ".repeat(p);e.className=e.className.replace(l[0],y)}e.className=e.className.trim()}this.document.documentElement.removeAttribute("hidden");let t=document.querySelector("[class]")});})(); diff --git a/build/index.min.js.gz b/build/index.min.js.gz index d80dd5aa9d17db4c24a365d95451e786ee067325..ae8ae80a247af953e4896f5cfa959e319c3ee9aa 100644 GIT binary patch literal 1252 zcmV)I^gV3kk2!t`YV$nDr$H!4@;_Kvi z79Yps@shZ+F+CnH6LJp{DB}JYWYfr;jA|5&rDO?b3?uR}i3fwMgxfaTBLN2lp@FgU3p zz+h3y)D}t(?vNpxP4HF=TWL8k)biyeUx^Pu$?rE8=iUrN=$dOG?O7>S@JICM1W$Fn zH*$eY&wyE%g+(6e=(H@f6sTOG=R{I*FZ9L_9WmBbJ$9 zp)?BYaA;q|8MKm;?XRA?BZ|$n<{P@uYK3eE=~88arg>3ju-jKi#lmW5g|UN03~^@S z@oE8Kj!uGNfi$}fkG8Tt+N$tmb~}|e_tnC;o3%i2R^!{L=he3(4bk^~5=(P#<`#&# ztE@m?#x3{L;(L+%X{DW*4^BOdJ6^%j(bm$Xul1qbE{l$f-}t$tKc zY%UpXoYtZG2_VR?1JgpmTPG=*fW*ta+;C_jnS5xF1sK2vwv7(@pe#~>1d-4!m^WP+*xqf&j)D^S~>p&2Z|cYwKabhHb>sK1}5_GOw(q`)bs)=w{3C5UegBnfxsSF z%R`E{wQDbESexeavPAdMB*A-bt|VJs&UX9f&qd0@^!4Xrk2rM{aUlLhsipnOa)EcOgcH0|UODBWjbZ@_ zc~NjHOmenF+1_6?C*Kp7>h_BQ{OJN7svP451(7qJ=I93te*oK?Qcz&x53SZh+YJIu zc+Ny=MB{Ju)b4`huh?B-K=#rU2;;iO`x(M}IMV;!+D|o>zx^^Y;la>Ho^3YnU-f9Y%Kjai5?_D1-lw|!1hSS%n1L0@=RkggW zpP<Y^91VzFFRh#IQd_rSV6Zr^QFYRx&d};f&Ay-;3O5MreaGLfAImS!%{~ zCKG|bCWOqCFr~@|3EP!=gVCng3xxZ9E&oN$E5q2a{IA{iqOO@TB<_wDDoQ(~9JV9*cltH@u|PBl2?B9i=lY&J~A;6Fq;x_I+2X&nQ9IY;+sA*XWq&BJ$u znc~(cnXmE18&Z>#o9~YBq(xG0MQ+%KQmE=yWPnhiF0%~34w5X^dc;wHqSu6GJn%z5 z90j2cZ==y79ECpkXK6kg`Ri!5Dga2(st3htkTe!9xn@q!b-Wb-s!29hc@|6}aui6d zz$NK%K9cGnNkNDLlni3B*|ws~r}STZs(<;p`s)Vnz{f%C{dMX6Hu1g>JsORP7Y04r zfW3N2Ll2YJDD>epv}yA(UQENFFZmXe>70%S(Kw8zWJJP4s7DLS*K&nkH1_&3^c5Re z#lDlV+yvCupNX}!SkNUuh&?1)PxpmP2NSv#sf@dg%YL_UIz-1-f*%-T%aeY=Co}Ow&N7j&&1NRXV{+Ph7sDaW0}*k%w5r?YydZ=+ zYO9`tZ3tFX*zozD$vnx*RA_7nSrn{+fs1J)Vq#_VuhKw6zjc^kWVzh$Ii>?5!=a;! zJZ)*U6KQb+p`vLgE?n#@-cBB{t0eeQfa8TS7z=7(nh8jdXKa?baU>ez3(lJyG~>uo zp>ODJCRcdH?h2VV!5$+-&Mvhs;vK)jD3Nz^17K^Wg}F3fe_0xVkxUWY0c<@jc6c<{ zH099M0cxsC0Pr1neWa;z2TmmFYQWZ=pOi`gH`Fa%Kue&PXuKOck+MIQt#oTD>Jm!5 z3(~J(h`PZ*@wqx>eP$k|X71uPys>1!wO)>BduUqmiM7!b=lYp3Xvj=MR9l$!kKsFw z7iIfmO}g#IZUxy`Jewc@p{Aw6H4r&6DtD|OK%`g2NE{AZ;q{;yIEHZ*=Z6>#`$B0f#Q zm*NC7+VpVhd^5C+TqEf-zQJM7H+NH~Pu+g~mxjB-Qs;4y(}J!dUd_%KfFnCJpTFqx z{%fH=CZ_wj%7oiLF2`8O*jtvm0vuOyrUhy;`+?`;FifUlh|?@JR~;>}VE1w#lQx%S6y z9&9b5dxE#jR6F77Vk5KE+C;jEyP_9CB89v)82aR-cUxVx>xyel%>4)D;2 zadyp$#u@;ZgM=-zY9=88P?x&mgKSH@# ZS`kA;h~AM|P2hF&)!%8r1qzZ3002E(XHWnD diff --git a/index.js b/index.js deleted file mode 100644 index 26d75d5..0000000 --- a/index.js +++ /dev/null @@ -1,188 +0,0 @@ -function init() { - const EVENTS = getAllEventsNames(); - - function getAllEventsNames() { - const events = Array.from(Object.keys(window).filter(key => /^on/.test(key)).map(e => e.slice(2))); - events.push('hover'); - return events; - } - - function generateUUID(prefix="") { - return (prefix ? prefix + "-" : "") + 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { - const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8); - return v.toString(16); - }); - } - - function main() { - const elements = document.querySelectorAll('[class*="["]'); - const regularExpressionsComments = [ - /\/\*[\s\S]*?\*\//g, - /\/\/.*/g - ]; - for (const element of elements) { - const matches = element.className.matchAll(regularExpressionsComments[0]); - for (const match of matches) { - element.className = element.className.replace(match[0], '').trim(); - } - const matches2 = element.className.matchAll(regularExpressionsComments[1]); - for (const match of matches2) { - element.className = element.className.replace(match[0], '').trim(); - } - } - const regularExpressions = [ - /([a-zA-Z0-9\-,]+)-\[([a-zA-Z0-9 .%#,\-()'"\/]+)\]/g, - /((?:\[[a-zA-Z0-9\-@():>,+ ]+\]:)*)\{\s*?((?:[a-zA-Z\-]+-\[[a-zA-Z0-9,%. \-()/ ]+\]\s*?)+)\}/g - ]; - for (const element of elements) { - const matches = element.className.matchAll(regularExpressions[1]); - const generic = { - events: undefined, - media: undefined, - query: undefined, - classes: undefined - } - for (const match of matches) { - element.className = element.className.replace(match[0], '').trim(); - - const split = match[0].split(']:'); - const entry = { ...generic }; - for (let i = 0; i < split.length; i++) { - if (i < split.length - 1) { - split[i] = split[i].trim().slice(1); - } - if (split[i].split(',').every(e => EVENTS.includes(e))) { // is events - entry.events = i - } - else if (split[i].startsWith('@media(')) { // is media - entry.media = i; - } - else if (split[i].startsWith('{') && split[i].endsWith('}')) { // is classes - entry.classes = i; - } - else { // else query - entry.query = i; - } - } - const _entry = Object.entries(entry).sort((a, b) => a[1] - b[1]).filter(e => e[1] !== undefined).map(e => e[0]); - - let uuid; - - const __entry = _entry.join(',') - - if (__entry.includes('query,')) { - uuid = generateUUID('cijih'); - element.setAttribute('id', uuid); - } - - if (_entry.join(',') === 'events,query,classes') { - const events = split[entry.events].split(','); - let query = split[entry.query].replaceAll(/current\s*,?/g, '#' + uuid + ','); - const classes = Array.from(split[entry.classes].slice(1, -1).matchAll(regularExpressions[0])).map(e => e.slice(1)); - if (query.startsWith('>')) { - query = '#' + uuid + query; - } - if (query.endsWith(',')) { - query = query.slice(0, -1); - } - const elements = document.querySelectorAll(query); - element.removeAttribute('id'); - for (const element of elements) { - for (const event of events) { - if (event === 'hover') { - element._style = Object.assign({}, element.style); - element.addEventListener('mouseover', function () { - for (const [property, value] of classes) { - element.style.setProperty(property, value); - } - }); - element.addEventListener('mouseout', function () { - for (const [property, value] of classes) { - element.style.setProperty(property, element._style[property] ?? 'initial'); - } - }); - } - else { - element.addEventListener(event, function () { - for (const [property, value] of classes) { - element.style.setProperty(property, value); - } - }); - } - } - } - - continue; - } - - if (_entry.join(',') === 'query,classes') { - const uuid = generateUUID('cijih'); - element.setAttribute('id',uuid) - let query = split[entry.query].replaceAll(/current\s*,?/g, '#' + uuid + ','); - const classes = Array.from(split[entry.classes].slice(1, -1).matchAll(regularExpressions[0])).map(e => e.slice(1)); - if (query.startsWith('>')) { - query = '#' + uuid + query; - } - if (query.endsWith(',')) { - query = query.slice(0, -1); - } - const elements = document.querySelectorAll(query); - element.removeAttribute('id'); - for (const element of elements) { - for (const [property, value] of classes) { - element.style.setProperty(property, value); - } - } - - continue; - } - - if (_entry.join(',') === 'classes') { - const classes = Array.from(split[entry.classes].slice(1, -1).matchAll(regularExpressions[0])).map(e => e.slice(1)); - for (const [property, value] of classes) { - element.style.setProperty(property, value); - } - - continue; - } - } - - const matches2 = element.className.matchAll(regularExpressions[0]); - for (const match of matches2) { - const [_, property, value] = match; - element.style.setProperty(property, value); - element.className = element.className.replace(_, '').trim(); - } - } - - document.documentElement.setAttribute('aria-busy', 'false'); - - const event = new Event('css-in-js-in-html-ready'); - document.dispatchEvent(event); - } - - main(); -} -let observer; -window.addEventListener('css-in-js-in-html-ready', function () { - if (!observer) { - observer = new MutationObserver(function (mutationsList) { - for (const mutation of mutationsList) { - if ( - (mutation.type === 'childList' && mutation.addedNodes.length > 0) || - (mutation.type === 'attributes' && mutation.attributeName === 'class') - ) { - init(); - } - } - }); - - observer.observe(document.body, { - childList: true, - attributes: true, - subtree: true, - attributeFilter: ['class'] - }); - } -}); -document.addEventListener('DOMContentLoaded', init); \ No newline at end of file diff --git a/package.json b/package.json index a97cd79..0b9c341 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,12 @@ { "name": "@ulyssear/css-in-js-in-html", - "version": "0.3.13", + "version": "0.4.0", "description": "CSS-in-JS-in-HTML is a library that allows you to use CSS-in-JS with HTML only.", "main": "build/index.js", "scripts": { "tests": "echo \"Error: no test specified\" && exit 1", "compress": "node scripts/compress.js", - "build": "esbuild index.js --bundle --outfile=build/index.min.js --minify && npm run compress" + "build": "esbuild index.js --bundle --outfile=build/index.min.js --minify && npm run compress && cp index.js build/index.js" }, "repository": { "type": "git", diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..6169f5a --- /dev/null +++ b/src/index.js @@ -0,0 +1,211 @@ +const EVENTS = Object.keys(window).filter(e=>e.substring(0,2)=='on').map(e=>e.substring(2).toLowerCase()); + +const REGEXES_COMMENTS = [ + /\/\*[\s\S]*?\*\//g, + /\/\/.*/g +]; +const REGEXES = [ + /([a-zA-Z0-9\-,]+)-\[([a-zA-Z0-9 .%#,\-()'"\/:?!]+)\]/g, + /((?:\[[a-zA-Z0-9\-@():>,+ ]+\]:)*)\{\s*?((?:[a-zA-Z\-]+-\[[a-zA-Z0-9,%. \-()/ :?!'"#]+\]\s*?)+)\}/g +]; + +function getIndexChildren(element,index=0) { + if ('HTML' !== element.tagName) { + return getIndexChildren(element.parentElement,index+1); + } + return index; +} + +function joinArrays(...arrays) { + const newArray = []; + const highestLength = Math.max(...arrays.map(arr => arr.length)); + for (let i = 0; i < highestLength; i++) { + const newElement = []; + for (const arr of arrays) { + newElement.push(arr[i] || null); + } + newArray.push(newElement); + } + return newArray; +} + +function isEvents(string) { + const events = string.split(',').map(e => e.trim().toLowerCase()); + return events.every(e => EVENTS.includes(e)); +} + +function getCurrentDOMPath(element) { + let dompath = ''; + let currentElement = element; + while (currentElement && currentElement.tagName !== 'HTML') { + const tagName = currentElement.tagName.toLowerCase(); + const siblingsWithSameTag = Array.from(currentElement.parentNode.children).filter(child => child.tagName === currentElement.tagName); + const index = siblingsWithSameTag.indexOf(currentElement) + 1; + dompath = `>${tagName}${index > 1 ? `:nth-of-type(${index})` : ''}` + dompath; + currentElement = currentElement.parentNode; + if (currentElement.hasAttribute('data-cijih-current-tag')) { + dompath = `${currentElement.getAttribute('data-cijih-current-tag')}` + dompath; + return dompath; + } + } + if (currentElement.tagName === 'HTML') { + return `html`; + } + return xpath.substring(1); +} + +function getQueries(string) { + const queries = []; + let currentQuery = ''; + let indexBracket = 0; + for (let i = 0; i < string.length; i++) { + const char = string[i]; + if (char === '[') { + indexBracket++; + currentQuery += char; + } else if (char === ']') { + indexBracket--; + currentQuery += char; + } else if (char === ',' && indexBracket === 0) { + queries.push(currentQuery.trim()); + currentQuery = ''; + } else { + currentQuery += char; + } + } + if (currentQuery) { + queries.push(currentQuery.trim()); + } + return queries; +} + +function getGroupsBrackets(string,result={ + media: '', + events: '', + query: '' +}) { + const groups = [] + let j = 0; + for (let i = 0; i < string.length; i++) { + const char = string[i]; + if (char === '[') { + j = i + 1; + while (j < string.length && string[j] !== ']') { + j++; + } + groups.push(string.slice(i, j + 1)); + i = j; + } + } + for (let i = 0; i < groups.length; i++) { + const group = groups[i].substring(1, groups[i].length - 1); + if (group.startsWith('@media(')) { + result.media = group + } else if (isEvents(group)) { + result.events = group + } else { + result.query = group + } + } + return result; +} + +function getStylesFromClasses(classes) { + const styles = {}; + const matches = classes.matchAll(REGEXES[0]); + for (const match of matches) { + const [_, property, value] = match; + styles[property] = value; + } + return styles; +} + +window.addEventListener('DOMContentLoaded', function () { + let elements = document.querySelectorAll('[class]'); + const indexes = Array.from(elements).map(e => getIndexChildren(e)); + elements = Array.from(elements).map((e, i) => [e, indexes[i]]); + elements = elements.sort((a, b) => a[1] - b[1]); + for (let i = 0; i < elements.length; i++) { + const element = elements[i][0]; + + for (const regex of REGEXES_COMMENTS) { + element.className = element.className.replace(regex, ''); + } + + const matchesSecondCase = element.className.matchAll(REGEXES[1]); + + for (const match of matchesSecondCase) { + const [_, groupsBrackets, classes] = match; + const groups = getGroupsBrackets(groupsBrackets); + const queries = getQueries(groups.query); + for (let i = 0; i < queries.length; i++) { + if (queries[i].startsWith('>')) { + const currentDOMPath = getCurrentDOMPath(element); + element.dataset.cijihCurrentTag = currentDOMPath; + queries[i] = currentDOMPath+queries[i]; + } + if ('current'===queries[i]) { + const currentDOMPath = getCurrentDOMPath(element); + element.dataset.cijihCurrentTag = currentDOMPath; + queries[i] = currentDOMPath; + } + } + if (groups.events) { + const events = groups.events.split(',').map(e => e.trim().toLowerCase()); + for (const event of events) { + element.addEventListener(event, function () { + if (queries.length > 0) { + for (const query of queries) { + const elements = element.querySelectorAll(query); + const styles = getStylesFromClasses(classes); + for (const [property, value] of Object.entries(styles)) { + elements.forEach(el => el.style.setProperty(property, value)); + } + } + } + else { + const styles = getStylesFromClasses(classes); + for (const [property, value] of Object.entries(styles)) { + element.style.setProperty(property, value); + } + } + }); + } + } + for (const query of queries) { + const elements = document.querySelectorAll(query); + const styles = getStylesFromClasses(classes); + for (const [property, value] of Object.entries(styles)) { + elements.forEach(el => el.style.setProperty(property, value)); + } + } + const length = match[0].length; + const spaces = ' '.repeat(length); + element.className = element.className.replace(match[0], spaces); + } + + const matchesFirstCase = element.className.matchAll(REGEXES[0]); + const styles = getStylesFromClasses(element.className); + for (const [property, value] of Object.entries(styles)) { + element.style.setProperty(property, value); + } + for (const match of matchesFirstCase) { + const length = match[0].length; + const spaces = ' '.repeat(length); + element.className = element.className.replace(match[0], spaces); + } + element.className = element.className.trim(); + } + this.document.documentElement.removeAttribute('hidden'); + const elementsWithClasses = document.querySelector('[class]'); + for (const element of elementsWithClasses) { + // remove all classes if the element has no classes + if (element.className === '') { + element.removeAttribute('class'); + } + } + const elementsWithData = document.querySelectorAll('[data-cijih-current-tag]'); + for (const element of elementsWithData) { + element.removeAttribute('data-cijih-current-tag'); + } +}); \ No newline at end of file From ca5f876c5492629adfa09eab4174e2ff3bc76c1e Mon Sep 17 00:00:00 2001 From: Ulysse ARNAUD Date: Thu, 1 May 2025 16:01:08 +0200 Subject: [PATCH 7/9] Fixed build pipeline --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0b9c341..7e57b8a 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "tests": "echo \"Error: no test specified\" && exit 1", "compress": "node scripts/compress.js", - "build": "esbuild index.js --bundle --outfile=build/index.min.js --minify && npm run compress && cp index.js build/index.js" + "build": "esbuild src/index.js --bundle --outfile=build/index.min.js --minify && npm run compress && cp src/index.js build/index.js" }, "repository": { "type": "git", From 83e285524c857cb639135d0ceeae30c6fdd7edd4 Mon Sep 17 00:00:00 2001 From: Ulysse ARNAUD Date: Thu, 1 May 2025 16:49:29 +0200 Subject: [PATCH 8/9] Changed main file --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7e57b8a..45ad052 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@ulyssear/css-in-js-in-html", "version": "0.4.0", "description": "CSS-in-JS-in-HTML is a library that allows you to use CSS-in-JS with HTML only.", - "main": "build/index.js", + "main": "build/index.min.js", "scripts": { "tests": "echo \"Error: no test specified\" && exit 1", "compress": "node scripts/compress.js", From a10d8752f37ddf92496e52bcad1e3417a01feff8 Mon Sep 17 00:00:00 2001 From: Ulysse ARNAUD Date: Thu, 1 May 2025 16:49:55 +0200 Subject: [PATCH 9/9] Added npmignore --- .npmignore | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 .npmignore diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..058a7c8 --- /dev/null +++ b/.npmignore @@ -0,0 +1,2 @@ +tests/ +node_modules/ \ No newline at end of file