css2tailwind/dist/index.mjs.map

<p align="center"> <a href="https://www.npmjs.com/package/css2tailwind" target="_blank" rel="noopener noreferrer"> <img src="https://api.iconify.design/bx:bxl-tailwind-css.svg?color=%23fdb4e2" alt="logo" width='100'/></a> </p>

{"version":3,"sources":["../src/utils.ts","../src/index.ts"],"sourcesContent":["import { CustomSelect } from \"./types\";\n\nexport const hasNegative = (val: string): ['-' | '', string] => [\n  val[0] === '-' ? '-' : '',\n  val[0] === '-' ? val.slice(1) : val,\n];\n\nexport const getCustomVal = (val: string) => {\n  // FIGMA: color: var(--neutral-1, #2F2F2F)\n  if (val.startsWith('var') && val.includes(',')) return val?.match(/#[0-9a-zA-Z]{3,6}/g)?.[0] ?? val;\n\n  val = val.replace(/\\s/g, '_');\n  for (let index = 1; index < val.length; index) {\n    const char = val[index];\n    if (char === '_' && char === val[index - 1]) {\n      val = val.slice(0, index) + val.slice(index + 1);\n    } else {\n      index++;\n    }\n  }\n  return val;\n};\n\nexport const isColor = (str: string, joinLinearGradient = false) => {\n  if (str.startsWith('var')) return true;\n\n  const namedColors = [\n    'initial',\n    'inherit',\n    'currentColor',\n    'currentcolor',\n    'transparent',\n    'aliceblue',\n    'antiquewhite',\n    'aqua',\n    'aquamarine',\n    'azure',\n    'beige',\n    'bisque',\n    'black',\n    'blanchedalmond',\n    'blue',\n    'blueviolet',\n    'brown',\n    'burlywood',\n    'cadetblue',\n    'chartreuse',\n    'chocolate',\n    'coral',\n    'cornflowerblue',\n    'cornsilk',\n    'crimson',\n    'cyan',\n    'darkblue',\n    'darkcyan',\n    'darkgoldenrod',\n    'darkgray',\n    'darkgrey',\n    'darkgreen',\n    'darkkhaki',\n    'darkmagenta',\n    'darkolivegreen',\n    'darkorange',\n    'darkorchid',\n    'darkred',\n    'darksalmon',\n    'darkseagreen',\n    'darkslateblue',\n    'darkslategray',\n    'darkslategrey',\n    'darkturquoise',\n    'darkviolet',\n    'deeppink',\n    'deepskyblue',\n    'dimgray',\n    'dimgrey',\n    'dodgerblue',\n    'firebrick',\n    'floralwhite',\n    'forestgreen',\n    'fuchsia',\n    'gainsboro',\n    'ghostwhite',\n    'gold',\n    'goldenrod',\n    'gray',\n    'grey',\n    'green',\n    'greenyellow',\n    'honeydew',\n    'hotpink',\n    'indianred',\n    'indigo',\n    'ivory',\n    'khaki',\n    'lavender',\n    'lavenderblush',\n    'lawngreen',\n    'lemonchiffon',\n    'lightblue',\n    'lightcoral',\n    'lightcyan',\n    'lightgoldenrodyellow',\n    'lightgray',\n    'lightgrey',\n    'lightgreen',\n    'lightpink',\n    'lightsalmon',\n    'lightseagreen',\n    'lightskyblue',\n    'lightslategray',\n    'lightslategrey',\n    'lightsteelblue',\n    'lightyellow',\n    'lime',\n    'limegreen',\n    'linen',\n    'magenta',\n    'maroon',\n    'mediumaquamarine',\n    'mediumblue',\n    'mediumorchid',\n    'mediumpurple',\n    'mediumseagreen',\n    'mediumslateblue',\n    'mediumspringgreen',\n    'mediumturquoise',\n    'mediumvioletred',\n    'midnightblue',\n    'mintcream',\n    'mistyrose',\n    'moccasin',\n    'navajowhite',\n    'navy',\n    'oldlace',\n    'olive',\n    'olivedrab',\n    'orange',\n    'orangered',\n    'orchid',\n    'palegoldenrod',\n    'palegreen',\n    'paleturquoise',\n    'palevioletred',\n    'papayawhip',\n    'peachpuff',\n    'peru',\n    'pink',\n    'plum',\n    'powderblue',\n    'purple',\n    'rebeccapurple',\n    'red',\n    'rosybrown',\n    'royalblue',\n    'saddlebrown',\n    'salmon',\n    'sandybrown',\n    'seagreen',\n    'seashell',\n    'sienna',\n    'silver',\n    'skyblue',\n    'slateblue',\n    'slategray',\n    'slategrey',\n    'snow',\n    'springgreen',\n    'steelblue',\n    'tan',\n    'teal',\n    'thistle',\n    'tomato',\n    'turquoise',\n    'violet',\n    'wheat',\n    'white',\n    'whitesmoke',\n    'yellow',\n    'yellowgreen',\n  ];\n  const regexp =\n    /^\\s*#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})\\s*$|^\\s*rgb\\(\\s*(\\d{1,3}|[a-z]+)\\s*,\\s*(\\d{1,3}|[a-z]+)\\s*,\\s*(\\d{1,3}|[a-z]+)\\s*\\)\\s*$|^\\s*rgba\\(\\s*(\\d{1,3}|[a-z]+)\\s*,\\s*(\\d{1,3}|[a-z]+)\\s*,\\s*(\\d{1,3}|[a-z]+)\\s*,\\s*(\\d*(\\.\\d+)?)\\s*\\)\\s*$|^\\s*hsl\\(\\s*(\\d+)\\s*,\\s*(\\d*(\\.\\d+)?%)\\s*,\\s*(\\d*(\\.\\d+)?%)\\)\\s*$|^\\s*hsla\\((\\d+)\\s*,\\s*([\\d.]+)%\\s*,\\s*([\\d.]+)%\\s*,\\s*(\\d*(\\.\\d+)?)\\)\\s*$/i;\n  return (\n    regexp.test(str) ||\n    namedColors.includes(str) ||\n    (joinLinearGradient && /^\\s*linear-gradient\\([\\w\\W]+?\\)\\s*$/.test(str))\n  );\n};\n\nexport const isUnit = (str: string) => {\n  if (str.includes('calc')) return true;\n  if (str.startsWith('var')) return true;\n\n  return (\n    [\n      'em',\n      'ex',\n      'ch',\n      'rem',\n      'vw',\n      'vh',\n      'vmin',\n      'vmax',\n      'cm',\n      'mm',\n      'in',\n      'pt',\n      'pc',\n      'px',\n      'min-content',\n      'mincontent',\n      'max-content',\n      'maxcontent',\n      'fit-content',\n      'fitcontent',\n      'deg',\n      'grad',\n      'rad',\n      'turn',\n      'ms',\n      's',\n      'Hz',\n      'kHz',\n      '%',\n      'length',\n      'inherit',\n      'thick',\n      'medium',\n      'thin',\n      'initial',\n      'auto',\n    ].includes(str.replace(/[.\\d\\s-]/g, '')) ||\n    /^[-.\\d]+$/.test(str.trim()) ||\n    /^var\\(.+\\)$/.test(str)\n  );\n};\n\nexport const getUnitMetacharactersVal = (\n  val: string,\n  excludes: CustomSelect[] = []\n): string | undefined => {\n  if (/^\\d+\\.[1-9]{2,}%$/.test(val)) {\n    val = `${Number(val.slice(0, -1))\n      .toFixed(6)\n      .replace(/(\\.[1-9]{2})\\d+/, '$1')}%`;\n  }\n  const config: Record<string, string> = {\n    auto: 'auto',\n    '50%': '1/2',\n    '33.33%': '1/3',\n    '66.66%': '2/3',\n    '25%': '1/4',\n    '75%': '3/4',\n    '20%': '1/5',\n    '40%': '2/5',\n    '60%': '3/5',\n    '80%': '4/5',\n    '16.66%': '1/6',\n    '83.33%': '5/6',\n    '8.33%': '1/12',\n    '41.66%': '5/12',\n    '58.33%': '7/12',\n    '91.66%': '11/12',\n    '100%': 'full',\n    '100vw': 'screen',\n    '100vh': 'screen',\n    'min-content': 'min',\n    'max-content': 'max',\n  };\n  excludes.forEach((key) => {\n    delete config[key];\n  });\n  return config[val];\n};\n\nexport const getRemDefaultVal = (val: string) => {\n  return {\n    '0px': '0',\n    '1px': 'px',\n    '0.125rem': '0.5',\n    '0.25rem': '1',\n    '0.375rem': '1.5',\n    '0.5rem': '2',\n    '0.625rem': '2.5',\n    '0.75rem': '3',\n    '0.875rem': '3.5',\n    '1rem': '4',\n    '1.25rem': '5',\n    '1.5rem': '6',\n    '1.75rem': '7',\n    '2rem': '8',\n    '2.25rem': '9',\n    '2.5rem': '10',\n    '2.75rem': '11',\n    '3rem': '12',\n    '3.5rem': '14',\n    '4rem': '16',\n    '5rem': '20',\n    '6rem': '24',\n    '7rem': '28',\n    '8rem': '32',\n    '9rem': '36',\n    '10rem': '40',\n    '11rem': '44',\n    '12rem': '48',\n    '13rem': '52',\n    '14rem': '56',\n    '15rem': '60',\n    '16rem': '64',\n    '18rem': '72',\n    '20rem': '80',\n    '24rem': '96',\n  }[val];\n};\n\nexport const getBorderRadiusDefaultVal = (val: string) => {\n  return {\n    '0px': '-none',\n    '0.125rem': '-sm',\n    '0.25rem': 'null',\n    '0.375rem': '-md',\n    '0.5rem': '-lg',\n    '0.75rem': '-xl',\n    '1rem': '-2xl',\n    '1.5rem': '-3xl',\n    '9999px': '-full',\n  }[val];\n};\n\nexport const getFilterDefaultVal = (val: string) => {\n  return {\n    'blur(0)': 'blur-none',\n    'blur(4px)': 'blur-sm',\n    'blur(8px)': 'blur',\n    'blur(12px)': 'blur-md',\n    'blur(16px)': 'blur-lg',\n    'blur(24px)': 'blur-xl',\n    'blur(40px)': 'blur-2xl',\n    'blur(64px)': 'blur-3xl',\n    'brightness(0)': 'brightness-0',\n    'brightness(.5)': 'brightness-50',\n    'brightness(.75)': 'brightness-75',\n    'brightness(.9)': 'brightness-90',\n    'brightness(.95)': 'brightness-95',\n    'brightness(1)': 'brightness-100',\n    'brightness(1.05)': 'brightness-105',\n    'brightness(1.1)': 'brightness-110',\n    'brightness(1.25)': 'brightness-125',\n    'brightness(1.5)': 'brightness-150',\n    'brightness(2)': 'brightness-200',\n    'contrast(0)': 'contrast-0',\n    'contrast(.5)': 'contrast-50',\n    'contrast(.75)': 'contrast-75',\n    'contrast(1)': 'contrast-100',\n    'contrast(1.25)': 'contrast-125',\n    'contrast(1.5)': 'contrast-150',\n    'contrast(2)': 'contrast-200',\n    'drop-shadow(0 1px 1px rgba(0,0,0,0.05))': 'drop-shadow-sm',\n    'drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06))':\n      'drop-shadow',\n    'drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06))':\n      'drop-shadow-md',\n    'drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1))':\n      'drop-shadow-lg',\n    'drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08))':\n      'drop-shadow-xl',\n    'drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15))': 'drop-shadow-2xl',\n    'drop-shadow(0 0 #0000)': 'drop-shadow-none',\n    'grayscale(0)': 'grayscale-0',\n    'grayscale(1)': 'grayscale',\n    'hue-rotate(-180deg)': '-hue-rotate-180',\n    'hue-rotate(-90deg)': '-hue-rotate-90',\n    'hue-rotate(-60deg)': '-hue-rotate-60',\n    'hue-rotate(-30deg)': '-hue-rotate-30',\n    'hue-rotate(-15deg)': '-hue-rotate-15',\n    'hue-rotate(0deg)': 'hue-rotate-0',\n    'hue-rotate(15deg)': 'hue-rotate-15',\n    'hue-rotate(30deg)': 'hue-rotate-30',\n    'hue-rotate(60deg)': 'hue-rotate-60',\n    'hue-rotate(90deg)': 'hue-rotate-90',\n    'hue-rotate(180deg)': 'hue-rotate-180',\n    'invert(0)': 'invert-0',\n    'invert(1)': 'invert',\n    'saturate(0)': 'saturate-0',\n    'saturate(.5)': 'saturate-50',\n    'saturate(1)': 'saturate-100',\n    'saturate(1.5)': 'saturate-150',\n    'saturate(2)': 'saturate-200',\n    'sepia(0)': 'sepia-0',\n    'sepia(1)': 'sepia',\n  }[val];\n};\n\nexport const getFontSizeDefaultVal = (val: string) => {\n  const fontSize: Record<string, string> = {\n    '12px': 'text-xs',\n    '14px': 'text-sm',\n    '16px': 'text-base',\n    '18px': 'text-lg',\n    '20px': 'text-xl',\n    '24px': 'text-2xl',\n    '30px': 'text-3xl',\n    '36px': 'text-4xl',\n    '48px': 'text-5xl',\n    '60px': 'text-6xl',\n    '72px': 'text-7xl',\n    '96px': 'text-8xl',\n    '128px': 'text-9xl',\n  };\n\n  return fontSize[val] ?? `text-[${val}]`;\n};\n\nexport const removeSpace = (str: string) => {\n  return str.replace(/\\s/g, '');\n}\n","import { CssCodeParse, CustomSelect, CustomTheme, ResultCode, TranslatorConfig } from \"./types\";\nimport { getBorderRadiusDefaultVal, getCustomVal, getFilterDefaultVal, getFontSizeDefaultVal, getRemDefaultVal, getUnitMetacharactersVal, hasNegative, isColor, isUnit, removeSpace } from \"./utils\";\n\nconst specialAttribute = ['@charset', '@font-face', '@import', '@keyframes'];\n\nlet useAllDefaultValues = false;\nlet customTheme: CustomTheme = {};\n\nconst propertyMap: Map<\n  string,\n  Record<string, string> | ((val: string) => string)\n> = new Map<string, Record<string, string> | ((val: string) => string)>([\n  [\n    'align-content',\n    {\n      center: 'content-center',\n      'flex-start': 'content-start',\n      'flex-end': 'content-end',\n      'space-between': 'content-between',\n      'space-around': 'content-around',\n      'space-evenly': 'content-evenly',\n    },\n  ],\n  [\n    'align-items',\n    {\n      'flex-start': 'items-start',\n      'flex-end': 'items-end',\n      center: 'items-center',\n      baseline: 'items-baseline',\n      stretch: 'items-stretch',\n    },\n  ],\n  [\n    'align-self',\n    {\n      auto: 'self-auto',\n      'flex-start': 'self-start',\n      'flex-end': 'self-end',\n      center: 'self-center',\n      stretch: 'self-stretch',\n      baseline: 'self-baseline',\n    },\n  ],\n  [\n    'all',\n    {\n      initial: '[all:initial]',\n      inherit: '[all:inherit]',\n      unset: '[all:unset]',\n    },\n  ],\n  [\n    'animation',\n    (val) =>\n      ({ none: 'animate-none' }[val] ?? `animate-[${getCustomVal(val)}]`),\n  ],\n  ['animation-delay', (val) => `[animation-delay:${getCustomVal(val)}]`],\n  [\n    'animation-direction',\n    (val) => `[animation-direction:${getCustomVal(val)}]`,\n  ],\n  ['animation-duration', (val) => `[animation-duration:${getCustomVal(val)}]`],\n  [\n    'animation-fill-mode',\n    (val) => `[animation-fill-mode:${getCustomVal(val)}]`,\n  ],\n  [\n    'animation-iteration-count',\n    (val) => `[animation-iteration-count:${getCustomVal(val)}]`,\n  ],\n  ['animation-name', (val) => `[animation-name:${getCustomVal(val)}]`],\n  [\n    'animation-play-state',\n    (val) => `[animation-play-state:${getCustomVal(val)}]`,\n  ],\n  [\n    'animation-timing-function',\n    (val) => `[animation-timing-function:${getCustomVal(val)}]`,\n  ],\n  [\n    'appearance',\n    (val) =>\n      ({ none: 'appearance-none' }[val] ?? `[appearance:${getCustomVal(val)}]`),\n  ],\n  ['aspect-ratio', (val) => {\n    return {\n      auto: 'aspect-auto',\n      '1/1': 'aspect-square',\n      '16/9': 'aspect-video',\n    }[removeSpace(val)] ?? `[aspect-ratio:${getCustomVal(val)}]`;\n  }],\n  [\n    'backdrop-filter',\n    (val) => {\n      const defaultVal = { none: 'backdrop-filter-none' }[val];\n      if (defaultVal) {\n        return defaultVal;\n      }\n\n      const backdropFilterValConfig: Record<string, (v: string) => string> = {\n        blur: (v: string) =>\n          `backdrop-blur-${customTheme['backdrop-blur']?.[v] ?? `[${v}]`}`,\n        brightness: (v: string) =>\n          `backdrop-brightness-${\n            customTheme['backdrop-brightness']?.[v] ?? `[${v}]`\n          }`,\n        contrast: (v: string) =>\n          `backdrop-contrast-${\n            customTheme['backdrop-contrast']?.[v] ?? `[${v}]`\n          }`,\n        grayscale: (v: string) =>\n          `backdrop-grayscale-${\n            customTheme['backdrop-grayscale']?.[v] ?? `[${v}]`\n          }`,\n        'hue-rotate': (v: string) => {\n          const t = hasNegative(v);\n          return `${t[0]}backdrop-hue-rotate-${\n            customTheme['backdrop-grayscale']?.[t[1]] ?? `[${t[1]}]`\n          }`;\n        },\n        invert: (v: string) =>\n          `backdrop-invert-${customTheme['backdrop-invert']?.[v] ?? `[${v}]`}`,\n        opacity: (v: string) =>\n          `backdrop-opacity-${\n            customTheme['backdrop-opacity']?.[v] ?? `[${v}]`\n          }`,\n        saturate: (v: string) =>\n          `backdrop-saturate-${\n            customTheme['backdrop-saturate']?.[v] ?? `[${v}]`\n          }`,\n        sepia: (v: string) =>\n          `backdrop-sepia-${customTheme['backdrop-sepia']?.[v] ?? `[${v}]`}`,\n      };\n      const vals = getCustomVal(val)\n        .replace(/\\(.+?\\)/g, (v) => v.replace(/_/g, ''))\n        .split(')_')\n        .map((v) => `${v})`);\n      vals[vals.length - 1] = vals[vals.length - 1].slice(0, -1);\n\n      let canUse = true;\n      const res = vals.map((v) => {\n        let canUsePipeV = false;\n        let pipeV = '';\n        if (useAllDefaultValues) {\n          pipeV =\n            (getFilterDefaultVal(v) ||\n              {\n                'opacity(0)': 'backdrop-opacity-0',\n                'opacity(0.05)': 'backdrop-opacity-5',\n                'opacity(0.1)': 'backdrop-opacity-10',\n                'opacity(0.2)': 'backdrop-opacity-20',\n                'opacity(0.25)': 'backdrop-opacity-25',\n                'opacity(0.3)': 'backdrop-opacity-30',\n                'opacity(0.4)': 'backdrop-opacity-40',\n                'opacity(0.5)': 'backdrop-opacity-50',\n                'opacity(0.6)': 'backdrop-opacity-60',\n                'opacity(0.7)': 'backdrop-opacity-70',\n                'opacity(0.75)': 'backdrop-opacity-75',\n                'opacity(0.8)': 'backdrop-opacity-80',\n                'opacity(0.9)': 'backdrop-opacity-90',\n                'opacity(0.95)': 'backdrop-opacity-95',\n                'opacity(1)': 'backdrop-opacity-100',\n              }[v]) ??\n            '';\n          if (pipeV.length > 0) {\n            pipeV = pipeV.startsWith('backdrop-opacity')\n              ? pipeV\n              : `backdrop-${pipeV}`;\n            canUsePipeV = true;\n          }\n        }\n        pipeV =\n          pipeV.length > 0\n            ? pipeV\n            : v.replace(/^([a-zA-Z0-9_-]+)\\((.+?)\\)$/, (_r, k: string, v) => {\n                canUsePipeV = true;\n                return backdropFilterValConfig[k]?.(v) ?? (canUse = false);\n              });\n        return canUsePipeV ? pipeV : '';\n      });\n      return canUse\n        ? `backdrop-filter ${[...new Set(res)].join(' ')}`\n        : `[backdrop-filter:${getCustomVal(val)}]`;\n    },\n  ],\n  [\n    'backface-visibility',\n    {\n      visible: '[backface-visibility:visible]',\n      hidden: '[backface-visibility:hidden]'\n    },\n  ],\n  [\n    'background',\n    (val) => {\n      const legalConfig: Record<string, string> = {\n        ...propertyMap.get('background-attachment'),\n        ...propertyMap.get('background-repeat'),\n        transparent: 'bg-transparent',\n        currentColor: 'bg-current',\n        currentcolor: 'bg-current',\n        none: 'bg-none',\n        bottom: 'bg-bottom',\n        center: 'bg-center',\n        left: 'bg-left',\n        'left bottom': 'bg-left-bottom',\n        'left top': 'bg-left-top',\n        right: 'bg-right',\n        'right bottom': 'bg-right-bottom',\n        'right top': 'bg-right-top',\n        top: 'bg-top',\n        auto: 'bg-auto',\n        cover: 'bg-cover',\n        contain: 'bg-contain',\n      };\n      return legalConfig[val] ?? `bg-[${getCustomVal(val)}]`;\n    },\n  ],\n  [\n    'background-attachment',\n    {\n      fixed: 'bg-fixed',\n      local: 'bg-local',\n      scroll: 'bg-scroll',\n    },\n  ],\n  [\n    'background-blend-mode',\n    {\n      normal: 'bg-blend-normal',\n      multiply: 'bg-blend-multiply',\n      screen: 'bg-blend-screen',\n      overlay: 'bg-blend-overlay',\n      darken: 'bg-blend-darken',\n      lighten: 'bg-blend-lighten',\n      'color-dodge': 'bg-blend-color-dodge',\n      'color-burn': 'bg-blend-color-burn',\n      'hard-light': 'bg-blend-hard-light',\n      'soft-light': 'bg-blend-soft-light',\n      difference: 'bg-blend-difference',\n      exclusion: 'bg-blend-exclusion',\n      hue: 'bg-blend-hue',\n      saturation: 'bg-blend-saturation',\n      color: 'bg-blend-color',\n      luminosity: 'bg-blend-luminosity',\n    },\n  ],\n  [\n    'background-clip',\n    {\n      'border-box': 'bg-clip-border',\n      'padding-box': 'bg-clip-padding',\n      'content-box': 'bg-clip-content',\n      text: 'bg-clip-text',\n    },\n  ],\n  [\n    'background-color',\n    (val) =>\n      ({\n        transparent: 'bg-transparent',\n        currentColor: 'bg-current',\n        currentcolor: 'bg-current',\n      }[val] ?? (isColor(val, true) ? `bg-[${getCustomVal(val)}]` : '')),\n  ],\n  [\n    'background-image',\n    (val) => ({ none: 'bg-none' }[val] ?? `bg-[${getCustomVal(val)}]`),\n  ],\n  [\n    'background-origin',\n    {\n      'border-box': 'bg-origin-border',\n      'padding-box': 'bg-origin-padding',\n      'content-box': 'bg-origin-content',\n    },\n  ],\n  [\n    'background-position',\n    (val) =>\n      ({\n        bottom: 'bg-bottom',\n        center: 'bg-center',\n        left: 'bg-left',\n        'left bottom': 'bg-left-bottom',\n        'left top': 'bg-left-top',\n        right: 'bg-right',\n        'right bottom': 'bg-right-bottom',\n        'right top': 'bg-right-top',\n        top: 'bg-top',\n      }[val] ?? `bg-[${getCustomVal(val)}]`),\n  ],\n  [\n    'background-repeat',\n    {\n      repeat: 'bg-repeat',\n      'no-repeat': 'bg-no-repeat',\n      'repeat-x': 'bg-repeat-x',\n      'repeat-y': 'bg-repeat-y',\n      round: 'bg-repeat-round',\n      space: 'bg-repeat-space',\n    },\n  ],\n  [\n    'background-size',\n    (val) =>\n      ({\n        auto: 'bg-auto',\n        cover: 'bg-cover',\n        contain: 'bg-contain',\n      }[val] ?? `[background-size:${getCustomVal(val)}]`),\n  ],\n  [\n    'border',\n    (val) => {\n      val = val.replace(/\\(.+?\\)/, (v) => v.replace(/\\s/g, ''));\n      const vals: string = val\n        .split(' ')\n        .filter((v) => v !== '')\n        .map((v) =>\n          isUnit(v) || isColor(v)\n            ? {\n                transparent: 'border-transparent',\n                currentColor: 'border-current',\n                currentcolor: 'border-current',\n              }[val] ?? `border-[${v}]`\n            : (propertyMap.get('border-style') as Record<string, string>)[v] ??\n              ''\n        )\n        .filter((v) => v !== '')\n        .join(' ');\n      return vals;\n    },\n  ],\n  [\n    'border-bottom',\n    (val) => {\n      if (isUnit(val)) {\n        return `border-b-[${getCustomVal(val)}]`;\n      } else {\n        return `[border-bottom:${getCustomVal(val)}]`;\n      }\n    },\n  ],\n  [\n    'border-bottom-color',\n    (val) =>\n      isColor(val, true) ? `[border-bottom-color:${getCustomVal(val)}]` : '',\n  ],\n  [\n    'border-bottom-left-radius',\n    (val) =>\n      ({ '0': 'rounded-bl-none', '0px': 'rounded-bl-none' }[val] ??\n      (isUnit(val)\n        ? `rounded-bl${(\n            (useAllDefaultValues && getBorderRadiusDefaultVal(val)) ||\n            `-[${getCustomVal(val)}]`\n          ).replace(/null$/, '')}`\n        : '')),\n  ],\n  [\n    'border-bottom-right-radius',\n    (val) =>\n      ({ '0': 'rounded-br-none', '0px': 'rounded-br-none' }[val] ??\n      (isUnit(val)\n        ? `rounded-br${(\n            (useAllDefaultValues && getBorderRadiusDefaultVal(val)) ||\n            `-[${getCustomVal(val)}]`\n          ).replace(/null$/, '')}`\n        : '')),\n  ],\n  [\n    'border-bottom-style',\n    (val) =>\n      (propertyMap.get('border-style') as Record<string, string>)[val]\n        ? `[border-bottom-style:${val}]`\n        : '',\n  ],\n  [\n    'border-bottom-width',\n    (val) => (isUnit(val) ? `border-b-[${getCustomVal(val)}]` : ''),\n  ],\n  [\n    'border-collapse',\n    {\n      collapse: 'border-collapse',\n      separate: 'border-separate',\n    },\n  ],\n  [\n    'border-color',\n    (val) =>\n      ({\n        transparent: 'border-transparent',\n        currentColor: 'border-current',\n        currentcolor: 'border-current',\n      }[val] ?? (isColor(val) ? `border-[${getCustomVal(val)}]` : '')),\n  ],\n  ['border-image', (val) => `[border-image:${getCustomVal(val)}]`],\n  [\n    'border-image-outset',\n    (val) => `[border-image-outset:${getCustomVal(val)}]`,\n  ],\n  [\n    'border-image-repeat',\n    (val) => `[border-image-repeat:${getCustomVal(val)}]`,\n  ],\n  ['border-image-slice', (val) => `[border-image-slice:${getCustomVal(val)}]`],\n  [\n    'border-image-source',\n    (val) => `[border-image-source:${getCustomVal(val)}]`,\n  ],\n  [\n    'border-image-width',\n    (val) => (isUnit(val) ? `[border-image-width:${getCustomVal(val)}]` : ''),\n  ],\n  [\n    'border-left',\n    (val) => {\n      if (isUnit(val)) {\n        return `border-l-[${getCustomVal(val)}]`;\n      } else {\n        return `[border-left:${getCustomVal(val)}]`;\n      }\n    },\n  ],\n  [\n    'border-left-color',\n    (val) =>\n      isColor(val, true) ? `[border-left-color:${getCustomVal(val)}]` : '',\n  ],\n  [\n    'border-left-style',\n    (val) =>\n      (propertyMap.get('border-style') as Record<string, string>)[val]\n        ? `[border-left-style:${val}]`\n        : '',\n  ],\n  [\n    'border-left-width',\n    (val) => (isUnit(val) ? `border-l-[${getCustomVal(val)}]` : ''),\n  ],\n  [\n    'border-radius',\n    (val) => {\n      const r = { '0': 'rounded-none', '0px': 'rounded-none' }[val];\n      if (r) {\n        return r;\n      }\n      if (val.includes('/')) {\n        return `rounded-[${getCustomVal(val)}]`;\n      }\n      let vals = val.split(' ').filter((v) => v !== '');\n      if (vals.filter((v) => !isUnit(v)).length > 0) {\n        return '';\n      }\n      vals = vals.map((v) =>\n        (\n          (useAllDefaultValues && getBorderRadiusDefaultVal(v)) ||\n          `-[${v}]`\n        ).replace(/null$/, '')\n      );\n      if (vals.length === 1) {\n        return `rounded${vals[0]}`;\n      } else if (vals.length === 2) {\n        return `rounded-tl${vals[0]} rounded-br${vals[0]} rounded-tr${vals[1]} rounded-bl${vals[1]}`;\n      } else if (vals.length === 3) {\n        return `rounded-tl${vals[0]} rounded-br${vals[2]} rounded-tr${vals[1]} rounded-bl${vals[1]}`;\n      } else if (vals.length === 4) {\n        return `rounded-tl${vals[0]} rounded-br${vals[2]} rounded-tr${vals[1]} rounded-bl${vals[3]}`;\n      }\n      return '';\n    },\n  ],\n  [\n    'border-right',\n    (val) => {\n      if (isUnit(val)) {\n        return `border-r-[${getCustomVal(val)}]`;\n      } else {\n        return `[border-right:${getCustomVal(val)}]`;\n      }\n    },\n  ],\n  [\n    'border-right-color',\n    (val) =>\n      isColor(val, true) ? `[border-right-color:${getCustomVal(val)}]` : '',\n  ],\n  [\n    'border-right-style',\n    (val) =>\n      (propertyMap.get('border-style') as Record<string, string>)[val]\n        ? `[border-right-style:${val}]`\n        : '',\n  ],\n  [\n    'border-right-width',\n    (val) => (isUnit(val) ? `border-r-[${getCustomVal(val)}]` : ''),\n  ],\n  [\n    'border-spacing',\n    (val) => (isUnit(val) ? `[border-spacing:${getCustomVal(val)}]` : ''),\n  ],\n  [\n    'border-style',\n    {\n      solid: 'border-solid',\n      dashed: 'border-dashed',\n      dotted: 'border-dotted',\n      double: 'border-double',\n      none: 'border-none',\n    },\n  ],\n  [\n    'border-top',\n    (val) => {\n      if (isUnit(val)) {\n        return `border-t-[${getCustomVal(val)}]`;\n      } else {\n        return `[border-top:${getCustomVal(val)}]`;\n      }\n    },\n  ],\n  [\n    'border-top-color',\n    (val) =>\n      isColor(val, true) ? `[border-top-color:${getCustomVal(val)}]` : '',\n  ],\n  [\n    'border-top-left-radius',\n    (val) =>\n      ({ '0': 'rounded-tl-none', '0px': 'rounded-tl-none' }[val] ??\n      (isUnit(val)\n        ? `rounded-tl${(\n            (useAllDefaultValues && getBorderRadiusDefaultVal(val)) ||\n            `-[${getCustomVal(val)}]`\n          ).replace(/null$/, '')}`\n        : '')),\n  ],\n  [\n    'border-top-right-radius',\n    (val) =>\n      ({ '0': 'rounded-tr-none', '0px': 'rounded-tr-none' }[val] ??\n      (isUnit(val)\n        ? `rounded-tr${(\n            (useAllDefaultValues && getBorderRadiusDefaultVal(val)) ||\n            `-[${getCustomVal(val)}]`\n          ).replace(/null$/, '')}`\n        : '')),\n  ],\n  [\n    'border-top-style',\n    (val) =>\n      (propertyMap.get('border-style') as Record<string, string>)[val]\n        ? `[border-top-style:${val}]`\n        : '',\n  ],\n  [\n    'border-top-width',\n    (val) => (isUnit(val) ? `border-t-[${getCustomVal(val)}]` : ''),\n  ],\n  [\n    'border-width',\n    (val) => (isUnit(val) ? `border-[${getCustomVal(val)}]` : ''),\n  ],\n  [\n    'bottom',\n    (val) => {\n      const t = hasNegative(val);\n      return isUnit(val)\n        ? `${t[0]}bottom-${\n            getUnitMetacharactersVal(t[1], [\n              CustomSelect.vw,\n              CustomSelect.vh,\n            ]) || `[${t[1]}]`\n          }`\n        : '';\n    },\n  ],\n  [\n    'box-align',\n    {\n      initial: '[box-align:initial]',\n      start: '[box-align:inherit]',\n      end: '[box-align:unset]',\n      center: '[box-align:unset]',\n      baseline: '[box-align:unset]',\n      stretch: '[box-align:unset]',\n    },\n  ],\n  [\n    'box-decoration-break',\n    {\n      slice: 'decoration-slice',\n      clone: 'decoration-clone',\n    },\n  ],\n  [\n    'box-direction',\n    {\n      initial: '[box-direction:initial]',\n      normal: '[box-direction:normal]',\n      reverse: '[box-direction:reverse]',\n      inherit: '[box-direction:inherit]',\n    },\n  ],\n  ['box-flex', (val) => `[box-flex:${getCustomVal(val)}]`],\n  ['box-flex-group', (val) => `[box-flex-group:${getCustomVal(val)}]`],\n  [\n    'box-lines',\n    {\n      single: '[box-lines:single]',\n      multiple: '[box-lines:multiple]',\n      initial: '[box-lines:initial]',\n    },\n  ],\n  ['box-ordinal-group', (val) => `[box-ordinal-group:${getCustomVal(val)}]`],\n  [\n    'box-orient',\n    {\n      horizontal: '[box-orient:horizontal]',\n      vertical: '[box-orient:vertical]',\n      'inline-axis': '[box-orient:inline-axis]',\n      'block-axis': '[box-orient:block-axis]',\n      inherit: '[box-orient:inherit]',\n      initial: '[box-orient:initial]',\n    },\n  ],\n  [\n    'box-pack',\n    {\n      start: '[box-pack:start]',\n      end: '[box-pack:end]',\n      center: '[box-pack:center]',\n      justify: '[box-pack:justify]',\n      initial: '[box-pack:initial]',\n    },\n  ],\n  ['box-shadow', (val) => `[box-shadow:${getCustomVal(val)}]`],\n  [\n    'box-sizing',\n    {\n      'border-box': 'box-border',\n      'content-box': 'box-content',\n    },\n  ],\n  [\n    'caption-side',\n    {\n      top: '[caption-side:top]',\n      bottom: '[caption-side:bottom]',\n      inherit: '[caption-side:inherit]',\n      initial: '[caption-side:initial]',\n    },\n  ],\n  [\n    'clear',\n    {\n      left: 'clear-left',\n      right: 'clear-right',\n      both: 'clear-both',\n      none: 'clear-none',\n    },\n  ],\n  ['clip', (val) => `[clip:${getCustomVal(val)}]`],\n  ['clip-path', (val) => `[clip-path:${getCustomVal(val)}]`],\n  [\n    'color',\n    (val) =>\n      ({\n        transparent: 'text-transparent',\n        currentColor: 'text-current',\n        currentcolor: 'text-current',\n      }[val] ?? (isColor(val, true) ? `text-[${getCustomVal(val)}]` : '')),\n  ],\n  ['color-scheme', (val) => `[color-scheme:${getCustomVal(val)}]`],\n  ['column-count', (val) => `[column-count:${getCustomVal(val)}]`],\n  [\n    'column-fill',\n    {\n      balance: '[column-fill:balance]',\n      auto: '[column-fill:auto]',\n      initial: '[column-fill:initial]',\n    },\n  ],\n  [\n    'column-gap',\n    (val) => ({ '0': 'gap-x-0' }[val] ?? (isUnit(val) ? `gap-x-[${val}]` : '')),\n  ],\n  ['column-rule', (val) => `[column-rule:${getCustomVal(val)}]`],\n  [\n    'column-rule-color',\n    (val) =>\n      isColor(val, true) ? `[column-rule-color:${getCustomVal(val)}]` : '',\n  ],\n  [\n    'column-rule-style',\n    {\n      none: '[column-rule-style:none]',\n      hidden: '[column-rule-style:hidden]',\n      dotted: '[column-rule-style:dotted]',\n      dashed: '[column-rule-style:dashed]',\n      solid: '[column-rule-style:solid]',\n      double: '[column-rule-style:double]',\n      groove: '[column-rule-style:groove]',\n      ridge: '[column-rule-style:ridge]',\n      inset: '[column-rule-style:inset]',\n      outset: '[column-rule-style:outset]',\n      initial: '[column-rule-style:initial]',\n    },\n  ],\n  [\n    'column-rule-width',\n    (val) => (isUnit(val) ? `[column-rule-width:${val}]` : ''),\n  ],\n  ['column-span', (val) => `[column-span:${getCustomVal(val)}]`],\n  ['column-width', (val) => (isUnit(val) ? `[column-width:${val}]` : '')],\n  ['columns', (val) => `[columns:${getCustomVal(val)}]`],\n  [\n    'contain-intrinsic-size',\n    (val) => `[contain-intrinsic-size:${getCustomVal(val)}]`,\n  ],\n  ['content', (val) => `content-[${getCustomVal(val)}]`],\n  ['content-visibility', (val) => `[content-visibility:${getCustomVal(val)}]`],\n  ['counter-increment', (val) => `[content-increment:${getCustomVal(val)}]`],\n  ['counter-reset', (val) => `[counter-reset:${getCustomVal(val)}]`],\n  ['counter-set', (val) => `[counter-set:${getCustomVal(val)}]`],\n  [\n    'cursor',\n    {\n      auto: 'cursor-auto',\n      default: 'cursor-default',\n      pointer: 'cursor-pointer',\n      wait: 'cursor-wait',\n      text: 'cursor-text',\n      move: 'cursor-move',\n      help: 'cursor-help',\n      'not-allowed': 'cursor-not-allowed',\n    },\n  ],\n  [\n    'direction',\n    {\n      ltr: '[direction:ltr]',\n      rtl: '[direction:rtl]',\n      inherit: '[direction:inherit]',\n      initial: '[direction:initial]',\n    },\n  ],\n  [\n    'display',\n    {\n      block: 'block',\n      'inline-block': 'inline-block',\n      inline: 'inline',\n      flex: 'flex',\n      'inline-flex': 'inline-flex',\n      table: 'table',\n      'inline-table': 'inline-table',\n      'table-caption': 'table-caption',\n      'table-cell': 'table-cell',\n      'table-column': 'table-column',\n      'table-column-group': 'table-column-group',\n      'table-footer-group': 'table-footer-group',\n      'table-header-group': 'table-header-group',\n      'table-row-group': 'table-row-group',\n      'table-row': 'table-row',\n      'flow-root': 'flow-root',\n      grid: 'grid',\n      'inline-grid': 'inline-grid',\n      contents: 'contents',\n      'list-item': 'list-item',\n      none: 'hidden',\n    },\n  ],\n  [\n    'empty-cells',\n    {\n      hide: '[empty-cells:hide]',\n      show: '[empty-cells:show]',\n      inherit: '[empty-cells:inherit]',\n      initial: '[empty-cells:initial]',\n    },\n  ],\n  [\n    'fill',\n    (val) =>\n      ({ currentColor: 'fill-current', currentcolor: 'fill-current' }[val] ??\n      (isColor(val, true) ? `fill-[${getCustomVal(val)}]` : '')),\n  ],\n  [\n    'filter',\n    (val) => {\n      const defaultVal = { none: 'filter-none' }[val];\n      if (defaultVal) {\n        return defaultVal;\n      }\n      const filterValConfig: Record<string, (v: string) => string> = {\n        blur: (v: string) => `blur-${customTheme['blur']?.[v] ?? `[${v}]`}`,\n        brightness: (v: string) =>\n          `brightness-${customTheme['brightness']?.[v] ?? `[${v}]`}`,\n        contrast: (v: string) =>\n          `contrast-${customTheme['contrast']?.[v] ?? `[${v}]`}`,\n        grayscale: (v: string) =>\n          `grayscale-${customTheme['grayscale']?.[v] ?? `[${v}]`}`,\n        'hue-rotate': (v: string) => {\n          const t = hasNegative(v);\n          return `${t[0]}hue-rotate-${\n            customTheme['grayscale']?.[t[1]] ?? `[${t[1]}]`\n          }`;\n        },\n        invert: (v: string) =>\n          `invert-${customTheme['invert']?.[v] ?? `[${v}]`}`,\n        saturate: (v: string) =>\n          `saturate-${customTheme['saturate']?.[v] ?? `[${v}]`}`,\n        sepia: (v: string) => `sepia-${customTheme['sepia']?.[v] ?? `[${v}]`}`,\n      };\n      const vals = getCustomVal(val)\n        .replace(/\\(.+?\\)/g, (v) => v.replace(/_/g, ''))\n        .split(')_')\n        .map((v) => `${v})`);\n      vals[vals.length - 1] = vals[vals.length - 1].slice(0, -1);\n\n      let canUse = true;\n      const res = vals.map((v) => {\n        let canUsePipeV = false;\n        let pipeV = '';\n        if (useAllDefaultValues) {\n          pipeV = getFilterDefaultVal(v) ?? '';\n          if (pipeV.length > 0) {\n            canUsePipeV = true;\n          }\n        }\n        pipeV =\n          pipeV.length > 0\n            ? pipeV\n            : v.replace(/^([a-zA-Z0-9_-]+)\\((.+?)\\)$/, (_r, k: string, v) => {\n                canUsePipeV = true;\n                return filterValConfig[k]?.(v) ?? (canUse = false);\n              });\n        return canUsePipeV ? pipeV : '';\n      });\n      return canUse\n        ? `filter ${[...new Set(res)].join(' ')}`\n        : `[filter:${getCustomVal(val)}]`;\n    },\n  ],\n  [\n    'flex',\n    (val) =>\n      ({\n        '1 1 0%': 'flex-1',\n        '1 1 auto': 'flex-auto',\n        '0 1 auto': 'flex-initial',\n        none: 'flex-none',\n      }[val] ?? `flex-[${getCustomVal(val)}]`),\n  ],\n  ['flex-basis', (val) => (isUnit(val) ? `[flex-basis:${val}]` : '')],\n  [\n    'flex-direction',\n    {\n      row: 'flex-row',\n      'row-reverse': 'flex-row-reverse',\n      column: 'flex-col',\n      'column-reverse': 'flex-col-reverse',\n    },\n  ],\n  ['flex-flow', (val) => `[flex-flow:${getCustomVal(val)}]`],\n  [\n    'flex-grow',\n    (val) =>\n      isUnit(val)\n        ? { '0': 'flex-grow-0', '1': 'flex-grow' }[val] ?? `flex-grow-[${val}]`\n        : '',\n  ],\n  [\n    'flex-shrink',\n    (val) =>\n      isUnit(val)\n        ? { '0': 'flex-shrink-0', '1': 'flex-shrink' }[val] ??\n          `flex-shrink-[${val}]`\n        : '',\n  ],\n  [\n    'flex-wrap',\n    {\n      wrap: 'flex-wrap',\n      'wrap-reverse': 'flex-wrap-reverse',\n      nowrap: 'flex-nowrap',\n    },\n  ],\n  [\n    'float',\n    {\n      right: 'float-right',\n      left: 'float-left',\n      none: 'float-none',\n    },\n  ],\n  ['font', (val) => `[font:${getCustomVal(val)}]`],\n  ['font-family', (val) => `font-[${getCustomVal(val)}]`],\n  ['font-size', (val) => (isUnit(val) ? getFontSizeDefaultVal(val) : '')],\n  [\n    'font-size-adjust',\n    (val) => (isUnit(val) ? `[font-size-adjust:${val}]` : ''),\n  ],\n  [\n    '-webkit-font-smoothing',\n    {\n      antialiased: 'antialiased',\n      auto: 'subpixel-antialiased',\n    },\n  ],\n  [\n    '-moz-osx-font-smoothing',\n    {\n      grayscale: 'antialiased',\n      auto: 'subpixel-antialiased',\n    },\n  ],\n  [\n    'font-stretch',\n    {\n      wider: '[font-stretch:wider]',\n      narrower: '[font-stretch:narrower]',\n      'ultra-condensed': '[font-stretch:ultra-condensed]',\n      'extra-condensed': '[font-stretch:extra-condensed]',\n      condensed: '[font-stretch:condensed]',\n      'semi-condensed': '[font-stretch:semi-condensed]',\n      normal: '[font-stretch:normal]',\n      'semi-expanded': '[font-stretch:semi-expanded]',\n      expanded: '[font-stretch:expanded]',\n      'extra-expanded': '[font-stretch:extra-expanded]',\n      'ultra-expanded': '[font-stretch:ultra-expanded]',\n      inherit: '[font-stretch:inherit]',\n      initial: '[font-stretch:initial]',\n    },\n  ],\n  [\n    'font-style',\n    {\n      italic: 'italic',\n      normal: 'not-italic',\n    },\n  ],\n  [\n    'font-variant',\n    {\n      normal: '[font-variant:normal]',\n      'small-caps': '[font-variant:small-caps]',\n      inherit: '[font-variant:inherit]',\n      initial: '[font-variant:initial]',\n    },\n  ],\n  [\n    'font-variant-numeric',\n    {\n      normal: 'normal-nums',\n      ordinal: 'ordinal',\n      'slashed-zero': 'slashed-zero',\n      'lining-nums': 'lining-nums',\n      'oldstyle-nums': 'oldstyle-nums',\n      'proportional-nums': 'proportional-nums',\n      'tabular-nums': 'tabular-nums',\n      'diagonal-fractions': 'diagonal-fractions',\n      'stacked-fractions': 'stacked-fractions',\n    },\n  ],\n  [\n    'font-variation-settings',\n    (val) => `[font-variation-settings:${getCustomVal(val)}]`,\n  ],\n  ['font-weight', (val) => (isUnit(val) ? `font-[${val}]` : '')],\n  [\n    'gap',\n    (val) => ({ '0': 'gap-0' }[val] ?? (isUnit(val) ? `gap-[${val}]` : '')),\n  ],\n  ['grid', (val) => `[grid:${getCustomVal(val)}]`],\n  ['grid-area', (val) => `[grid-area:${getCustomVal(val)}]`],\n  [\n    'grid-auto-columns',\n    (val) =>\n      ({\n        auto: 'auto-cols-auto',\n        'min-content': 'auto-cols-min',\n        'max-content': 'auto-cols-max',\n        'minmax(0, 1fr)': 'auto-cols-fr',\n      }[val] ?? `auto-cols-[${getCustomVal(val)}]`),\n  ],\n  [\n    'grid-auto-flow',\n    (val) =>\n      ({\n        row: 'grid-flow-row',\n        column: 'grid-flow-col',\n        row_dense: 'grid-flow-row-dense',\n        column_dense: 'grid-flow-col-dense',\n      }[getCustomVal(val)] ?? ''),\n  ],\n  [\n    'grid-auto-rows',\n    (val) =>\n      ({\n        auto: 'auto-rows-auto',\n        'min-content': 'auto-rows-min',\n        'max-content': 'auto-rows-max',\n        'minmax(0, 1fr)': 'auto-rows-fr',\n      }[val] ?? `auto-rows-[${getCustomVal(val)}]`),\n  ],\n  [\n    'grid-column',\n    (val) =>\n      ({\n        auto: 'col-auto',\n        'span 1 / span 1': 'col-span-1',\n        'span 2 / span 2': 'col-span-2',\n        'span 3 / span 3': 'col-span-3',\n        'span 4 / span 4': 'col-span-4',\n        'span 5 / span 5': 'col-span-5',\n        'span 6 / span 6': 'col-span-6',\n        'span 7 / span 7': 'col-span-7',\n        'span 8 / span 8': 'col-span-8',\n        'span 9 / span 9': 'col-span-9',\n        'span 10 / span 10': 'col-span-10',\n        'span 11 / span 11': 'col-span-11',\n        'span 12 / span 12': 'col-span-12',\n        '1 / -1': 'col-span-full',\n      }[val] ?? `col-[${getCustomVal(val)}]`),\n  ],\n  [\n    'grid-column-end',\n    (val) =>\n      ({\n        '1': 'col-end-1',\n        '2': 'col-end-2',\n        '3': 'col-end-3',\n        '4': 'col-end-4',\n        '5': 'col-end-5',\n        '6': 'col-end-6',\n        '7': 'col-end-7',\n        '8': 'col-end-8',\n        '9': 'col-end-9',\n        '10': 'col-end-10',\n        '11': 'col-end-11',\n        '12': 'col-end-12',\n        '13': 'col-end-13',\n        auto: 'col-end-auto',\n      }[val] ?? `col-end-[${getCustomVal(val)}]`),\n  ],\n  [\n    'grid-column-gap',\n    (val) => ({ '0': 'gap-x-0' }[val] ?? (isUnit(val) ? `gap-x-[${val}]` : '')),\n  ],\n  [\n    'grid-column-start',\n    (val) =>\n      ({\n        '1': 'col-start-1',\n        '2': 'col-start-2',\n        '3': 'col-start-3',\n        '4': 'col-start-4',\n        '5': 'col-start-5',\n        '6': 'col-start-6',\n        '7': 'col-start-7',\n        '8': 'col-start-8',\n        '9': 'col-start-9',\n        '10': 'col-start-10',\n        '11': 'col-start-11',\n        '12': 'col-start-12',\n        '13': 'col-start-13',\n        auto: 'col-start-auto',\n      }[val] ?? `col-start-[${getCustomVal(val)}]`),\n  ],\n  [\n    'grid-gap',\n    (val) => ({ '0': 'gap-0' }[val] ?? (isUnit(val) ? `gap-[${val}]` : '')),\n  ],\n  [\n    'grid-row',\n    (val) =>\n      ({\n        auto: 'row-auto',\n        'span 1 / span 1': 'row-span-1',\n        'span 2 / span 2': 'row-span-2',\n        'span 3 / span 3': 'row-span-3',\n        'span 4 / span 4': 'row-span-4',\n        'span 5 / span 5': 'row-span-5',\n        'span 6 / span 6': 'row-span-6',\n        '1 / -1': 'row-span-full',\n      }[val] ?? `row-[${getCustomVal(val)}]`),\n  ],\n  [\n    'grid-row-end',\n    (val) =>\n      ({\n        '1': 'row-end-1',\n        '2': 'row-end-2',\n        '3': 'row-end-3',\n        '4': 'row-end-4',\n        '5': 'row-end-5',\n        '6': 'row-end-6',\n        '7': 'row-end-7',\n        auto: 'row-end-auto',\n      }[val] ?? `row-end-[${getCustomVal(val)}]`),\n  ],\n  [\n    'grid-row-gap',\n    (val) => ({ '0': 'gap-y-0' }[val] ?? (isUnit(val) ? `gap-y-[${val}]` : '')),\n  ],\n  [\n    'grid-row-start',\n    (val) =>\n      ({\n        '1': 'row-start-1',\n        '2': 'row-start-2',\n        '3': 'row-start-3',\n        '4': 'row-start-4',\n        '5': 'row-start-5',\n        '6': 'row-start-6',\n        '7': 'row-start-7',\n        auto: 'row-start-auto',\n      }[val] ?? `row-start-[${getCustomVal(val)}]`),\n  ],\n  ['grid-rows', (val) => `[grid-rows:${getCustomVal(val)}]`],\n  ['grid-template', (val) => `[grid-template:${getCustomVal(val)}]`],\n  [\n    'grid-template-areas',\n    (val) => `[grid-template-areas:${getCustomVal(val)}]`,\n  ],\n  [\n    'grid-template-columns',\n    (val) =>\n      ({\n        'repeat(1,minmax(0,1fr))': 'grid-cols-1',\n        'repeat(2,minmax(0,1fr))': 'grid-cols-2',\n        'repeat(3,minmax(0,1fr))': 'grid-cols-3',\n        'repeat(4,minmax(0,1fr))': 'grid-cols-4',\n        'repeat(5,minmax(0,1fr))': 'grid-cols-5',\n        'repeat(6,minmax(0,1fr))': 'grid-cols-6',\n        'repeat(7,minmax(0,1fr))': 'grid-cols-7',\n        'repeat(8,minmax(0,1fr))': 'grid-cols-8',\n        'repeat(9,minmax(0,1fr))': 'grid-cols-9',\n        'repeat(10,minmax(0,1fr))': 'grid-cols-10',\n        'repeat(11,minmax(0,1fr))': 'grid-cols-11',\n        'repeat(12,minmax(0,1fr))': 'grid-cols-12',\n        none: 'grid-cols-none',\n      }[getCustomVal(val).replace(/_/g, '')] ??\n      `grid-cols-[${getCustomVal(val)}]`),\n  ],\n  [\n    'grid-template-rows',\n    (val) =>\n      ({\n        'repeat(1,minmax(0,1fr))': 'grid-rows-1',\n        'repeat(2,minmax(0,1fr))': 'grid-rows-2',\n        'repeat(3,minmax(0,1fr))': 'grid-rows-3',\n        'repeat(4,minmax(0,1fr))': 'grid-rows-4',\n        'repeat(5,minmax(0,1fr))': 'grid-rows-5',\n        'repeat(6,minmax(0,1fr))': 'grid-rows-6',\n        none: 'grid-rows-none',\n      }[getCustomVal(val).replace(/_/g, '')] ??\n      `grid-rows-[${getCustomVal(val)}]`),\n  ],\n  [\n    'hanging-punctuation',\n    {\n      none: '[hanging-punctuation:none]',\n      first: '[hanging-punctuation:first]',\n      last: '[hanging-punctuation:last]',\n      'allow-end': '[hanging-punctuation:allow-end]',\n      'force-end': '[hanging-punctuation:force-end]',\n      initial: '[hanging-punctuation:initial]',\n    },\n  ],\n  [\n    'height',\n    (val) =>\n      isUnit(val)\n        ? `h-${getUnitMetacharactersVal(val, [CustomSelect.vw]) || `[${val}]`}`\n        : '',\n  ],\n  ['icon', (val) => `[icon:${getCustomVal(val)}]`],\n  ['image-orientation', (val) => `[image-orientation:${getCustomVal(val)}]`],\n  [\n    'justify-content',\n    {\n      'flex-start': 'justify-start',\n      'flex-end': 'justify-end',\n      center: 'justify-center',\n      'space-between': 'justify-between',\n      'space-around': 'justify-around',\n      'space-evenly': 'justify-evenly',\n    },\n  ],\n  [\n    'justify-items',\n    {\n      start: 'justify-items-start',\n      end: 'justify-items-end',\n      center: 'justify-items-center',\n      stretch: 'justify-items-stretch',\n    },\n  ],\n  [\n    'justify-self',\n    {\n      auto: 'justify-self-auto',\n      start: 'justify-self-start',\n      end: 'justify-self-end',\n      center: 'justify-self-center',\n      stretch: 'justify-self-stretch',\n    },\n  ],\n  [\n    'left',\n    (val) => {\n      const t = hasNegative(val);\n      return isUnit(val)\n        ? `${t[0]}left-${\n            getUnitMetacharactersVal(t[1], [\n              CustomSelect.vw,\n              CustomSelect.vh,\n            ]) || `[${t[1]}]`\n          }`\n        : '';\n    },\n  ],\n  [\n    'letter-spacing',\n    (val) =>\n      ({\n        '-0.05em': 'tracking-tighter',\n        '-0.025em': 'tracking-tight',\n        '0em': 'tracking-normal',\n        '0.025em': 'tracking-wide',\n        '0.05em': 'tracking-wider',\n        '0.1em': 'tracking-widest',\n      }[val] ?? (isUnit(val) ? `tracking-[${val}]` : '')),\n  ],\n  [\n    'line-height',\n    (val) =>\n      ({\n        '1': 'leading-none',\n        '2': 'leading-loose',\n        '1.25': 'leading-tight',\n        '1.375': 'leading-snug',\n        '1.5': 'leading-normal',\n        '1.625': 'leading-relaxed',\n      }[val] ?? (isUnit(val) ? `leading-[${val}]` : '')),\n  ],\n  ['list-style', (val) => `[list-style:${getCustomVal(val)}]`],\n  ['list-style-image', (val) => `[list-style-image:${getCustomVal(val)}]`],\n  [\n    'list-style-position',\n    (val) =>\n      ({\n        inside: 'list-inside',\n        outside: 'list-outside',\n      }[val] ?? `[list-style-position:${getCustomVal(val)}]`),\n  ],\n  [\n    'list-style-type',\n    (val) =>\n      ({\n        none: 'list-none',\n        disc: 'list-disc',\n        decimal: 'list-decimal',\n      }[val] ?? `list-[${getCustomVal(val)}]`),\n  ],\n  ['logical-height', (val) => (isUnit(val) ? `[logical-height:${val}]` : '')],\n  ['logical-width', (val) => (isUnit(val) ? `[logical-width:${val}]` : '')],\n  [\n    'isolation',\n    {\n      isolate: 'isolate',\n      auto: 'isolation-auto',\n    },\n  ],\n  [\n    'margin',\n    (val) => {\n      const r = { '0': 'm-0', '0px': 'm-0' }[val];\n      if (r) {\n        return r;\n      }\n\n      const getPipeVal = (val: string) => {\n        const r = { '0': 'm_0', '0px': 'm_0', auto: 'm_auto' }[val];\n        if (r) {\n          return r;\n        }\n        let vals = val.split(' ').filter((v) => v !== '');\n        if (vals.filter((v) => !isUnit(v)).length > 0) {\n          return '';\n        }\n        if (useAllDefaultValues) {\n          vals = vals.map((v) => getRemDefaultVal(v) ?? `[${v}]`);\n        } else {\n          vals = vals.map((v) => `[${v}]`);\n        }\n\n        if (vals.length === 1 || new Set(vals).size === 1) {\n          return `m-${vals[0]}`;\n        } else if (vals.length === 2) {\n          return `mx-${vals[1]} my-${vals[0]}`;\n        } else if (vals.length === 3) {\n          if (vals[0] === vals[2]) {\n            return `mx-${vals[1]} my-${vals[0]}`;\n          }\n          return `mt-${vals[0]} mx-${vals[1]} mb-${vals[2]}`;\n        } else if (vals.length === 4) {\n          const [top, right, bottom, left] = vals;\n\n          if (top === bottom && right === left) {\n            return `mx-${left} my-${top}`;\n          }\n\n          if (top === bottom && right !== left) {\n            return `mr-${right} my-${top} ml-${left}`;\n          }\n\n          if (top !== bottom && right === left) {\n            return `mt-${top} mx-${right} mb-${bottom}`;\n          }\n\n          return `mt-${top} mr-${right} mb-${bottom} ml-${left}`;\n        }\n        return '';\n      };\n      const v = getPipeVal(val);\nconsole.log({\n  v\n});\n\n      return v === ''\n        ? ''\n        : v;\n    },\n  ],\n  [\n    'margin-bottom',\n    (val) => {\n      const t = hasNegative(val);\n      return (\n        { '0': 'mb-0', '0px': 'mb-0', auto: 'mb-auto' }[val] ??\n        (isUnit(val)\n          ? `${t[0]}mb-${\n              (useAllDefaultValues && getRemDefaultVal(t[1])) || `[${t[1]}]`\n            }`\n          : '')\n      );\n    },\n  ],\n  [\n    'margin-left',\n    (val) => {\n      const t = hasNegative(val);\n      return (\n        { '0': 'ml-0', '0px': 'ml-0', auto: 'ml-auto' }[val] ??\n        (isUnit(val)\n          ? `${t[0]}ml-${\n              (useAllDefaultValues && getRemDefaultVal(t[1])) || `[${t[1]}]`\n            }`\n          : '')\n      );\n    },\n  ],\n  [\n    'margin-right',\n    (val) => {\n      const t = hasNegative(val);\n      return (\n        { '0': 'mr-0', '0px': 'mr-0', auto: 'mr-auto' }[val] ??\n        (isUnit(val)\n          ? `${t[0]}mr-${\n              (useAllDefaultValues && getRemDefaultVal(t[1])) || `[${t[1]}]`\n            }`\n          : '')\n      );\n    },\n  ],\n  [\n    'margin-top',\n    (val) => {\n      const t = hasNegative(val);\n      re