tailwind-bevel/dist/index.mjs.map

A tailwind plugin for bevel corners

{"version":3,"sources":["../node_modules/.pnpm/tailwindcss@3.4.3_ts-node@10.9.2/node_modules/tailwindcss/lib/util/createPlugin.js","../node_modules/.pnpm/tailwindcss@3.4.3_ts-node@10.9.2/node_modules/tailwindcss/lib/public/create-plugin.js","../node_modules/.pnpm/tailwindcss@3.4.3_ts-node@10.9.2/node_modules/tailwindcss/plugin.js","../node_modules/.pnpm/tailwindcss@3.4.3_ts-node@10.9.2/node_modules/tailwindcss/lib/util/flattenColorPalette.js","../src/index.ts","../src/utils/gradient.ts","../src/utils/factory/BevelFactory.ts"],"sourcesContent":["\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n    value: true\n});\nObject.defineProperty(exports, \"default\", {\n    enumerable: true,\n    get: function() {\n        return _default;\n    }\n});\nfunction createPlugin(plugin, config) {\n    return {\n        handler: plugin,\n        config\n    };\n}\ncreatePlugin.withOptions = function(pluginFunction, configFunction = ()=>({})) {\n    const optionsFunction = function(options) {\n        return {\n            __options: options,\n            handler: pluginFunction(options),\n            config: configFunction(options)\n        };\n    };\n    optionsFunction.__isOptionsFunction = true;\n    // Expose plugin dependencies so that `object-hash` returns a different\n    // value if anything here changes, to ensure a rebuild is triggered.\n    optionsFunction.__pluginFunction = pluginFunction;\n    optionsFunction.__configFunction = configFunction;\n    return optionsFunction;\n};\nconst _default = createPlugin;\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n    value: true\n});\nObject.defineProperty(exports, \"default\", {\n    enumerable: true,\n    get: function() {\n        return _default;\n    }\n});\nconst _createPlugin = /*#__PURE__*/ _interop_require_default(require(\"../util/createPlugin\"));\nfunction _interop_require_default(obj) {\n    return obj && obj.__esModule ? obj : {\n        default: obj\n    };\n}\nconst _default = _createPlugin.default;\n","let createPlugin = require('./lib/public/create-plugin')\nmodule.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", {\n    value: true\n});\nObject.defineProperty(exports, \"default\", {\n    enumerable: true,\n    get: function() {\n        return _default;\n    }\n});\nconst flattenColorPalette = (colors)=>Object.assign({}, ...Object.entries(colors !== null && colors !== void 0 ? colors : {}).flatMap(([color, values])=>typeof values == \"object\" ? Object.entries(flattenColorPalette(values)).map(([number, hex])=>({\n                [color + (number === \"DEFAULT\" ? \"\" : `-${number}`)]: hex\n            })) : [\n            {\n                [`${color}`]: values\n            }\n        ]));\nconst _default = flattenColorPalette;\n","import twPlugin from \"tailwindcss/plugin\";\n\n// @ts-ignore\nimport flattenPallete from \"tailwindcss/lib/util/flattenColorPalette\";\n\nimport { createBackgroundGradientDirections } from \"./utils/gradient\";\nimport { BevelFactory } from \"./utils/factory/BevelFactory\";\n\nconst plugin = twPlugin(function ({ matchUtilities, matchComponents, addUtilities, theme }) {\n  matchComponents(\n    {\n      \"b-border\": (val) => {\n        const fac = new BevelFactory(\"bevel\", \"4px\");\n        const path = fac.generateShape(true).toClipPath();\n\n        return {\n          \"&::before\": {\n            content: '\"\"',\n            \"--bevel-border\": val ? val : \"1px\",\n\n            backgroundColor: \"var(--bevel-background, none)\",\n            backgroundImage: \"var(--bevel-background-image, none)\",\n            position: \"absolute\",\n            inset: \"0\",\n            zIndex: \"-1\",\n            transition: \"inherit\",\n            borderRadius: \"inherit\",\n            \"clip-path\": path,\n          },\n          position: \"relative\",\n        };\n      },\n    },\n    { values: theme(\"borderWidth\") }\n  );\n\n  matchComponents(\n    {\n      bevel: (val) => {\n        const fac = new BevelFactory(\"bevel\", \"4px\");\n        const path = fac.generateShape().toClipPath();\n\n        return {\n          \"--bevel-offset\": val,\n          \"clip-path\": path,\n        };\n      },\n    },\n    {\n      values: theme(\"width\"),\n    }\n  );\n\n  matchUtilities(\n    { \"bevel-color\": (value) => ({ \"--bevel-background\": value }) },\n    { values: flattenPallete(theme(\"colors\")) }\n  );\n  matchUtilities({ \"bevel-offset\": (value) => ({ \"--bevel-offset\": value }) }, { values: theme(\"width\") });\n\n  //   Beven gradients\n  const bevelGradientDirections = createBackgroundGradientDirections(\"bevel\");\n  addUtilities(bevelGradientDirections);\n\n  matchUtilities(\n    {\n      \"bevel-to\": (value) => {\n        return {\n          \"--tw-bevel-gradient-to\": `${value} 100%`,\n        };\n      },\n    },\n    { values: flattenPallete(theme(\"colors\")) }\n  );\n\n  matchUtilities(\n    {\n      \"bevel-from\": (value) => {\n        return {\n          \"--tw-bevel-gradient-from\": `${value} 0%`,\n          \"--tw-bevel-gradient-stops\": \"var(--tw-bevel-gradient-from), var(--tw-bevel-gradient-to)\",\n        };\n      },\n    },\n    { values: flattenPallete(theme(\"colors\")) }\n  );\n});\n\nexport default plugin;\n","const directions = [\"top\", \"top right\", \"right\", \"bottom right\", \"bottom\", \"bottom left\", \"left\", \"top left\"] as const;\n\nfunction getDirectName(direction: (typeof directions)[number]) {\n  return direction.split(\" \").reduce((acc, curr) => `${acc}${curr.charAt(0)}`, \"\");\n}\n\nexport function createBackgroundGradientDirections(label: string) {\n  return directions.map((direction) => {\n    return {\n      [`.${label}-gradient-to-${getDirectName(direction)}`]: {\n        [`--${label}-background-image`]: `linear-gradient(to ${direction}, var(--tw-${label}-gradient-stops))`,\n      },\n    };\n  });\n}\n\nexport function createFromGradientComponent(color: string) {\n  return {\n    [`--tw-gradient-stops`]: `var(--tw-gradient-from, ${color}), var(--tw-gradient-to, ${color})`,\n  };\n}\n\nexport function createToGradientComponent(label: string) {\n  return {\n    [`.tw-${label}-gradient-to`]: {\n      [`--tw-${label}-gradient-to`]: \"var(--tw-gradient-color)\",\n    },\n  };\n}\n","type BevelShapeField = \"offset\" | \"shift\" | `${number}%` | `${number}`;\ntype HollowBevelShapeField = \"offsetInset\" | \"shiftInset\" | `${number}%` | `${number}`;\n\nconst hollowNamesMap = {\n  offset: \"offsetInset\",\n  shift: \"shiftInset\",\n} as Record<string, string>;\n\nexport class BevelFactory {\n  public static BEVEL_SHAPE: Array<[BevelShapeField, BevelShapeField]> = [\n    [\"offset\", \"0\"],\n    [\"shift\", \"0\"],\n    [\"100%\", \"offset\"],\n    [\"100%\", \"shift\"],\n  ];\n\n  private _variable: string = \"bevel\";\n\n  private currentShape: Array<Array<string>> = [];\n\n  constructor(offsetVar: string, private defaultOffset = \"4px\") {\n    this._variable = offsetVar;\n  }\n\n  public generateShape(hollow = false) {\n    const fullShape = BevelFactory.getFullBevelShape();\n    const normalShape = fullShape.map((shape) => this.mapBevelShape(shape));\n    this.currentShape = Array.from(normalShape);\n\n    if (hollow) {\n      const rawShape = BevelFactory.newHorizontalShapeReverse().map((e) => e.map((e) => hollowNamesMap[e] ?? e));\n      const hollowShape = this.mapHollowShape(rawShape as Array<[HollowBevelShapeField, HollowBevelShapeField]>);\n\n      {\n        this.currentShape.push(...hollowShape);\n\n        // Closing the path, for the hollow shape, we need to close calling the first point we init\n        // and the last point of normal shape\n        this.currentShape.push(hollowShape[0]);\n        this.currentShape.push(normalShape[normalShape.length - 1]);\n      }\n    }\n\n    return this;\n  }\n\n  public toClipPath() {\n    return `polygon(${this.currentShape.map((shape) => shape.join(\" \")).join(\", \")})`;\n  }\n\n  public static newShape() {\n    return Array.from(BevelFactory.BEVEL_SHAPE);\n  }\n\n  private getCssVariables() {\n    const offset = `var(--${this.offsetVar}-offset, ${this.defaultOffset})`;\n    const shift = `calc(100% - ${offset})`;\n\n    const border = `var(--${this.offsetVar}-border)`;\n\n    const shiftInset = `calc(${shift} - ${border} / 2)`;\n    const offsetInset = `calc(${offset} + ${border} / 2)`;\n\n    return {\n      offset,\n      shift,\n      border,\n      shiftInset,\n      offsetInset,\n    };\n  }\n\n  private mapHollowShape(shape: Array<[HollowBevelShapeField, HollowBevelShapeField]>) {\n    const variables = this.getCssVariables();\n    const first_half = shape.map((r) =>\n      r.map((e) => {\n        const fromVar = (variables as Record<string, string>)[e];\n        if (fromVar) return fromVar;\n\n        if (e == \"100%\") return `calc(100% - ${variables.border})`;\n\n        return variables.border;\n      })\n    );\n\n    const second_half = first_half.map((e) => Array.from(e).reverse()).reverse();\n\n    return first_half.concat(second_half as Array<[HollowBevelShapeField, HollowBevelShapeField]>);\n  }\n\n  private mapBevelShape(shape: [BevelShapeField, BevelShapeField]) {\n    const variables = this.getCssVariables() as Record<string, string>;\n    return shape.map((e) => variables[e] ?? e);\n  }\n\n  /**\n   * Getters and Setters\n   */\n  get offsetVar(): string {\n    return this._variable;\n  }\n\n  set offsetVar(offsetVar: string) {\n    if (!offsetVar.startsWith(\"--\")) throw new Error(\"Invalid variable name, must start with '--'\");\n    this._variable = offsetVar;\n  }\n\n  /**\n   * Static Utilities\n   */\n  public static getFullBevelShape() {\n    const first_half = this.newShape();\n\n    const second_half = this.newShape()\n      .map((e) => Array.from(e).reverse())\n      .reverse();\n\n    return first_half.concat(second_half as Array<[BevelShapeField, BevelShapeField]>);\n  }\n\n  public static newHorizontalShapeReverse() {\n    const shape = this.newShape();\n    return shape.map((e) => Array.from(e).reverse());\n  }\n}\n"],"mappings":"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","names":["require_createPlugin","__commonJSMin","exports","_default","createPlugin","plugin","config","pluginFunction","configFunction","optionsFunction","options","require_create_plugin","__commonJSMin","exports","_default","_createPlugin","_interop_require_default","obj","require_plugin","__commonJSMin","exports","module","createPlugin","require_flattenColorPalette","__commonJSMin","exports","_default","flattenColorPalette","colors","color","values","number","hex","import_plugin","import_flattenColorPalette","directions","getDirectName","direction","acc","curr","createBackgroundGradientDirections","label","hollowNamesMap","_BevelFactory","offsetVar","defaultOffset","hollow","normalShape","shape","rawShape","e","_a","hollowShape","offset","shift","border","shiftInset","offsetInset","variables","first_half","r","fromVar","second_half","BevelFactory","plugin","twPlugin","matchUtilities","matchComponents","addUtilities","theme","val","path","BevelFactory","value","flattenPallete","bevelGradientDirections","createBackgroundGradientDirections","src_default"]}