tailwindcss-theme-variants/index.js

Media-query- or JavaScript-based theme variants with fallback for Tailwind CSS

var J=Object.create,k=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames,A=Object.getOwnPropertySymbols,z=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable;var U=(e,t,i)=>t in e?k(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i,q=(e,t)=>{for(var i in t||(t={}))M.call(t,i)&&U(e,i,t[i]);if(A)for(var i of A(t))G.call(t,i)&&U(e,i,t[i]);return e};var D=e=>k(e,"__esModule",{value:!0});var H=(e,t)=>{for(var i in t)k(e,i,{get:t[i],enumerable:!0})},v=(e,t,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of W(t))!M.call(e,l)&&l!=="default"&&k(e,l,{get:()=>t[l],enumerable:!(i=K(t,l))||i.enumerable});return e},V=e=>v(D(k(e!=null?J(z(e)):{},"default",e&&e.__esModule&&"default"in e?{get:()=>e.default,enumerable:!0}:{value:e,enumerable:!0})),e);D(exports);H(exports,{themeVariants:()=>X});var Q=V(require("tailwindcss/plugin")),P=V(require("./selectors"));v(exports,V(require("./media-queries")));v(exports,V(require("./supports")));const E="DEFAULT",_=e=>{var i;const t={};for(const[l,d]of e)for(const[g,S]of Object.entries((i=d.semantics)!=null?i:{})){t[g]||(t[g]={});for(const[x,b]of Object.entries(S!=null?S:{})){const o=t[g],f=(c,s)=>{if(typeof s=="string"){const $=c===E?x:`${x}-${c}`;o[$]||(o[$]=new Map),o[$].set(l,s)}else for(const[$,F]of Object.entries(s)){const C=$===E?c:`${c}-${$}`;f(C,F)}};if(typeof b=="string")f(E,b);else for(const[c,s]of Object.entries(b))f(c,s)}}return t},I=Q.default.withOptions(({themes:e,baseSelector:t,fallback:i=!1,utilities:l={}})=>({addBase:d,addVariant:g,e:S,postcss:x,theme:b})=>{var C;const o=Object.entries(e!=null?e:{});o.length===0&&console.warn("tailwindcss-theme-variants: no themes were given in this plugin's configuration under the `themes` key, so no variants can be generated. this can be fixed by specifying a theme like `light: { selector: '.light' }` in `themes` of this plugin's configuration. see the README for more information");const f=o[0][0],c=o.some(([h,{selector:O}])=>O),s=t!=null?t:c?":root":"";i&&(o.length===1&&console.warn(s===""?`tailwindcss-theme-variants: the "${f}" theme was selected for fallback, but it is the only one available, so it will always be active, which is unusual. this can be "fixed" by adding another theme to \`themes\` in this plugin's configuration, disabling \`fallback\` in this plugin's configuration, or setting a \`baseSelector\` in this plugin's configuration (there is no way to silence this warning)`:`tailwindcss-theme-variants: the "${f}" theme was selected for fallback, but it is the only one available, so it will always be active as long as \`${s}\` exists. this is an unusual pattern, so if you meant not to do this, it can be "fixed" by adding another theme to \`themes\` in this plugin's configuration, disabling \`fallback\` in this plugin's configuration, or changing \`baseSelector\` to \`""\` and setting this theme's \`selector\` to the current value of \`baseSelector\` (there is no way to silence this warning)`),c&&s===""&&console.warn(`tailwindcss-theme-variants: the "${f}" theme was selected for fallback, but you specified \`baseSelector: ""\` even though you use theme(s) that need a selector to activate, which will result in confusing and erroneous behavior of when themes activate. this can be fixed by disabling \`fallback\` in this plugin's configuration, or setting a \`baseSelector\` in this plugin's configuration (there is no way to silence this warning)`));for(const[h,{mediaQuery:O,selector:m}]of o)g(h,({container:p,separator:j})=>{const y=p.clone();p.removeAll();const u=n=>`${`.${S(`${h}${j}`)}${n.slice(1)}`}`;if(i&&h===f){const n=y.clone();n.walkRules(a=>{const r=u(a.selector);a.selector=(0,P.addParent)(r,s)}),p.append(n)}else{if(O){const n=x.parse(O).first,a=y.clone();if(a.walkRules(r=>{const w=u(r.selector);if(i&&s!==""){const T=m?o.map(([R,{selector:N}])=>m===N?"":`:not(${N})`):[];r.selector=(0,P.addParent)(w,`${s}${T.join("")}`)}else r.selector=w}),(n==null?void 0:n.type)==="atrule")a.nodes&&n.append(a.nodes),p.append(n);else throw new TypeError(`tailwindcss-theme-variants: the media query passed to ${h}'s \`mediaQuery\` option (\`${O}\`) is not a valid media query. this can be fixed by passing a valid media query there instead (lol)`)}if(m){const n=y.clone();n.walkRules(a=>{const r=u(a.selector),w=`${s}${m}`;a.selector=(0,P.addParent)(r,w)}),p.append(n)}}});const $=Object.values(e).some(h=>h.semantics);if(Object.values(e).every(h=>h.semantics)){const h=_(o),O=l;for(const[m,{mediaQuery:p,selector:j}]of o){const y=s||":root",u={};for(const[n,a]of Object.entries(h!=null?h:{}))for(const[r,w]of Object.entries(a!=null?a:{})){if(u[r])throw new TypeError(`tailwindcss-theme-variants: you duplicated a semantic variable name "${r}" across your utilities in ${m}'s semantics configuration (found in ${n} and at least one other place). this can be fixed by using a different name for one of them`);const T=w.get(m);if(!T)throw new TypeError(`tailwindcss-theme-variants: the semantic variable "${r}" was expected to have an initial ("constant") value for the "${m}" theme, but it is undefined. this can be fixed by specifying a value for "${r}" in any utility's configuration in the "semantics" object under the "${m}" theme's configuration`);const{themeValueToVariableValue:R=L=>L.toString()}=(C=O[n])!=null?C:{},N=b(`${n}.${T}`,void 0);if(!N)throw new TypeError(`tailwindcss-theme-variants: the initial / constant value for the semantic variable named "${r}" for the "${m}" theme couldn't be found; it should be named "${T}" ${T.includes(".")||T.includes("-")?"(maybe with . in place of -?) ":""}in \`theme.${n}\`. this can be fixed by making sure the value you referenced (${T}) is in your Tailwind CSS \`theme\` configuration under \`${n}\`.
there could be a mistake here; please create an issue if it actually does exist: https://github.com/JakeNavith/tailwindcss-theme-variants/issues`);u[`--${r}`]=R(N.toString())}if(i&&m===f)d({[y]:u});else{if(p)if(i){let n=y;if(s!==""){const a=j?o.map(([r,{selector:w}])=>j===w?"":`:not(${w})`):[];n=`${y}${a.join("")}`}d({[p]:{[n]:u}})}else d({[p]:{[y]:u}});j&&d({[`${y}${j}`]:u})}}}else if($)throw new TypeError("tailwindcss-theme-variants: either all themes must define `semantics` or none do. this can be fixed by TODO")},({themes:e,utilities:t})=>{var d;const i=Object.values(e).every(g=>g.semantics),l={theme:{extend:{}}};if(i){const g=q({},t),S=Object.entries(e!=null?e:{}),x=_(S);for(const[b,o]of Object.entries(x)){l.theme.extend[b]={};const{variableValueToThemeValue:f=c=>c}=(d=g[b])!=null?d:{};for(const c of Object.keys(o)){const s=f(`var(--${c})`);l.theme.extend[b][c]=s}}}return l}),X=I;0&&(module.exports={themeVariants});