tailwind-bevel
Version:
A tailwind plugin for bevel corners
2 lines • 4.77 kB
JavaScript
;Object.defineProperty(exports, "__esModule", {value: true});var H=Object.create;var g=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var p=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports);var I=(t,e,r,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of x(e))!C.call(t,o)&&o!==r&&g(t,o,{get:()=>e[o],enumerable:!(a=O(e,o))||a.enumerable});return t};var m=(t,e,r)=>(r=t!=null?H(j(t)):{},I(e||!t||!t.__esModule?g(r,"default",{value:t,enumerable:!0}):r,t));var w=p(f=>{"use strict";Object.defineProperty(f,"__esModule",{value:!0});Object.defineProperty(f,"default",{enumerable:!0,get:function(){return V}});function S(t,e){return{handler:t,config:e}}S.withOptions=function(t,e=()=>({})){let r=function(a){return{__options:a,handler:t(a),config:e(a)}};return r.__isOptionsFunction=!0,r.__pluginFunction=t,r.__configFunction=e,r};var V=S});var _=p(h=>{"use strict";Object.defineProperty(h,"__esModule",{value:!0});Object.defineProperty(h,"default",{enumerable:!0,get:function(){return M}});var k=E(w());function E(t){return t&&t.__esModule?t:{default:t}}var M=k.default});var y=p((W,$)=>{"use strict";var d=_();$.exports=(d.__esModule?d:{default:d}).default});var F=p(v=>{"use strict";Object.defineProperty(v,"__esModule",{value:!0});Object.defineProperty(v,"default",{enumerable:!0,get:function(){return R}});var B=t=>Object.assign({},...Object.entries(t!=null?t:{}).flatMap(([e,r])=>typeof r=="object"?Object.entries(B(r)).map(([a,o])=>({[e+(a==="DEFAULT"?"":`-${a}`)]:o})):[{[`${e}`]:r}])),R=B});var A=m(y()),c=m(F());var D=["top","top right","right","bottom right","bottom","bottom left","left","top left"];function G(t){return t.split(" ").reduce((e,r)=>`${e}${r.charAt(0)}`,"")}function P(t){return D.map(e=>({[`.${t}-gradient-to-${G(e)}`]:{[`--${t}-background-image`]:`linear-gradient(to ${e}, var(--tw-${t}-gradient-stops))`}}))}var q={offset:"offsetInset",shift:"shiftInset"},l=class l{constructor(e,r="4px"){this.defaultOffset=r;this._variable="bevel";this.currentShape=[];this._variable=e}generateShape(e=!1){let a=l.getFullBevelShape().map(o=>this.mapBevelShape(o));if(this.currentShape=Array.from(a),e){let o=l.newHorizontalShapeReverse().map(s=>s.map(i=>{var b;return(b=q[i])!=null?b:i})),n=this.mapHollowShape(o);this.currentShape.push(...n),this.currentShape.push(n[0]),this.currentShape.push(a[a.length-1])}return this}toClipPath(){return`polygon(${this.currentShape.map(e=>e.join(" ")).join(", ")})`}static newShape(){return Array.from(l.BEVEL_SHAPE)}getCssVariables(){let e=`var(--${this.offsetVar}-offset, ${this.defaultOffset})`,r=`calc(100% - ${e})`,a=`var(--${this.offsetVar}-border)`,o=`calc(${r} - ${a} / 2)`,n=`calc(${e} + ${a} / 2)`;return{offset:e,shift:r,border:a,shiftInset:o,offsetInset:n}}mapHollowShape(e){let r=this.getCssVariables(),a=e.map(n=>n.map(s=>{let i=r[s];return i||(s=="100%"?`calc(100% - ${r.border})`:r.border)})),o=a.map(n=>Array.from(n).reverse()).reverse();return a.concat(o)}mapBevelShape(e){let r=this.getCssVariables();return e.map(a=>{var o;return(o=r[a])!=null?o:a})}get offsetVar(){return this._variable}set offsetVar(e){if(!e.startsWith("--"))throw new Error("Invalid variable name, must start with '--'");this._variable=e}static getFullBevelShape(){let e=this.newShape(),r=this.newShape().map(a=>Array.from(a).reverse()).reverse();return e.concat(r)}static newHorizontalShapeReverse(){return this.newShape().map(r=>Array.from(r).reverse())}};l.BEVEL_SHAPE=[["offset","0"],["shift","0"],["100%","offset"],["100%","shift"]];var u=l;var z=(0,A.default)(function({matchUtilities:t,matchComponents:e,addUtilities:r,theme:a}){e({"b-border":n=>{let i=new u("bevel","4px").generateShape(!0).toClipPath();return{"&::before":{content:'""',"--bevel-border":n||"1px",backgroundColor:"var(--bevel-background, none)",backgroundImage:"var(--bevel-background-image, none)",position:"absolute",inset:"0",zIndex:"-1",transition:"inherit",borderRadius:"inherit","clip-path":i},position:"relative"}}},{values:a("borderWidth")}),e({bevel:n=>{let i=new u("bevel","4px").generateShape().toClipPath();return{"--bevel-offset":n,"clip-path":i}}},{values:a("width")}),t({"bevel-color":n=>({"--bevel-background":n})},{values:(0,c.default)(a("colors"))}),t({"bevel-offset":n=>({"--bevel-offset":n})},{values:a("width")});let o=P("bevel");r(o),t({"bevel-to":n=>({"--tw-bevel-gradient-to":`${n} 100%`})},{values:(0,c.default)(a("colors"))}),t({"bevel-from":n=>({"--tw-bevel-gradient-from":`${n} 0%`,"--tw-bevel-gradient-stops":"var(--tw-bevel-gradient-from), var(--tw-bevel-gradient-to)"})},{values:(0,c.default)(a("colors"))})}),Z= exports.default =z;exports.default = Z;
//# sourceMappingURL=index.js.map