UNPKG

@oddbird/css-toggles

Version:

Polyfill for the proposed CSS Toggles syntax

8 lines (7 loc) 8.45 kB
var j="comm",P="rule",z="decl";var te="@import";var re="@keyframes";var ne=Math.abs,N=String.fromCharCode;function q(e){return e.trim()}function W(e,t,r){return e.replace(t,r)}function oe(e,t){return e.indexOf(t)}function D(e,t){return e.charCodeAt(t)|0}function O(e,t,r){return e.slice(t,r)}function k(e){return e.length}function F(e){return e.length}function C(e,t){return t.push(e),e}var V=1,L=1,ae=0,m=0,u=0,I="";function _(e,t,r,n,o,i,l){return{value:e,root:t,parent:r,type:n,props:o,children:i,line:V,column:L,length:l,return:""}}function ie(){return u}function ce(){return u=m>0?D(I,--m):0,L--,u===10&&(L=1,V--),u}function v(){return u=m<ae?D(I,m++):0,L++,u===10&&(L=1,V++),u}function A(){return D(I,m)}function U(){return m}function H(e,t){return O(I,e,t)}function Z(e){switch(e){case 0:case 9:case 10:case 13:case 32:return 5;case 33:case 43:case 44:case 47:case 62:case 64:case 126:case 59:case 123:case 125:return 4;case 58:return 3;case 34:case 39:case 40:case 91:return 2;case 41:case 93:return 1}return 0}function se(e){return V=L=1,ae=k(I=e),m=0,[]}function le(e){return I="",e}function B(e){return q(H(m-1,J(e===91?e+2:e===40?e+1:e)))}function ue(e){for(;(u=A())&&u<33;)v();return Z(e)>2||Z(u)>3?"":" "}function fe(e,t){for(;--t&&v()&&!(u<48||u>102||u>57&&u<65||u>70&&u<97););return H(e,U()+(t<6&&A()==32&&v()==32))}function J(e){for(;v();)switch(u){case e:return m;case 34:case 39:e!==34&&e!==39&&J(u);break;case 40:e===41&&J(e);break;case 92:v();break}return m}function pe(e,t){for(;v()&&e+u!==47+10;)if(e+u===42+42&&A()===47)break;return"/*"+H(t,m-1)+"*"+N(e===47?e:v())}function ge(e){for(;!Z(A());)v();return H(e,m)}function he(e){return le(K("",null,null,null,[""],e=se(e),0,[0],e))}function K(e,t,r,n,o,i,l,a,f){for(var b=0,p=0,c=l,R=0,S=0,h=0,g=1,T=1,x=1,d=0,E="",$=o,w=i,y=n,s=E;T;)switch(h=d,d=v()){case 40:if(h!=108&&s.charCodeAt(c-1)==58){oe(s+=W(B(d),"&","&\f"),"&\f")!=-1&&(x=-1);break}case 34:case 39:case 91:s+=B(d);break;case 9:case 10:case 13:case 32:s+=ue(h);break;case 92:s+=fe(U()-1,7);continue;case 47:switch(A()){case 42:case 47:C(ke(pe(v(),U()),t,r),f);break;default:s+="/"}break;case 123*g:a[b++]=k(s)*x;case 125*g:case 59:case 0:switch(d){case 0:case 125:T=0;case 59+p:S>0&&k(s)-c&&C(S>32?xe(s+";",n,r,c-1):xe(W(s," ","")+";",n,r,c-2),f);break;case 59:s+=";";default:if(C(y=de(s,t,r,b,p,o,a,E,$=[],w=[],c),i),d===123)if(p===0)K(s,t,y,y,$,i,c,a,w);else switch(R){case 100:case 109:case 115:K(e,y,y,n&&C(de(e,y,y,0,0,o,a,E,o,$=[],c),w),o,w,c,a,n?$:w);break;default:K(s,y,y,y,[""],w,0,a,w)}}b=p=S=0,g=x=1,E=s="",c=l;break;case 58:c=1+k(s),S=h;default:if(g<1){if(d==123)--g;else if(d==125&&g++==0&&ce()==125)continue}switch(s+=N(d),d*g){case 38:x=p>0?1:(s+="\f",-1);break;case 44:a[b++]=(k(s)-1)*x,x=1;break;case 64:A()===45&&(s+=B(v())),R=A(),p=c=k(E=s+=ge(U())),d++;break;case 45:h===45&&k(s)==2&&(g=0)}}return i}function de(e,t,r,n,o,i,l,a,f,b,p){for(var c=o-1,R=o===0?i:[""],S=F(R),h=0,g=0,T=0;h<n;++h)for(var x=0,d=O(e,c+1,c=ne(g=l[h])),E=e;x<S;++x)(E=q(g>0?R[x]+" "+d:W(d,/&\f/g,R[x])))&&(f[T++]=E);return _(e,t,r,o===0?P:a,f,b,p)}function ke(e,t,r){return _(e,t,r,j,N(ie()),O(e,2,-2),0)}function xe(e,t,r,n){return _(e,t,r,z,O(e,0,n),O(e,n+1,-1),n)}function Y(e,t){for(var r="",n=F(e),o=0;o<n;o++)r+=t(e[o],o,e,t)||"";return r}function me(e,t,r,n){switch(e.type){case te:case z:return e.return=e.return||e.value;case j:return"";case re:return e.return=e.value+"{"+Y(e.children,n)+"}";case P:e.value=e.props.join(",")}return k(r=Y(e.children,n))?e.return=e.value+"{"+r+"}":""}var ye=["after","backdrop","before","cue","cue-region","first-letter","first-line","file-selector-button","grammar-error","marker","placeholder","selection","spelling-error","target-text"].join("|"),Re=RegExp(`::?(${ye})`),X=(e,t)=>RegExp(e.map(r=>r.source).join(""),t),we=X([/(?<name>[\w-]+)/,/ */,/((?<initial>\d+)\/)?/,/(?<numActive>\d*)?/,/(\[(?<states>.+)\])?/,/ */,/(at +(?<at>[\w-]+))?/,/ */,/(?<modifiers>.*)/]),Se=X([/((?<name>[\w-]+) +)?/,/(machine\((?<machine>[\w-]+)(?<strict> *, *strict)?\))/,/ */,/(at +(?<at>[\w-]+))?/,/ */,/(?<modifiers>.*)/]),Te=X([/(?<name>[\w-]+)/,/ */,/(do[ \(](?<transition>[\w-]+)\)?)?/,/(?<targetState>[\w-]*)/]),Ae=/toggle *(?<name>[\w-]+)/,G=/:toggle\((?<name>[\w-]+) *(?<value>[\w-]*)\)/,Oe=0,Me=()=>Oe++,M={},ee={};function Ce(e){let t=[e],r=e.nextElementSibling;for(;r!==null;)t.push(r),r=r.nextElementSibling;return t}function ve(e,t){let r=e.includes("machine(")?Se:we,{name:n,machine:o,strict:i,initial:l,numActive:a,states:f,at:b,modifiers:p}=r.exec(e).groups;if(n=n||o,n===void 0)return;let c,R=ee[o];R!==void 0?(f=Object.keys(R.states),c=f.length):f!==void 0?(f=f.split(/ +/),c=f.length):(c=parseInt(a||1)+1,f=[...Array(c).keys()].map(String)),p=p?.split(/ +/)||[];let S=p.includes("group"),h=p.includes("self"),g=f.indexOf(l);g===-1&&(g=f.indexOf(b)),g===-1&&(g=0);let T=0;p.includes("linear")&&(T=c-1),p.includes("sticky")&&(T=1);let x={name:n,resetTo:T,group:S,isNarrow:h,total:c,states:f,machine:o,activeIndex:g,strict:Boolean(i)};document.querySelectorAll(t).forEach(d=>{let E=`${n}-${Me()}`;(h?[d]:Ce(d)).forEach(w=>w.dataset.toggleRoot=E),M[E]={...x}})}function be(e,t){let{name:r,targetState:n,transition:o}=Te.exec(e).groups;if(r===void 0)return;let i=({target:l})=>{l.dispatchEvent(new CustomEvent("toggle",{bubbles:!0,detail:{toggleRoot:r,targetState:n,transition:o}}))};document.querySelectorAll(t).forEach(l=>{l.addEventListener("click",i)})}function Q(e){let t=M[e];document.querySelectorAll(` [data-toggle-root="${e}"][data-toggle-visibility], [data-toggle-root="${e}"] [data-toggle-visibility] `).forEach(r=>{r.closest("[data-toggle-root]")?.dataset.toggleRoot===e&&(r.dataset.toggleVisibility=t.activeIndex>0?"visible":"hidden")}),document.querySelectorAll(` [data-toggle-root="${e}"][data-toggle], [data-toggle-root="${e}"] [data-toggle] `).forEach(r=>{r.closest("[data-toggle-root]")?.dataset.toggleRoot===e&&(r.dataset.toggle=`${t.name} ${t.states[t.activeIndex]}`)})}function Le(e){let t=(e.props||[])[0];if(!(e.type==="@machine"&&t))return;let r={};e.children.filter(n=>n.type==="rule").forEach(n=>{r[n.value]=Object.fromEntries(n.children.filter(o=>o.type==="decl").map(o=>[o.props,o.children]))}),ee[t]={name:t,states:r}}function Ie(e){if(e.type!=="rule")return;let t=!1;return e.props=e.props.map(r=>{if(!r.match(G))return r;let n=r.slice(0,r.search(G)).replace(Re,"");document.querySelectorAll(n).forEach(a=>a.dataset.toggle="");let o,{name:i,value:l}=G.exec(r).groups;return l?o=`[data-toggle="${i} ${l}"]`:o=`[data-toggle^="${i} "]:not([data-toggle="${i} 0"])`,t=!0,r.replace(G,o)}),t}function $e(e){if(!(e.type==="decl"&&e.props==="toggle-visibility"))return;let{name:t}=Ae.exec(e.children).groups;t!==void 0&&document.querySelectorAll(e.parent.value).forEach(r=>{r.dataset.toggleVisibility=""})}function Ne(e){e.type==="decl"&&e.props==="toggle-root"&&ve(e.children,e.parent.value)}function Ue(e){e.type==="decl"&&e.props==="toggle-trigger"&&be(e.children,e.parent.value)}function je(e){if(!(e.type==="decl"&&e.props==="toggle"))return;let t=e.parent.value,r=e.children;ve(r,t),be(r,t)}function Ee(e,t){let r=!1;function n(i){if(i.type==="comm")return;Le(i),r|=Ie(i),$e(i),Ne(i),Ue(i),je(i);let l=(i.children||[]).length;for(let a=0;a<l;a++)n(i.children[a])}let o=he(e);return o.forEach(n),r?Y(o,me):""}function Pe(e){let t=Ee(e.innerHTML);!t||(e.innerHTML=t)}async function ze(e){if(e.rel!=="stylesheet")return;let t=new URL(e.href,document.baseURI);if(t.origin!==location.origin)return;let r=await fetch(t.toString()).then(i=>i.text()),n=Ee(r,t.toString());if(!n)return;let o=new Blob([n],{type:"text/css"});e.href=URL.createObjectURL(o)}document.body.addEventListener("toggle",e=>{let{target:t}=e,{toggleRoot:r,targetState:n,transition:o}=e.detail,l=t.closest(`[data-toggle-root^="${r}-"]`)?.dataset?.toggleRoot||null,a=M[l];if(a===void 0)return;let f=a.states[a.activeIndex];if(a.group)for(let c of Object.keys(M))M[c].name===r&&(M[c].activeIndex=0,Q(c));let b=ee[a.machine];if(b!==void 0&&(n=b.states[f][o],n===void 0))return;let p=a.states.indexOf(n);p===-1?a.activeIndex==a.total-1?a.activeIndex=a.resetTo:a.activeIndex++:a.activeIndex=p,Q(l)});document.querySelectorAll("style").forEach(Pe);Promise.all([...document.querySelectorAll("link")].map(ze)).then(()=>{Object.keys(M).forEach(Q)});document.head.insertAdjacentHTML("beforeend",'<style>[data-toggle-visibility="hidden"] { display: none; }</style>');