tailwind-rounded-out
Version:
Tailwind CSS plugin for outer-rounded corners with background inheritance
2 lines (1 loc) • 2.79 kB
JavaScript
import k from"tailwindcss/plugin";var e={bottom:{top:"auto",bottom:"0"},top:{top:"0",bottom:"auto"},left:{left:"0",right:"auto"},right:{left:"auto",right:"0"}},f=["","b","bl","br","t","tl","tr","l","lt","lb","r","rt","rb"];var i="calc(var(--tw-rounded-out) * -1)",p={width:"var(--tw-rounded-out)",position:"absolute",background:"inherit",backgroundColor:"inherit",aspectRatio:"1",maskImage:"radial-gradient(100% 100% at center, transparent calc(50% - 0.25px), black calc(50% + 0.25px))",maskSize:"200% 200%",maskPosition:"100% 100%",pointerEvents:"none",display:"none",overflow:"hidden"};var a=(o,r)=>{let t={};return o.before&&(t["&::before"]={...p,...o.before,maskPosition:r.before,content:'""',display:"block"}),o.after&&(t["&::after"]={...p,...o.after,maskPosition:r.after,content:'""',display:"block"}),t};var c=o=>({"":{positions:{before:{...e.bottom,left:i},after:{...e.bottom,right:i}},maskPositions:{before:"100% 100%",after:"0% 100%"}},b:{positions:{before:{...e.bottom,left:i},after:{...e.bottom,right:i}},maskPositions:{before:"100% 100%",after:"0% 100%"}},bl:{positions:{before:{...e.bottom,left:i}},maskPositions:{before:"100% 100%"}},br:{positions:{after:{...e.bottom,right:i}},maskPositions:{after:"0% 100%"}},t:{positions:{before:{...e.top,left:i},after:{...e.top,right:i}},maskPositions:{before:"100% 0%",after:"0% 0%"}},tl:{positions:{before:{...e.top,left:i}},maskPositions:{before:"100% 0%"}},tr:{positions:{after:{...e.top,right:i}},maskPositions:{after:"0% 0%"}},l:{positions:{before:{...e.left,top:i},after:{...e.left,bottom:i}},maskPositions:{before:"0% 100%",after:"0% 0%"}},lt:{positions:{before:{...e.left,top:i}},maskPositions:{before:"0% 100%"}},lb:{positions:{after:{...e.left,bottom:i}},maskPositions:{after:"0% 0%"}},r:{positions:{before:{...e.right,top:i},after:{...e.right,bottom:i}},maskPositions:{before:"100% 100%",after:"100% 0%"}},rt:{positions:{before:{...e.right,top:i}},maskPositions:{before:"100% 100%"}},rb:{positions:{after:{...e.right,bottom:i}},maskPositions:{after:"100% 0%"}}})[o],b=(o,r)=>{let t=c(o);if(!t)return{};let s={...r("borderRadius")};delete s.full;let n={...s,...r("roundedOut",{DEFAULT:"0.5rem"})};return{...o?{}:{".rounded-out":{"--tw-rounded-out":n.DEFAULT,...a(t.positions,t.maskPositions)}},...Object.entries(n).reduce((g,[m,P])=>({...g,[`.rounded-out${o?`-${o}`:""}${m==="DEFAULT"?"":`-${m}`}`]:{"--tw-rounded-out":P,...a(t.positions,t.maskPositions)}}),{})}},l=(o,r)=>{let t=c(o);return t?{"--tw-rounded-out":r,...a(t.positions,t.maskPositions)}:{}};var u=o=>f.reduce((r,t)=>({...r,...b(t,o)}),{}),d=(o,r)=>{f.forEach(t=>{let s=t?`-${t}`:"";o({[`rounded-out${s}`]:n=>l(t,n)},{values:r("roundedOut"),type:["length","any"]})})};var I=k(({addComponents:o,matchComponents:r,theme:t})=>{o(u(t)),d(r,t)});export{I as default};