		@@ -1,2 +0,2 @@
		var de=Object.create,M=Object.defineProperty,he=Object.getPrototypeOf,fe=Object.prototype.hasOwnProperty,ue=Object.getOwnPropertyNames,pe=Object.getOwnPropertyDescriptor,Q=e=>M(e,"__esModule",{value:!0}),be=(e,r)=>{Q(e);for(var $ in r)M(e,$,{get:r[$],enumerable:!0})},P=(e,r,$)=>{if(Q(e),typeof r=="object"\|\|typeof r=="function")for(let x of ue(r))!fe.call(e,x)&&x!=="default"&&M(e,x,{get:()=>r[x],enumerable:!($=pe(r,x))\|\|$.enumerable});return e},S=e=>e&&e.__esModule?e:P(M(de(he(e)),"default",{value:e,enumerable:!0}),e);be(exports,{default:()=>we,tailwindcssThemeVariants:()=>ve,themeVariants:()=>$e});const N=S(require("lodash")),ee=S(require("tailwindcss/plugin")),te=S(require("tailwindcss/lib/util/withAlphaVariable")),G=S(require("./selectors")),me=S(require("./utilities")),ge=S(require("./variants"));P(exports,S(require("./media-queries")));P(exports,S(require("./supports")));P(exports,S(require("./variants")));const ie=(e,r)=>r===""?e:`${e}:${r}`,ye=Object.fromEntries(Object.entries(ge).map(([e,r])=>[N.kebabCase(e),r])),K=ee.default.withOptions(({group:e,themes:r,baseSelector:$,fallback:x=!1,utilities:B={},variants:se={}})=>({addBase:A,addUtilities:H,addVariant:ne,config:J,e:F,postcss:ae,target:z,theme:oe,variants:re})=>{const _=Object.keys(r!=null?r:{}),b=Object.entries(r!=null?r:{});if(b.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"),e&&Object.prototype.hasOwnProperty.call(r,e))throw new TypeError(`tailwindcss-theme-variants: a group of themes was named "${e}" even though there is already a theme named that in \`themes\`. this can be fixed by removing or changing the name of \`group\` in this plugin's configuration`);const w=x?b[0][0]:void 0,I=x==="compact",X=b.some(([y,{selector:O}])=>O),v=$!=null?$:X?":root":"";w!==void 0&&(b.length===1&&(v===""?console.warn(`tailwindcss-theme-variants: the "${w}" 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)`):console.warn(`tailwindcss-theme-variants: the "${w}" theme was selected for fallback, but it is the only one available, so it will always be active as long as \`${v}\` 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)`)),X&&v===""&&console.warn(`tailwindcss-theme-variants: the "${w}" 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)`)),Object.entries({"":y=>y,...ye,...se}).forEach(([y,O])=>{const D=e?[...b,[e,{mediaQuery:"",selector:""}]]:b;D.forEach(([m,j])=>{const L=ie(m,y);ne(L,({container:T,separator:E})=>{const k=T.clone();T.removeAll(),(m===e?b:[[m,j]]).forEach(([i,{mediaQuery:l,selector:n}])=>{const d=t=>`${O(`.${F(`${ie(i,y).replace(/:/g,E)}${E}`)}${t.slice(1)}`)}`;if(i===w){const t=k.clone();t.walkRules(a=>{const c=d(a.selector);if(I)a.selector=G.addParent(c,v);else{const s=n?b.map(([g,{selector:f}])=>n===f?"":`:not(${f})`):[];a.selector=G.addParent(c,`${v}${s.join("")}`)}}),T.append(t)}if(!I\|\|i!==w){if(l){const t=ae.parse(l).first,a=k.clone();if(a.walkRules(c=>{const s=d(c.selector);if(w&&v!==""){const g=n?b.map(([f,{selector:h}])=>n===h?"":`:not(${h})`):[];c.selector=G.addParent(s,`${v}${g.join("")}`)}else c.selector=s}),(t==null?void 0:t.type)==="atrule")a.nodes&&t.append(a.nodes),T.append(t);else throw new TypeError(`tailwindcss-theme-variants: the media query passed to ${i}'s \`mediaQuery\` option (\`${l}\`) is not a valid media query. this can be fixed by passing a valid media query there instead (lol)`)}if(n){const t=k.clone();t.walkRules(a=>{const c=d(a.selector),s=`${v}${n}`;a.selector=G.addParent(c,s)}),T.append(t)}}})})})});const le=Object.values(r).some(y=>Object.prototype.hasOwnProperty.call(y,"semantics")),ce=Object.values(r).every(y=>Object.prototype.hasOwnProperty.call(y,"semantics")),Y=z===void 0,q=["DEFAULT","default"];if(ce){const y=J("separator",":"),O=J("corePlugins",{}),D=i=>{let l=!0;return O===!0?l=!0:O===!1?l=!1:Array.isArray(O)?l=O.includes(i):O[i]===!1&&(l=!1),l},m=b.reduce((i,[l,n])=>{var d;return Object.entries((d=n.semantics)!=null?d:{}).forEach(([t,a])=>{i[t]\|\|(i[t]={}),Object.entries(a!=null?a:{}).forEach(([c,s])=>{const g=i[t],f=([h,o])=>{if(typeof o=="string"){const p=q.includes(h)?c:`${c}-${h}`;g[p]\|\|(g[p]=new Map),g[p].set(l,o)}else Object.entries(o).forEach(([p,U])=>{const R=q.includes(p)?h:`${h}-${p}`;f([R,U])})};typeof s=="string"?f([q[0],s]):Object.entries(s).forEach(f)})}),i},{}),j=(i,l)=>{l.forEach(n=>{var d;m[i]&&!m[n]&&(m[n]={},Object.entries((d=m==null?void 0:m[i])!=null?d:{}).forEach(([t,a])=>{m[n][t]=a}))})};j("colors",["backgroundColor","borderColor","gradientColorStops","textColor"]),delete m.colors,j("borderColor",["divideColor"]),j("opacity",["backgroundOpacity","borderOpacity","textOpacity"]),j("borderOpacity",["divideOpacity"]),j("gradientColorStops",["gradientFromColor","gradientViaColor","gradientToColor"]),delete m.gradientColorStops;const L={...me,...B},T=Y?"modern":z("themeVariants"),E=T==="ie11",k=T==="modern";E\|\|b.forEach(([i,{mediaQuery:l,selector:n}])=>{const d=v\|\|":root",t={};if(Object.entries(m!=null?m:{}).forEach(([a,c])=>{Object.entries(c!=null?c:{}).forEach(([s,g])=>{if(t[s])throw new TypeError(`tailwindcss-theme-variants: you duplicated a semantic variable name "${s}" across your utilities in ${i}'s semantics configuration (found in ${a} and at least one other place). this can be fixed by using a different name for one of them`);const f=g.get(i);if(!f)throw new TypeError(`tailwindcss-theme-variants: the semantic variable "${s}" was expected to have an initial ("constant") value for the "${i}" theme, but it is undefined. this can be fixed by specifying a value for "${s}" in any utility's configuration in the "semantics" object under the "${i}" theme's configuration`);let h=f,o;const p=[];for(let u=0;u<h.length;u+=1)(h[u]==="."\|\|h[u]==="-")&&p.push(u);const{configKey:U}=L[a],R=2**p.length;if([...Array(R).keys()].forEach(u=>{p.forEach((C,W)=>{h=h.substring(0,C)+(u&1<<W?".":"-")+h.substring(C+1)});const V=oe(`${U}.${h}`,void 0);V&&(o=V)}),o)try{const[u,V,C]=te.toRgba(o);t[`--${s}`]=`${u}, ${V}, ${C}`}catch(u){t[`--${s}`]=o.toString()}else throw new TypeError(`tailwindcss-theme-variants: the initial / constant value for the semantic variable named "${s}" for the "${i}" theme couldn't be found; it should be named "${f}" ${f.includes(".")\|\|f.includes("-")?"(maybe with . in place of -?) ":""}in \`theme.${U}\`. this can be fixed by making sure the value you referenced (${f}) is in your Tailwind CSS \`theme\` configuration under \`${U}\`.
		there could be a mistake here; please create an issue if it actually does exist: https://github.com/JakeNavith/tailwindcss-theme-variants/issues`)})}),i===w)if(I)A({[d]:t});else{const a=n?b.map(([c,{selector:s}])=>n===s?"":`:not(${s})`):[];A({[`${d}${a.join("")}`]:t})}if(!I\|\|i!==w){if(l)if(w&&v!==""){const a=n?b.map(([c,{selector:s}])=>n===s?"":`:not(${s})`):[];A({[l]:{[`${d}${a.join("")}`]:t}})}else A({[l]:{[`${d}`]:t}});n&&A({[`${d}${n}`]:t})}}),Object.entries(m).forEach(([i,l])=>{const{configKey:n,opacityUtility:d,isColorUtility:t,opacityVariable:a,prefix:c,css:s}=L[i];if(!D(n)&&!B[n])return;const g=re(n,[]),f=g.filter(o=>!_.includes(o)&&o!==e&&_.every(p=>!o.startsWith(`${p}:`))&&!o.startsWith(`${e}:`)),h=(e?g.includes(e):!1)\|\|_.every(o=>g.includes(o));if(!k&&!h&&(console.warn(`tailwindcss-theme-variants: ${E?"":"the IE11 compatible "}semantic utility classes for the "${i}" utility could not generate because the variants needed did not exist. this can be fixed by listing the theme group variant "${e}" in the \`variants.${n}\` array in your Tailwind CSS configuration. there is no way to silence this warning, so if you don't care, ignore it`),E))return;Object.entries(l).forEach(([o,p])=>{const U=Array.from(p.entries()).map(([C,W])=>{const Z=`${C}${y}${c}`;return q.includes(W)?Z:`${Z}-${W}`}),R=q.includes(o)?`.${F(c)}`:`.${F(`${c}-${o}`)}`;!k&&h&&H({[R]:{[`@apply ${U.join(" ")}`]:""}},f);let u=`var(--${o})`,V=!1;if(t&&(u=`rgb(var(--${o}))`,d&&(D(d)?(u=`rgba(var(--${o}), var(--${a}))`,V=!0):u=`rgb(var(--${o}))`)),!E){const C=k?u:`${u} !important`;H(s({computedClass:R,computedValue:C,onTailwind2:Y,opacityVariable:a,opacityVariableUsed:V}),f)}})})}else if(le)throw new TypeError("tailwindcss-theme-variants: either all themes must define `semantics` or none do. this can be fixed by TODO")},({themes:e})=>{const r=Object.values(e).every($=>Object.prototype.hasOwnProperty.call($,"semantics"));return r?(console.warn("tailwindcss-theme-variants: because you're using the `semantics` feature, the experimental Tailwind feature `applyComplexClasses` was enabled for you (there is no way to silence this warning)"),console.warn("tailwindcss-theme-variants: you should see a warning from Tailwind core explaining so below:"),{experimental:{applyComplexClasses:!0}}):{}});var we=K;const ve=K,$e=K;
		var de=Object.create,M=Object.defineProperty,he=Object.getPrototypeOf,fe=Object.prototype.hasOwnProperty,ue=Object.getOwnPropertyNames,pe=Object.getOwnPropertyDescriptor,Q=e=>M(e,"__esModule",{value:!0}),be=(e,r)=>{Q(e);for(var $ in r)M(e,$,{get:r[$],enumerable:!0})},P=(e,r,$)=>{if(Q(e),typeof r=="object"\|\|typeof r=="function")for(let x of ue(r))!fe.call(e,x)&&x!=="default"&&M(e,x,{get:()=>r[x],enumerable:!($=pe(r,x))\|\|$.enumerable});return e},S=e=>e&&e.__esModule?e:P(M(de(he(e)),"default",{value:e,enumerable:!0}),e);be(exports,{default:()=>we,tailwindcssThemeVariants:()=>ve,themeVariants:()=>$e});const N=S(require("lodash")),ee=S(require("tailwindcss/plugin")),te=S(require("tailwindcss/lib/util/withAlphaVariable")),G=S(require("./selectors")),me=S(require("./utilities")),ge=S(require("./variants"));P(exports,S(require("./media-queries")));P(exports,S(require("./supports")));P(exports,S(require("./variants")));const ie=(e,r)=>r===""?e:`${e}:${r}`,ye=Object.fromEntries(Object.entries(ge).map(([e,r])=>[N.kebabCase(e),r])),B=ee.default.withOptions(({group:e,themes:r,baseSelector:$,fallback:x=!1,utilities:H={},variants:se={}})=>({addBase:A,addUtilities:J,addVariant:ne,config:F,e:_,postcss:ae,target:z,theme:oe,variants:re})=>{const K=Object.keys(r!=null?r:{}),b=Object.entries(r!=null?r:{});if(b.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"),e&&Object.prototype.hasOwnProperty.call(r,e))throw new TypeError(`tailwindcss-theme-variants: a group of themes was named "${e}" even though there is already a theme named that in \`themes\`. this can be fixed by removing or changing the name of \`group\` in this plugin's configuration`);const w=x?b[0][0]:void 0,I=x==="compact",X=b.some(([y,{selector:O}])=>O),v=$!=null?$:X?":root":"";w!==void 0&&(b.length===1&&(v===""?console.warn(`tailwindcss-theme-variants: the "${w}" 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)`):console.warn(`tailwindcss-theme-variants: the "${w}" theme was selected for fallback, but it is the only one available, so it will always be active as long as \`${v}\` 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)`)),X&&v===""&&console.warn(`tailwindcss-theme-variants: the "${w}" 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)`)),Object.entries({"":y=>y,...ye,...se}).forEach(([y,O])=>{const D=e?[...b,[e,{mediaQuery:"",selector:""}]]:b;D.forEach(([m,j])=>{const L=ie(m,y);ne(L,({container:T,separator:E})=>{const k=T.clone();T.removeAll(),(m===e?b:[[m,j]]).forEach(([i,{mediaQuery:l,selector:n}])=>{const d=t=>`${O(`.${_(`${ie(i,y).replace(/:/g,E)}${E}`)}${t.slice(1)}`)}`;if(i===w){const t=k.clone();t.walkRules(a=>{const c=d(a.selector);if(I)a.selector=G.addParent(c,v);else{const s=n?b.map(([g,{selector:f}])=>n===f?"":`:not(${f})`):[];a.selector=G.addParent(c,`${v}${s.join("")}`)}}),T.append(t)}if(!I\|\|i!==w){if(l){const t=ae.parse(l).first,a=k.clone();if(a.walkRules(c=>{const s=d(c.selector);if(w&&v!==""){const g=n?b.map(([f,{selector:h}])=>n===h?"":`:not(${h})`):[];c.selector=G.addParent(s,`${v}${g.join("")}`)}else c.selector=s}),(t==null?void 0:t.type)==="atrule")a.nodes&&t.append(a.nodes),T.append(t);else throw new TypeError(`tailwindcss-theme-variants: the media query passed to ${i}'s \`mediaQuery\` option (\`${l}\`) is not a valid media query. this can be fixed by passing a valid media query there instead (lol)`)}if(n){const t=k.clone();t.walkRules(a=>{const c=d(a.selector),s=`${v}${n}`;a.selector=G.addParent(c,s)}),T.append(t)}}})})})});const le=Object.values(r).some(y=>Object.prototype.hasOwnProperty.call(y,"semantics")),ce=Object.values(r).every(y=>Object.prototype.hasOwnProperty.call(y,"semantics")),Y=z===void 0,q=["DEFAULT","default"];if(ce){const y=F("separator",":"),O=F("corePlugins",{}),D=i=>{let l=!0;return O===!0?l=!0:O===!1?l=!1:Array.isArray(O)?l=O.includes(i):O[i]===!1&&(l=!1),l},m=b.reduce((i,[l,n])=>{var d;return Object.entries((d=n.semantics)!=null?d:{}).forEach(([t,a])=>{i[t]\|\|(i[t]={}),Object.entries(a!=null?a:{}).forEach(([c,s])=>{const g=i[t],f=([h,o])=>{if(typeof o=="string"){const p=q.includes(h)?c:`${c}-${h}`;g[p]\|\|(g[p]=new Map),g[p].set(l,o)}else Object.entries(o).forEach(([p,U])=>{const R=q.includes(p)?h:`${h}-${p}`;f([R,U])})};typeof s=="string"?f([q[0],s]):Object.entries(s).forEach(f)})}),i},{}),j=(i,l)=>{l.forEach(n=>{var d;m[i]&&!m[n]&&(m[n]={},Object.entries((d=m==null?void 0:m[i])!=null?d:{}).forEach(([t,a])=>{m[n][t]=a}))})};j("colors",["backgroundColor","borderColor","gradientColorStops","textColor"]),delete m.colors,j("borderColor",["divideColor"]),j("opacity",["backgroundOpacity","borderOpacity","textOpacity"]),j("borderOpacity",["divideOpacity"]),j("gradientColorStops",["gradientFromColor","gradientViaColor","gradientToColor"]),delete m.gradientColorStops;const L={...me,...H},T=Y?"modern":z("themeVariants"),E=T==="ie11",k=T==="modern";E\|\|b.forEach(([i,{mediaQuery:l,selector:n}])=>{const d=v\|\|":root",t={};if(Object.entries(m!=null?m:{}).forEach(([a,c])=>{Object.entries(c!=null?c:{}).forEach(([s,g])=>{if(t[s])throw new TypeError(`tailwindcss-theme-variants: you duplicated a semantic variable name "${s}" across your utilities in ${i}'s semantics configuration (found in ${a} and at least one other place). this can be fixed by using a different name for one of them`);const f=g.get(i);if(!f)throw new TypeError(`tailwindcss-theme-variants: the semantic variable "${s}" was expected to have an initial ("constant") value for the "${i}" theme, but it is undefined. this can be fixed by specifying a value for "${s}" in any utility's configuration in the "semantics" object under the "${i}" theme's configuration`);let h=f,o;const p=[];for(let u=0;u<h.length;u+=1)(h[u]==="."\|\|h[u]==="-")&&p.push(u);const{configKey:U}=L[a],R=2**p.length;if([...Array(R).keys()].forEach(u=>{p.forEach((C,W)=>{h=h.substring(0,C)+(u&1<<W?".":"-")+h.substring(C+1)});const V=oe(`${U}.${h}`,void 0);V&&(o=V)}),o)try{const[u,V,C]=te.toRgba(o);t[`--${s}`]=`${u}, ${V}, ${C}`}catch(u){t[`--${s}`]=o.toString()}else throw new TypeError(`tailwindcss-theme-variants: the initial / constant value for the semantic variable named "${s}" for the "${i}" theme couldn't be found; it should be named "${f}" ${f.includes(".")\|\|f.includes("-")?"(maybe with . in place of -?) ":""}in \`theme.${U}\`. this can be fixed by making sure the value you referenced (${f}) is in your Tailwind CSS \`theme\` configuration under \`${U}\`.
		there could be a mistake here; please create an issue if it actually does exist: https://github.com/JakeNavith/tailwindcss-theme-variants/issues`)})}),i===w)if(I)A({[d]:t});else{const a=n?b.map(([c,{selector:s}])=>n===s?"":`:not(${s})`):[];A({[`${d}${a.join("")}`]:t})}if(!I\|\|i!==w){if(l)if(w&&v!==""){const a=n?b.map(([c,{selector:s}])=>n===s?"":`:not(${s})`):[];A({[l]:{[`${d}${a.join("")}`]:t}})}else A({[l]:{[`${d}`]:t}});n&&A({[`${d}${n}`]:t})}}),Object.entries(m).forEach(([i,l])=>{const{configKey:n,opacityUtility:d,isColorUtility:t,opacityVariable:a,prefix:c,css:s}=L[i];if(!D(n)&&!H[n])return;const g=re(n,[]),f=g.filter(o=>!K.includes(o)&&o!==e&&K.every(p=>!o.startsWith(`${p}:`))&&!o.startsWith(`${e}:`)),h=(e?g.includes(e):!1)\|\|K.every(o=>g.includes(o));if(!k&&!h&&(console.warn(`tailwindcss-theme-variants: ${E?"":"the IE11 compatible "}semantic utility classes for the "${i}" utility could not generate because the variants needed did not exist. this can be fixed by listing the theme group variant "${e}" in the \`variants.${n}\` array in your Tailwind CSS configuration. there is no way to silence this warning, so if you don't care, ignore it`),E))return;Object.entries(l).forEach(([o,p])=>{const U=Array.from(p.entries()).map(([C,W])=>{const Z=`${C}${y}${F("prefix","")}${c}`;return q.includes(W)?Z:`${Z}-${W}`}),R=q.includes(o)?`.${_(c)}`:`.${_(`${c}-${o}`)}`;!k&&h&&J({[R]:{[`@apply ${U.join(" ")}`]:""}},f);let u=`var(--${o})`,V=!1;if(t&&(u=`rgb(var(--${o}))`,d&&(D(d)?(u=`rgba(var(--${o}), var(--${a}))`,V=!0):u=`rgb(var(--${o}))`)),!E){const C=k?u:`${u} !important`;J(s({computedClass:R,computedValue:C,onTailwind2:Y,opacityVariable:a,opacityVariableUsed:V}),f)}})})}else if(le)throw new TypeError("tailwindcss-theme-variants: either all themes must define `semantics` or none do. this can be fixed by TODO")},({themes:e})=>{const r=Object.values(e).every($=>Object.prototype.hasOwnProperty.call($,"semantics"));return r?(console.warn("tailwindcss-theme-variants: because you're using the `semantics` feature, the experimental Tailwind feature `applyComplexClasses` was enabled for you (there is no way to silence this warning)"),console.warn("tailwindcss-theme-variants: you should see a warning from Tailwind core explaining so below:"),{experimental:{applyComplexClasses:!0}}):{}});var we=B;const ve=B,$e=B;

package.json

		{
		"name": "tailwindcss-theme-variants",
		"version": "1.10.0-beta.3",
		"version": "1.10.0-beta.7",
		"description": "Media-query- or JavaScript-based theme variants with fallback for Tailwind CSS",
		@@ -57,6 +57,18 @@ "keywords": [
		"default": "./dist/variants.mjs"
		},
		"./presets/dark-mode": {
		"import": "./dist/preset-light-and-dark.mjs",
		"require": "./dist/preset-light-and-dark.js",
		"node": "./dist/preset-light-and-dark.js",
		"default": "./dist/preset-light-and-dark.mjs"
		},
		"./presets/recommended": {
		"import": "./dist/preset-recommended.mjs",
		"require": "./dist/preset-recommended.js",
		"node": "./dist/preset-recommended.js",
		"default": "./dist/preset-recommended.mjs"
		}
		},
		"scripts": {
		"eslint:fix": "eslint --fix ./src/*/.ts ./scripts/*/.ts ./tests/*/.ts",
		"eslint:fix": "eslint --fix ./src/*/.ts ./scripts/*/.cjs ./scripts/*/.ts ./tests/*/.ts",
		"retext": "ts-node scripts/lint-content.ts",
		@@ -110,4 +122,4 @@ "lint": "run-p retext eslint:fix",
		"peerDependencies": {
		"tailwindcss": "^1.9.6 \|\| ^2.0.0-alpha.24"
		"tailwindcss": "^1.9.6 \|\| ^2.0.1"
		}
		}

README.md

		@@ -16,6 +16,3 @@ # 🌗 Tailwind CSS Theme Variants

		## What about Tailwind's upcoming official dark mode?
		This plugin will still be maintained! Light and dark mode support is just one thing this plugin can do, and the complexity this plugin can provide [will not be reflected in Tailwind core (see Design Rationale)](https://github.com/tailwindlabs/tailwindcss/pull/2279), so I will still need this around.


		# ⬇️ Installation
		@@ -1133,6 +1130,4 @@
		# Semantics
		Semantics are an experimental feature for this plugin that serve as an alternative to [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) (read: have 100% browser support since IE9).
		Semantics are an experimental feature for this plugin that serve as a better approach to [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). If you're on Tailwind CSS 1.7 to 1.9, this means they still work on IE11!

		Semantics require Tailwind CSS 1.7 or higher. Also, the [`applyComplexClasses` experimental feature](https://github.com/tailwindlabs/tailwindcss/pull/2159) will be enabled for you if you use semantics because it's required for them to work.

		TODO. Semantic classes bundle up your design system with this plugin's generated variants. Because I (the plugin author 👋) have to write them, only certain utilities are supported so far:
		@@ -1210,4 +1205,6 @@ * `backgroundColor`
		# Alternatives
		Both because there are many theme plugins for Tailwind CSS, and because what's the right way to do theming? is a frequently asked question, we've compiled this table listing every theme plugin to compare their features and ultimately answer that question:
		Both because there are many theme plugins for Tailwind CSS, and because what's the right way to do theming? is a frequently asked question, we've compiled this table listing every theme plugin to compare their features and ultimately answer that question.

		This table is very complicated, so a text summary is also available in [tailwindcss-theming's Alternatives section](https://github.com/innocenzi/tailwindcss-theming#alternatives).

		<table>
		@@ -1217,4 +1214,4 @@ <thead>
		<th></th>
		<th><a href="https://tailwindcss.com/docs/breakpoints/#dark-mode">Native screens</a></th>
		<th><a href="https://github.com/tailwindlabs/tailwindcss/pull/2279">Experimental <code>darkModeVariant</code></a></th>
		<th><a href="https://tailwindcss.com/docs/breakpoints#custom-media-queries">Native screens</a></th>
		<th><a href="https://tailwindcss.com/docs/dark-mode">Native <code>darkMode</code></a></th>
		<th><a href="https://github.com/benface/tailwindcss-alt">tailwindcss-alt</a></th>
		@@ -1232,15 +1229,2 @@ <th><a href="https://github.com/ChanceArthur/tailwindcss-dark-mode">tailwindcss-dark-mode</a></th>
		<tr>
		<th>Classes can be <code>@apply</code>ed</th>
		<td>🟡</td>
		<td>🟡</td>
		<td>🟡</td>
		<td>🟡</td>
		<td>🟡</td>
		<td>🟡</td>
		<td>🟡</td>
		<td>✅</td>
		<td>❌</td>
		<td>✅</td>
		</tr>
		<tr>
		<th>Controllable with selectors (classes or data attributes)</th>
		@@ -1259,15 +1243,2 @@ <td>❌</td>
		<tr>
		<th>Requires <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/--*">custom properties</a></th>
		<td>❌</td>
		<td>❌</td>
		<td>❌</td>
		<td>❌</td>
		<td>❌</td>
		<td>❌</td>
		<td>❌</td>
		<td>✅</td>
		<td>❌</td>
		<td>✅</td>
		</tr>
		<tr>
		<th>Responsive</th>
		@@ -1341,41 +1312,2 @@ <td>❌</td>
		## Legend
		Classes can be `@apply`ed:

		As of Tailwind CSS 1.7, any class can be `@apply`ed with the [`applyComplexClasses` experimental feature](https://github.com/tailwindlabs/tailwindcss/releases/tag/v1.7.0#use-apply-with-variants-and-other-complex-classes).

		```css
		.btn-blue {
		/* Now, it all just works! */
		@apply light:bg-blue-100 light:text-blue-800;
		@apply dark:bg-blue-700 dark:text-white;
		}
		```

		The following information is applicable to versions of Tailwind before 1.7 or without `applyComplexClasses` enabled:

		[Native screens](https://tailwindcss.com/docs/breakpoints/#dark-mode) cannot have their generated classes `@apply`ed, but you can still nest an `@screen` directive within the element, like this:
		```css
		.btn-blue {
		@apply bg-blue-100 text-blue-800;
		/* Wouldn't have worked: @apply dark:bg-blue-700 dark:text-white */
		@screen dark {
		@apply bg-blue-700 text-white;
		}
		}
		```
		This may require nesting support, provided by [`postcss-nested`](https://github.com/postcss/postcss-nested) or [`postcss-nesting`](https://github.com/jonathantneal/postcss-nesting) (part of [`postcss-preset-env`](https://github.com/csstools/postcss-preset-env)).

		As for theme plugins that are controlled with CSS selectors like classes and data attributes, you can nest whatever selector that may be (in this example `.theme-dark`) inside of the component's block, similarly to `@screen`:
		```css
		.btn-blue {
		@apply bg-blue-100 text-blue-800;
		/* Wouldn't have worked: @apply dark:bg-blue-700 dark:text-white */
		.theme-dark & {
		@apply bg-blue-700 text-white;
		}
		}
		```

		*Requires <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/--">custom properties</a>**: Plugins who meet this description (have a ✅) usually have you write semantically named classes like `bg-primary`, `text-secondary`, etc, and swap out what `primary` and `secondary` mean with custom properties depending on the theme. This means that in IE11, themes cannot be controlled, and in some cases the default theme won't work at all without [preprocessing](https://github.com/postcss/postcss-custom-properties).

		Responsive: While "inside" of a theme, it must be possible to "activate" classes depending on the current breakpoint. For instance, it has to be possible to change `background-color` when both the screen is `sm` and the current theme is `dark`.
		@@ -1392,3 +1324,3 @@

		[tailwindcss-prefers-dark-mode](https://github.com/javifm86/tailwindcss-prefers-dark-mode) and [experimental `darkModeVariant`](https://github.com/tailwindlabs/tailwindcss/pull/2279): cannot use selectors and media queries at the same time; it's one or the other, so you have to put a ✅ in one row and ❌ in the other.
		[tailwindcss-prefers-dark-mode](https://github.com/javifm86/tailwindcss-prefers-dark-mode) and [native `darkMode`](https://tailwindcss.com/docs/dark-mode): cannot use selectors and media queries at the same time; it's one or the other, so you have to put a ✅ in one row and ❌ in the other.

		@@ -1395,0 +1327,0 @@

dist/index.mjs

Sorry, the diff of this file is not supported yet

		@@ -1,2 +0,2 @@
		var de=Object.create,M=Object.defineProperty,he=Object.getPrototypeOf,fe=Object.prototype.hasOwnProperty,ue=Object.getOwnPropertyNames,pe=Object.getOwnPropertyDescriptor,Q=e=>M(e,"__esModule",{value:!0}),be=(e,r)=>{Q(e);for(var $ in r)M(e,$,{get:r[$],enumerable:!0})},P=(e,r,$)=>{if(Q(e),typeof r=="object"\|\|typeof r=="function")for(let x of ue(r))!fe.call(e,x)&&x!=="default"&&M(e,x,{get:()=>r[x],enumerable:!($=pe(r,x))\|\|$.enumerable});return e},S=e=>e&&e.__esModule?e:P(M(de(he(e)),"default",{value:e,enumerable:!0}),e);be(exports,{default:()=>we,tailwindcssThemeVariants:()=>ve,themeVariants:()=>$e});const N=S(require("lodash")),ee=S(require("tailwindcss/plugin")),te=S(require("tailwindcss/lib/util/withAlphaVariable")),G=S(require("./selectors")),me=S(require("./utilities")),ge=S(require("./variants"));P(exports,S(require("./media-queries")));P(exports,S(require("./supports")));P(exports,S(require("./variants")));const ie=(e,r)=>r===""?e:`${e}:${r}`,ye=Object.fromEntries(Object.entries(ge).map(([e,r])=>[N.kebabCase(e),r])),K=ee.default.withOptions(({group:e,themes:r,baseSelector:$,fallback:x=!1,utilities:B={},variants:se={}})=>({addBase:A,addUtilities:H,addVariant:ne,config:J,e:F,postcss:ae,target:z,theme:oe,variants:re})=>{const _=Object.keys(r!=null?r:{}),b=Object.entries(r!=null?r:{});if(b.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"),e&&Object.prototype.hasOwnProperty.call(r,e))throw new TypeError(`tailwindcss-theme-variants: a group of themes was named "${e}" even though there is already a theme named that in \`themes\`. this can be fixed by removing or changing the name of \`group\` in this plugin's configuration`);const w=x?b[0][0]:void 0,I=x==="compact",X=b.some(([y,{selector:O}])=>O),v=$!=null?$:X?":root":"";w!==void 0&&(b.length===1&&(v===""?console.warn(`tailwindcss-theme-variants: the "${w}" 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)`):console.warn(`tailwindcss-theme-variants: the "${w}" theme was selected for fallback, but it is the only one available, so it will always be active as long as \`${v}\` 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)`)),X&&v===""&&console.warn(`tailwindcss-theme-variants: the "${w}" 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)`)),Object.entries({"":y=>y,...ye,...se}).forEach(([y,O])=>{const D=e?[...b,[e,{mediaQuery:"",selector:""}]]:b;D.forEach(([m,j])=>{const L=ie(m,y);ne(L,({container:T,separator:E})=>{const k=T.clone();T.removeAll(),(m===e?b:[[m,j]]).forEach(([i,{mediaQuery:l,selector:n}])=>{const d=t=>`${O(`.${F(`${ie(i,y).replace(/:/g,E)}${E}`)}${t.slice(1)}`)}`;if(i===w){const t=k.clone();t.walkRules(a=>{const c=d(a.selector);if(I)a.selector=G.addParent(c,v);else{const s=n?b.map(([g,{selector:f}])=>n===f?"":`:not(${f})`):[];a.selector=G.addParent(c,`${v}${s.join("")}`)}}),T.append(t)}if(!I\|\|i!==w){if(l){const t=ae.parse(l).first,a=k.clone();if(a.walkRules(c=>{const s=d(c.selector);if(w&&v!==""){const g=n?b.map(([f,{selector:h}])=>n===h?"":`:not(${h})`):[];c.selector=G.addParent(s,`${v}${g.join("")}`)}else c.selector=s}),(t==null?void 0:t.type)==="atrule")a.nodes&&t.append(a.nodes),T.append(t);else throw new TypeError(`tailwindcss-theme-variants: the media query passed to ${i}'s \`mediaQuery\` option (\`${l}\`) is not a valid media query. this can be fixed by passing a valid media query there instead (lol)`)}if(n){const t=k.clone();t.walkRules(a=>{const c=d(a.selector),s=`${v}${n}`;a.selector=G.addParent(c,s)}),T.append(t)}}})})})});const le=Object.values(r).some(y=>Object.prototype.hasOwnProperty.call(y,"semantics")),ce=Object.values(r).every(y=>Object.prototype.hasOwnProperty.call(y,"semantics")),Y=z===void 0,q=["DEFAULT","default"];if(ce){const y=J("separator",":"),O=J("corePlugins",{}),D=i=>{let l=!0;return O===!0?l=!0:O===!1?l=!1:Array.isArray(O)?l=O.includes(i):O[i]===!1&&(l=!1),l},m=b.reduce((i,[l,n])=>{var d;return Object.entries((d=n.semantics)!=null?d:{}).forEach(([t,a])=>{i[t]\|\|(i[t]={}),Object.entries(a!=null?a:{}).forEach(([c,s])=>{const g=i[t],f=([h,o])=>{if(typeof o=="string"){const p=q.includes(h)?c:`${c}-${h}`;g[p]\|\|(g[p]=new Map),g[p].set(l,o)}else Object.entries(o).forEach(([p,U])=>{const R=q.includes(p)?h:`${h}-${p}`;f([R,U])})};typeof s=="string"?f([q[0],s]):Object.entries(s).forEach(f)})}),i},{}),j=(i,l)=>{l.forEach(n=>{var d;m[i]&&!m[n]&&(m[n]={},Object.entries((d=m==null?void 0:m[i])!=null?d:{}).forEach(([t,a])=>{m[n][t]=a}))})};j("colors",["backgroundColor","borderColor","gradientColorStops","textColor"]),delete m.colors,j("borderColor",["divideColor"]),j("opacity",["backgroundOpacity","borderOpacity","textOpacity"]),j("borderOpacity",["divideOpacity"]),j("gradientColorStops",["gradientFromColor","gradientViaColor","gradientToColor"]),delete m.gradientColorStops;const L={...me,...B},T=Y?"modern":z("themeVariants"),E=T==="ie11",k=T==="modern";E\|\|b.forEach(([i,{mediaQuery:l,selector:n}])=>{const d=v\|\|":root",t={};if(Object.entries(m!=null?m:{}).forEach(([a,c])=>{Object.entries(c!=null?c:{}).forEach(([s,g])=>{if(t[s])throw new TypeError(`tailwindcss-theme-variants: you duplicated a semantic variable name "${s}" across your utilities in ${i}'s semantics configuration (found in ${a} and at least one other place). this can be fixed by using a different name for one of them`);const f=g.get(i);if(!f)throw new TypeError(`tailwindcss-theme-variants: the semantic variable "${s}" was expected to have an initial ("constant") value for the "${i}" theme, but it is undefined. this can be fixed by specifying a value for "${s}" in any utility's configuration in the "semantics" object under the "${i}" theme's configuration`);let h=f,o;const p=[];for(let u=0;u<h.length;u+=1)(h[u]==="."\|\|h[u]==="-")&&p.push(u);const{configKey:U}=L[a],R=2**p.length;if([...Array(R).keys()].forEach(u=>{p.forEach((C,W)=>{h=h.substring(0,C)+(u&1<<W?".":"-")+h.substring(C+1)});const V=oe(`${U}.${h}`,void 0);V&&(o=V)}),o)try{const[u,V,C]=te.toRgba(o);t[`--${s}`]=`${u}, ${V}, ${C}`}catch(u){t[`--${s}`]=o.toString()}else throw new TypeError(`tailwindcss-theme-variants: the initial / constant value for the semantic variable named "${s}" for the "${i}" theme couldn't be found; it should be named "${f}" ${f.includes(".")\|\|f.includes("-")?"(maybe with . in place of -?) ":""}in \`theme.${U}\`. this can be fixed by making sure the value you referenced (${f}) is in your Tailwind CSS \`theme\` configuration under \`${U}\`.
		there could be a mistake here; please create an issue if it actually does exist: https://github.com/JakeNavith/tailwindcss-theme-variants/issues`)})}),i===w)if(I)A({[d]:t});else{const a=n?b.map(([c,{selector:s}])=>n===s?"":`:not(${s})`):[];A({[`${d}${a.join("")}`]:t})}if(!I\|\|i!==w){if(l)if(w&&v!==""){const a=n?b.map(([c,{selector:s}])=>n===s?"":`:not(${s})`):[];A({[l]:{[`${d}${a.join("")}`]:t}})}else A({[l]:{[`${d}`]:t}});n&&A({[`${d}${n}`]:t})}}),Object.entries(m).forEach(([i,l])=>{const{configKey:n,opacityUtility:d,isColorUtility:t,opacityVariable:a,prefix:c,css:s}=L[i];if(!D(n)&&!B[n])return;const g=re(n,[]),f=g.filter(o=>!_.includes(o)&&o!==e&&_.every(p=>!o.startsWith(`${p}:`))&&!o.startsWith(`${e}:`)),h=(e?g.includes(e):!1)\|\|_.every(o=>g.includes(o));if(!k&&!h&&(console.warn(`tailwindcss-theme-variants: ${E?"":"the IE11 compatible "}semantic utility classes for the "${i}" utility could not generate because the variants needed did not exist. this can be fixed by listing the theme group variant "${e}" in the \`variants.${n}\` array in your Tailwind CSS configuration. there is no way to silence this warning, so if you don't care, ignore it`),E))return;Object.entries(l).forEach(([o,p])=>{const U=Array.from(p.entries()).map(([C,W])=>{const Z=`${C}${y}${c}`;return q.includes(W)?Z:`${Z}-${W}`}),R=q.includes(o)?`.${F(c)}`:`.${F(`${c}-${o}`)}`;!k&&h&&H({[R]:{[`@apply ${U.join(" ")}`]:""}},f);let u=`var(--${o})`,V=!1;if(t&&(u=`rgb(var(--${o}))`,d&&(D(d)?(u=`rgba(var(--${o}), var(--${a}))`,V=!0):u=`rgb(var(--${o}))`)),!E){const C=k?u:`${u} !important`;H(s({computedClass:R,computedValue:C,onTailwind2:Y,opacityVariable:a,opacityVariableUsed:V}),f)}})})}else if(le)throw new TypeError("tailwindcss-theme-variants: either all themes must define `semantics` or none do. this can be fixed by TODO")},({themes:e})=>{const r=Object.values(e).every($=>Object.prototype.hasOwnProperty.call($,"semantics"));return r?(console.warn("tailwindcss-theme-variants: because you're using the `semantics` feature, the experimental Tailwind feature `applyComplexClasses` was enabled for you (there is no way to silence this warning)"),console.warn("tailwindcss-theme-variants: you should see a warning from Tailwind core explaining so below:"),{experimental:{applyComplexClasses:!0}}):{}});var we=K;const ve=K,$e=K;
		var de=Object.create,M=Object.defineProperty,he=Object.getPrototypeOf,fe=Object.prototype.hasOwnProperty,ue=Object.getOwnPropertyNames,pe=Object.getOwnPropertyDescriptor,Q=e=>M(e,"__esModule",{value:!0}),be=(e,r)=>{Q(e);for(var $ in r)M(e,$,{get:r[$],enumerable:!0})},P=(e,r,$)=>{if(Q(e),typeof r=="object"\|\|typeof r=="function")for(let x of ue(r))!fe.call(e,x)&&x!=="default"&&M(e,x,{get:()=>r[x],enumerable:!($=pe(r,x))\|\|$.enumerable});return e},S=e=>e&&e.__esModule?e:P(M(de(he(e)),"default",{value:e,enumerable:!0}),e);be(exports,{default:()=>we,tailwindcssThemeVariants:()=>ve,themeVariants:()=>$e});const N=S(require("lodash")),ee=S(require("tailwindcss/plugin")),te=S(require("tailwindcss/lib/util/withAlphaVariable")),G=S(require("./selectors")),me=S(require("./utilities")),ge=S(require("./variants"));P(exports,S(require("./media-queries")));P(exports,S(require("./supports")));P(exports,S(require("./variants")));const ie=(e,r)=>r===""?e:`${e}:${r}`,ye=Object.fromEntries(Object.entries(ge).map(([e,r])=>[N.kebabCase(e),r])),B=ee.default.withOptions(({group:e,themes:r,baseSelector:$,fallback:x=!1,utilities:H={},variants:se={}})=>({addBase:A,addUtilities:J,addVariant:ne,config:F,e:_,postcss:ae,target:z,theme:oe,variants:re})=>{const K=Object.keys(r!=null?r:{}),b=Object.entries(r!=null?r:{});if(b.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"),e&&Object.prototype.hasOwnProperty.call(r,e))throw new TypeError(`tailwindcss-theme-variants: a group of themes was named "${e}" even though there is already a theme named that in \`themes\`. this can be fixed by removing or changing the name of \`group\` in this plugin's configuration`);const w=x?b[0][0]:void 0,I=x==="compact",X=b.some(([y,{selector:O}])=>O),v=$!=null?$:X?":root":"";w!==void 0&&(b.length===1&&(v===""?console.warn(`tailwindcss-theme-variants: the "${w}" 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)`):console.warn(`tailwindcss-theme-variants: the "${w}" theme was selected for fallback, but it is the only one available, so it will always be active as long as \`${v}\` 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)`)),X&&v===""&&console.warn(`tailwindcss-theme-variants: the "${w}" 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)`)),Object.entries({"":y=>y,...ye,...se}).forEach(([y,O])=>{const D=e?[...b,[e,{mediaQuery:"",selector:""}]]:b;D.forEach(([m,j])=>{const L=ie(m,y);ne(L,({container:T,separator:E})=>{const k=T.clone();T.removeAll(),(m===e?b:[[m,j]]).forEach(([i,{mediaQuery:l,selector:n}])=>{const d=t=>`${O(`.${_(`${ie(i,y).replace(/:/g,E)}${E}`)}${t.slice(1)}`)}`;if(i===w){const t=k.clone();t.walkRules(a=>{const c=d(a.selector);if(I)a.selector=G.addParent(c,v);else{const s=n?b.map(([g,{selector:f}])=>n===f?"":`:not(${f})`):[];a.selector=G.addParent(c,`${v}${s.join("")}`)}}),T.append(t)}if(!I\|\|i!==w){if(l){const t=ae.parse(l).first,a=k.clone();if(a.walkRules(c=>{const s=d(c.selector);if(w&&v!==""){const g=n?b.map(([f,{selector:h}])=>n===h?"":`:not(${h})`):[];c.selector=G.addParent(s,`${v}${g.join("")}`)}else c.selector=s}),(t==null?void 0:t.type)==="atrule")a.nodes&&t.append(a.nodes),T.append(t);else throw new TypeError(`tailwindcss-theme-variants: the media query passed to ${i}'s \`mediaQuery\` option (\`${l}\`) is not a valid media query. this can be fixed by passing a valid media query there instead (lol)`)}if(n){const t=k.clone();t.walkRules(a=>{const c=d(a.selector),s=`${v}${n}`;a.selector=G.addParent(c,s)}),T.append(t)}}})})})});const le=Object.values(r).some(y=>Object.prototype.hasOwnProperty.call(y,"semantics")),ce=Object.values(r).every(y=>Object.prototype.hasOwnProperty.call(y,"semantics")),Y=z===void 0,q=["DEFAULT","default"];if(ce){const y=F("separator",":"),O=F("corePlugins",{}),D=i=>{let l=!0;return O===!0?l=!0:O===!1?l=!1:Array.isArray(O)?l=O.includes(i):O[i]===!1&&(l=!1),l},m=b.reduce((i,[l,n])=>{var d;return Object.entries((d=n.semantics)!=null?d:{}).forEach(([t,a])=>{i[t]\|\|(i[t]={}),Object.entries(a!=null?a:{}).forEach(([c,s])=>{const g=i[t],f=([h,o])=>{if(typeof o=="string"){const p=q.includes(h)?c:`${c}-${h}`;g[p]\|\|(g[p]=new Map),g[p].set(l,o)}else Object.entries(o).forEach(([p,U])=>{const R=q.includes(p)?h:`${h}-${p}`;f([R,U])})};typeof s=="string"?f([q[0],s]):Object.entries(s).forEach(f)})}),i},{}),j=(i,l)=>{l.forEach(n=>{var d;m[i]&&!m[n]&&(m[n]={},Object.entries((d=m==null?void 0:m[i])!=null?d:{}).forEach(([t,a])=>{m[n][t]=a}))})};j("colors",["backgroundColor","borderColor","gradientColorStops","textColor"]),delete m.colors,j("borderColor",["divideColor"]),j("opacity",["backgroundOpacity","borderOpacity","textOpacity"]),j("borderOpacity",["divideOpacity"]),j("gradientColorStops",["gradientFromColor","gradientViaColor","gradientToColor"]),delete m.gradientColorStops;const L={...me,...H},T=Y?"modern":z("themeVariants"),E=T==="ie11",k=T==="modern";E\|\|b.forEach(([i,{mediaQuery:l,selector:n}])=>{const d=v\|\|":root",t={};if(Object.entries(m!=null?m:{}).forEach(([a,c])=>{Object.entries(c!=null?c:{}).forEach(([s,g])=>{if(t[s])throw new TypeError(`tailwindcss-theme-variants: you duplicated a semantic variable name "${s}" across your utilities in ${i}'s semantics configuration (found in ${a} and at least one other place). this can be fixed by using a different name for one of them`);const f=g.get(i);if(!f)throw new TypeError(`tailwindcss-theme-variants: the semantic variable "${s}" was expected to have an initial ("constant") value for the "${i}" theme, but it is undefined. this can be fixed by specifying a value for "${s}" in any utility's configuration in the "semantics" object under the "${i}" theme's configuration`);let h=f,o;const p=[];for(let u=0;u<h.length;u+=1)(h[u]==="."\|\|h[u]==="-")&&p.push(u);const{configKey:U}=L[a],R=2**p.length;if([...Array(R).keys()].forEach(u=>{p.forEach((C,W)=>{h=h.substring(0,C)+(u&1<<W?".":"-")+h.substring(C+1)});const V=oe(`${U}.${h}`,void 0);V&&(o=V)}),o)try{const[u,V,C]=te.toRgba(o);t[`--${s}`]=`${u}, ${V}, ${C}`}catch(u){t[`--${s}`]=o.toString()}else throw new TypeError(`tailwindcss-theme-variants: the initial / constant value for the semantic variable named "${s}" for the "${i}" theme couldn't be found; it should be named "${f}" ${f.includes(".")\|\|f.includes("-")?"(maybe with . in place of -?) ":""}in \`theme.${U}\`. this can be fixed by making sure the value you referenced (${f}) is in your Tailwind CSS \`theme\` configuration under \`${U}\`.
		there could be a mistake here; please create an issue if it actually does exist: https://github.com/JakeNavith/tailwindcss-theme-variants/issues`)})}),i===w)if(I)A({[d]:t});else{const a=n?b.map(([c,{selector:s}])=>n===s?"":`:not(${s})`):[];A({[`${d}${a.join("")}`]:t})}if(!I\|\|i!==w){if(l)if(w&&v!==""){const a=n?b.map(([c,{selector:s}])=>n===s?"":`:not(${s})`):[];A({[l]:{[`${d}${a.join("")}`]:t}})}else A({[l]:{[`${d}`]:t}});n&&A({[`${d}${n}`]:t})}}),Object.entries(m).forEach(([i,l])=>{const{configKey:n,opacityUtility:d,isColorUtility:t,opacityVariable:a,prefix:c,css:s}=L[i];if(!D(n)&&!H[n])return;const g=re(n,[]),f=g.filter(o=>!K.includes(o)&&o!==e&&K.every(p=>!o.startsWith(`${p}:`))&&!o.startsWith(`${e}:`)),h=(e?g.includes(e):!1)\|\|K.every(o=>g.includes(o));if(!k&&!h&&(console.warn(`tailwindcss-theme-variants: ${E?"":"the IE11 compatible "}semantic utility classes for the "${i}" utility could not generate because the variants needed did not exist. this can be fixed by listing the theme group variant "${e}" in the \`variants.${n}\` array in your Tailwind CSS configuration. there is no way to silence this warning, so if you don't care, ignore it`),E))return;Object.entries(l).forEach(([o,p])=>{const U=Array.from(p.entries()).map(([C,W])=>{const Z=`${C}${y}${F("prefix","")}${c}`;return q.includes(W)?Z:`${Z}-${W}`}),R=q.includes(o)?`.${_(c)}`:`.${_(`${c}-${o}`)}`;!k&&h&&J({[R]:{[`@apply ${U.join(" ")}`]:""}},f);let u=`var(--${o})`,V=!1;if(t&&(u=`rgb(var(--${o}))`,d&&(D(d)?(u=`rgba(var(--${o}), var(--${a}))`,V=!0):u=`rgb(var(--${o}))`)),!E){const C=k?u:`${u} !important`;J(s({computedClass:R,computedValue:C,onTailwind2:Y,opacityVariable:a,opacityVariableUsed:V}),f)}})})}else if(le)throw new TypeError("tailwindcss-theme-variants: either all themes must define `semantics` or none do. this can be fixed by TODO")},({themes:e})=>{const r=Object.values(e).every($=>Object.prototype.hasOwnProperty.call($,"semantics"));return r?(console.warn("tailwindcss-theme-variants: because you're using the `semantics` feature, the experimental Tailwind feature `applyComplexClasses` was enabled for you (there is no way to silence this warning)"),console.warn("tailwindcss-theme-variants: you should see a warning from Tailwind core explaining so below:"),{experimental:{applyComplexClasses:!0}}):{}});var we=B;const ve=B,$e=B;

tailwindcss-theme-variants - npm Package Compare versions

New alerts

Improved metrics

Worsened metrics