tailwindcss-grid-areas/dist/index.mjs

A Tailwind CSS plugin designed to streamline the creation of utility classes for defining grid areas in your layouts. This plugin simplifies the process of specifying grid areas, automatically generating corresponding utility classes that seamlessly integ

import u from"tailwindcss/plugin";const A={".grid-areas-none":{"grid-template-areas":"none"},".grid-areas-inherit":{"grid-template-areas":"inherit"},".grid-areas-initial":{"grid-template-areas":"initial"},".grid-areas-revert":{"grid-template-areas":"revert"},".grid-areas-revert-layer":{"grid-template-areas":"revert-layer"},".grid-areas-unset":{"grid-template-areas":"unset"}},h={".area-auto":{"grid-area":"auto"},".area-span":{"grid-area":"span"}},$=s=>{const t=e=>{const[i,r]=e.split("*");if(!i)return"";if(!r)return i;const n=parseInt(r,10);if(isNaN(n))throw new Error(`Invalid area count: ${r}`);return`${i} `.repeat(n).trim()};return s.split(" ").map(e=>e.includes("*")?t(e):e).join(" ")},w=s=>{if(s==="")return"";const t=s.split(",");return(t.some(e=>e.includes("*"))?t.map($):t).map(e=>`"${e}"`).join(" ")},v=(s,t)=>{const e=new Set,i={},r={},n=l=>{const o=l.flatMap(a=>a.split(" "));for(const a of o)e.has(a)||(e.add(a),r[`.area-${a}`]={"grid-area":a});return l.map(a=>`"${a}"`).join(" ")};for(const[l,o]of Object.entries(s)){const a=`.grid-areas-${l}`;if(Array.isArray(o))i[a]={"grid-template-areas":n(o)};else{const p=t("screens");for(const[d,f]of Object.entries(o)){const g=c=>{const m={"grid-template-areas":n(f)};i[a]={...i[a],...c?{[c]:m}:m}};if(d==="base")g();else if(p&&d in p){const c=`@media (min-width: ${t(`screens.${d}`)})`;g(c)}else throw new Error(`The screen ${d} not exist in your screens list of Tailwind Config, to solve add "${d}" to screens list`)}}}return{gridTemplateAreas:i,gridAreas:r}},y=u.withOptions(s=>({addUtilities:t,matchUtilities:e,theme:i})=>{if(t({...A,...h}),s){const{gridTemplateAreas:r,gridAreas:n}=v(s,i);t({...r,...n})}e({"grid-areas":r=>({"grid-template-areas":w(r)}),area:r=>({"grid-area":r})})});export{y as gridAreas};