transform-to-tailwindcss-core
Version:
🎨 A powerful, lightweight core library to transform CSS styles or style objects into Tailwind CSS utility classes. Perfect for migration projects and dynamic style generation.
1,421 lines (1,378 loc) • 63.4 kB
JavaScript
var TransformTailwindCssCore = (function(exports) {
"use strict";
//#region src/utils.ts
const cssMathFnRE = /^(?:calc|clamp|min|max)\s*\(.*\)/;
const numberWithUnitRE = /^-?[0-9.]+(px|rem|em|%|vw|vh|vmin|vmax|deg|s|ms)$/;
const positionMap = [
"top",
"right",
"bottom",
"left",
"center"
];
function isCalc(s) {
return s.startsWith("calc(");
}
function getFirstName(s) {
return s.split("-")[0];
}
function getLastName(s) {
const all = s.split("-");
return all[all.length - 1];
}
function isUrl(s) {
return s.startsWith("url(");
}
function isPercent(s) {
return s.endsWith("%");
}
function isHex(hex) {
return /^#[0-9A-F]{2,}$/i.test(hex);
}
function isRgb(s) {
return s.startsWith("rgb");
}
function isHsl(s) {
return s.startsWith("hsl");
}
function isGradient(s) {
return s.startsWith("linear-gradient") || s.startsWith("radial-gradient") || s.startsWith("conic-gradient");
}
function isCubicBezier(s) {
return s.startsWith("cubic-bezier");
}
function isAttr(s) {
return /^attr\(/i.test(s);
}
function isTurn(s) {
return s.endsWith("turn");
}
function isRepeatingLinearGradient(s) {
return /^repeating-linear-gradient\(/i.test(s);
}
function isRepeatingRadialGradient(s) {
return /^repeating-radial-gradient\(/i.test(s);
}
function isConstant(s) {
return /^constant\(/.test(s);
}
function isEnv(s) {
return /^env\(/.test(s);
}
function isFraction(s) {
return /^\d+\/\d+$/.test(s);
}
function isDynamic(val) {
return isFraction(val) || isUrl(val) || isColor(val) || cssMathFnRE.test(val) || numberWithUnitRE.test(val) || isGradient(val) || isVar(val) || isCalc(val) || isCubicBezier(val) || isAttr(val) || isRepeatingLinearGradient(val) || isRepeatingRadialGradient(val) || isConstant(val) || isEnv(val) || isTurn(val);
}
function getVal(val, transform$1, prefix = "", isDynamicFlag = false) {
val = String(val);
if (isDynamicFlag || isDynamic(val)) return `-[${prefix}${trim(transform$1 ? transform$1(val) : val, "all").replace(/['"]/g, "")}]`;
return prefix ? `-[${prefix}${transform$1 ? transform$1(val) : val}]` : `-${transform$1 ? transform$1(val) : val}`;
}
function getHundred(n) {
if (n.endsWith("%") || n.endsWith("deg") || n === "0") return n;
const v = Math.round(Number(n) * 100);
return Number.isNaN(v) ? v : `${v}%`;
}
function joinWithLine(s) {
return s.replace(/\s+/g, " ").split(/\s/g).join("-");
}
function joinWithUnderLine(s) {
return s.replace(/\s+/g, " ").split(/\s/g).join("_");
}
/**
* 删除空格
* @param { string } s 字符串
* @param { TrimType } type 所有 ｜ 前置 ｜ 前后 ｜ 后置 'all' | 'pre' | 'around' | 'post'
* @returns { string } 删除空格后的字符串
*/
function trim(s, type = "around") {
if (type === "pre") return s.replace(/(^\s*)/g, "");
if (type === "post") return s.replace(/(\s*$)/g, "");
if (type === "all") return s.replace(/\s+/g, "");
if (type === "around") return s.replace(/(^\s*)|(\s*$)/g, "");
return s;
}
function transformImportant(v, trimSpace = true) {
if (trimSpace) v = v.replace(/\s+/g, " ").replace(/\s*,\s*/g, ",").replace(/\s*\/\s*/g, "/");
if (/calc\([^)]+\)/.test(v)) v = v.replace(/calc\(([^)]+)\)/g, (all, k) => {
return all.replace(k, k.replace(/\s/g, ""));
});
if (/rgb/.test(v)) v = v.replace(/rgba?\(([^)]+)\)/g, (all, k) => {
const _k = k.trim().split(" ");
return all.replace(k, _k.map((i, index) => i.endsWith(",") ? i : i + (_k.length - 1 === index ? "" : ",")).join(""));
});
if (/hsl/.test(v)) v = v.replace(/hsla?\(([^)]+)\)/g, (all, k) => {
const _k = k.trim().split(" ");
return all.replace(k, _k.map((i, index) => i.endsWith(",") ? i : i + (_k.length - 1 === index ? "" : ",")).join(""));
});
if (/var\([^)]+\)/.test(v)) v = v.replace(/var\(([^)]+)\)/g, (all, k) => {
return all.replace(k, k.replace(/\s/g, "_"));
});
if (v.endsWith("!important")) return [v.replace(/\s*!important/, "").trim(), "!"];
return [v.trim(), ""];
}
function joinEmpty(str) {
return str.replace(/\(\s*/g, "(").replace(/\s*\)/g, ")").replace(/\s*,\s*/g, ",");
}
function isVar(s) {
return s.startsWith("var(--");
}
function getCustomPropertyName(s) {
var _s$match;
return (_s$match = s.match(/^var\((--[^),\s]+)\)$/)) === null || _s$match === void 0 ? void 0 : _s$match[1];
}
function normalizeFraction(s) {
return s.replace(/\s*\/\s*/g, "/");
}
function isSize(s) {
return cssMathFnRE.test(s) || numberWithUnitRE.test(s) || positionMap.includes(s);
}
function isColor(s) {
return isHex(s) || isRgb(s) || isHsl(s);
}
const browserReg = /-webkit-|-moz-osx-|-moz-|-ms-|-o-/g;
const linearGradientReg = /linear-gradient\(\s*to([\w\s]+),?([\-\w()#%\s.]+)?,([\-\w()#%\s.]+)?,?([\-\w#%\s.]+)?\)$/;
const linearGradientReg1 = /linear-gradient\(\s*([^,]*),?([\-\w()#%\s.]+)?,([\-\w()#%\s.]+)?,?([\-\w#%\s.]+)?\)$/;
const otherGradientReg = /(radial|conic)-gradient\(([\-\w()#%\s.]+)?,([\-\w()#%\s.]+)?,?([\-\w#%\s.]+)?\)$/;
const commaReplacer = "__comma__";
//#endregion
//#region src/align.ts
const alignMap = [
"align-self",
"align-items",
"align-content"
];
function align(key, val) {
if (!alignMap.includes(key)) return;
const [value, important] = transformImportant(val);
return `${important}${getLastName(key)}-${value.split(" ").reverse().map(getLastName).join("-")}`;
}
//#endregion
//#region src/animation.ts
const animationMap = [
"animation",
"animation-name",
"animation-duration",
"animation-delay",
"animation-timing-function",
"animation-iteration-count",
"animation-direction",
"animation-fill-mode",
"animation-play-state"
];
function animation(key, val) {
if (!animationMap.includes(key)) return;
const [value, important] = transformImportant(val);
return `${important}animate-[${joinWithUnderLine(value)}]`;
}
//#endregion
//#region src/aspect.ts
const aspectMap = ["aspect-ratio"];
function aspect(key, val, isV4) {
if (!aspectMap.includes(key)) return;
const [value, important] = transformImportant(val);
const prefix = getFirstName(key);
if (value === "auto") return `${important}${prefix}-${value}`;
if (isV4) {
const customProperty = getCustomPropertyName(value);
if (customProperty) {
if (customProperty === "--aspect-video") return `${important}aspect-video`;
return `${important}aspect-(${customProperty})`;
}
const normalized = normalizeFraction(value);
if (normalized === "1/1") return `${important}aspect-square`;
if (/^\d+\/\d+$/.test(normalized)) return `${important}aspect-${normalized}`;
}
return `${important}${prefix}${getVal(value)}`;
}
//#endregion
//#region src/box.ts
const validKey = ["box-shadow", "drop-shadow"];
const boxMap = [
"box-sizing",
"box-decoration-break",
"box-shadow",
"drop-shadow"
];
function box(key, val) {
if (!boxMap.includes(key)) return;
const [value, important] = transformImportant(val);
if (key.startsWith("box-decoration")) return `${important}box-decoration-${value}`;
if (key === "box-sizing") return `${important}box-${getFirstName(value)}`;
if (validKey.includes(key)) return `${important}shadow-[${value.split(" ").join("_")}]`;
}
//#endregion
//#region src/filter.ts
const hundredMap = [
"contrast",
"brightness",
"saturate"
];
const percent = [
"grayscale",
"invert",
"sepia"
];
const filterMap = ["filter", "backdrop-filter"];
function filter(key, val) {
if (!filterMap.includes(key)) return;
const [v, important] = transformImportant(val);
const [_, name, value] = v.match(/([\w-]+)\((.*)\)/);
if (hundredMap.includes(name) || percent.includes(name)) {
const hundred = getHundred(value);
if (Number.isNaN(hundred)) return `${important}${name}${getVal(value)}`;
return `${important}${name}${getVal(getHundred(value))}`;
}
if (name === "drop-shadow") return `${important}drop-${box(name, value)}`;
if (name === "hue-rotate") return `${important}${name}${getVal(value.slice(0, -3))}`;
return `${important}${name}${getVal(value)}`;
}
//#endregion
//#region src/backdrop.ts
const backdropMap = ["backdrop-filter"];
function backdrop(key, val) {
if (!backdropMap.includes(key)) return;
const [value, important] = transformImportant(val);
return `${important}backdrop-${filter(key, value)}`;
}
//#endregion
//#region src/background.ts
const backgroundMap = [
"background-color",
"background-attachment",
"background-position",
"background-size",
"background-image",
"background",
"background-blend-mode",
"background-origin",
"background-clip",
"background-repeat"
];
const lengthRe = "\\d*\\.?\\d+(?:px|em|rem|%|vw|vh)?";
const positionPair = `(${lengthRe})\\s+(${lengthRe})`;
const optimizedReg = new RegExp(`${positionPair}\\s*,\\s*${positionPair}`);
function background(key, val) {
if (!backgroundMap.includes(key)) return;
let [value, important] = transformImportant(val);
if (key === "background-size") return /\d/.test(value) ? `${important}bg${getVal(value, joinWithUnderLine, "length:", true)}` : `${important}bg${getVal(value, joinWithLine, "length:")}`;
if (key === "background-position") {
if (/\d/.test(value)) return `${important}bg${getVal(value, joinWithUnderLine, "position:")}`;
return `${important}bg${getVal(value, joinWithUnderLine, "position:")}`;
}
if (["background-color", "background-attachment"].includes(key)) return `${important}bg${getVal(value, joinWithUnderLine)}`;
if (["background", "background-image"].includes(key)) {
if (isSize(value)) return `${important}bg${getVal(value, joinWithLine, "position:")}`;
const temp = value.replace(/rgba?\([^)]+\)/g, "temp");
if (/\)\s*,/.test(temp)) return `bg-[${matchMultipleBgAttrs(value)}]`;
if (value.startsWith("linear-gradient")) {
const newValue = value.replace(/rgba?\(([^)]+)\)/g, (all, v) => all.replace(v, v.replace(/\s*,\s*/g, commaReplacer)));
const matcher = newValue.match(linearGradientReg);
if (matcher) {
let [direction, from, via, to] = matcher.slice(1);
direction = direction.split(" ").map((item) => item[0]).join("");
return direction ? `bg-gradient-to-${direction}${getLinearGradientPosition$1(from, via, to)}` : getLinearGradientPosition$1(from, via, to);
}
const matcher1 = newValue.match(linearGradientReg1);
if (!matcher1) return `bg-[${matchMultipleBgAttrs(value)}]`;
return `bg-gradient-linear bg-gradient-[${matcher1[1]}${matcher1[2] ? `,${matcher1[2].replace(/\s+/, "_").replaceAll(commaReplacer, ",")}` : ""},${matcher1[3].replace(/\s+/, "_").replaceAll(commaReplacer, ",")}]`;
} else if (/^(?:radial|conic)-gradient/.test(value)) {
const newValue = value.replace(/rgba?\(([^)]+)\)/g, (all, v) => all.replace(v, v.replace(/\s*,\s*/g, commaReplacer)));
const matcher = newValue.match(otherGradientReg);
if (!matcher) return "";
const name = matcher[1];
let [from, via, to] = matcher.slice(2);
return `bg-gradient-${name}${getLinearGradientPosition$1(from, via, to)}`;
}
const match = value.match(/^rgba?\([^)]+\)$/);
if (match) {
const rgb = match[0];
value = value.replace(rgb, `[${rgb}]`);
}
const urlMatch = value.match(/^url\(["'\s.\-\w/@]*\)$/);
if (urlMatch) return `bg-${value.replace(urlMatch[0], `[${urlMatch[0].replace(/['"]/g, "")}]${important}`)}`;
const safeValueMap = new Map();
let i = 0;
const safeValue = value.replace(/url\([^)]+\)/g, (m) => {
const key$1 = `__URL__${i++}`;
safeValueMap.set(key$1, m);
return key$1;
}).replace(/rgba?\([^)]+\)/g, (m) => {
const key$1 = `__RGBA__${i++}`;
safeValueMap.set(key$1, m);
return key$1;
});
if (safeValue.includes("/")) {
const [positionRawSafe, afterSlashRawSafe] = safeValue.split("/").map((v) => v.trim());
const afterSlashPartsSafe = afterSlashRawSafe.split(/\s+/);
const sizeParts = afterSlashPartsSafe.slice(0, 2);
const others = afterSlashPartsSafe.slice(2).map((v) => {
const m = v.match(/__URL__(\d+)/);
if (m) return safeValueMap.get(`__URL__${m[1]}`);
const m1 = v.match(/__RGBA__(\d+)/);
if (m1) return safeValueMap.get(`__RGBA__${m1[1]}`);
return v;
});
const size$1 = sizeParts.join(" ");
const posStr = background("background-position", `${positionRawSafe}${important ? " !important" : ""}`);
const sizeStr = size$1 ? background("background-size", `${size$1}${important ? " !important" : ""}`) : "";
let othersStr = "";
if (others.length) othersStr = others.map((v) => background(key, `${v}${important ? " !important" : ""}`)).join(" ");
return [
posStr,
sizeStr,
othersStr
].filter(Boolean).join(" ");
} else if (safeValue.includes(" ")) {
const m = safeValue.match(optimizedReg);
if (m) {
const others = safeValue.replace(m[0], "").trim().split(" ").map((v) => {
const m$1 = v.match(/__URL__(\d+)/);
if (m$1) return safeValueMap.get(`__URL__${m$1[1]}`);
const m1 = v.match(/__RGBA__(\d+)/);
if (m1) return safeValueMap.get(`__RGBA__${m1[1]}`);
return v;
});
let othersStr = "";
if (others.length) othersStr = others.map((v) => background(key, `${v}${important ? " !important" : ""}`)).join(" ");
const posStr = background("background-position", `${m[0]}${important ? " !important" : ""}`);
return [posStr, othersStr].filter(Boolean).join(" ");
}
const parts = safeValue.split(/\s+/).map((v) => {
const m$1 = v.match(/__URL__(\d+)/);
if (m$1) return safeValueMap.get(`__URL__${m$1[1]}`);
const m1 = v.match(/__RGBA__(\d+)/);
if (m1) return safeValueMap.get(`__RGBA__${m1[1]}`);
return v;
});
let r = parts.map((v) => background(key, `${v}${important ? " !important" : ""}`)).join(" ");
const bgPositionReg = /bg-\[position:([^\]]*)\]/g;
const bgPosition = r.match(bgPositionReg);
if (bgPosition && bgPosition.length > 1) {
const t = `bg-[position:${bgPosition.map((item) => item.replace(bgPositionReg, "$1")).join("_")}]`;
r = `${r.replace(bgPositionReg, "").replace(/\s+/g, " ").split(" ").filter(Boolean).concat([t]).join(" ")}`;
}
return r;
}
return `${important}bg${getVal(value, joinWithLine)}`;
} else if (key === "background-blend-mode") return `${important}bg-blend-${value}`;
return `${important}${replaceBackground(key, value)}-${transformBox(value)}`;
}
function replaceBackground(s, val) {
if (val.endsWith("repeat")) return "bg";
return s.replace("background", "bg");
}
function transformBox(s) {
const reg = /border|content|padding-box/;
if (reg.test(s)) return s.replace("-box", "");
if (s.startsWith("repeat-")) return s.replace("repeat-", "");
return joinWithLine(s);
}
function getLinearGradientPosition$1(from, via, to) {
let result = "";
if (via && !to) {
to = via;
via = "";
}
if (from) {
from = from.replaceAll(commaReplacer, ",");
const [fromColor, fromPosition] = from.split(" ");
if (fromPosition) result += ` from${getVal(fromColor)} from${getVal(fromPosition)}`;
else if (fromColor) result += ` from${getVal(fromColor)}`;
}
if (via) {
via = via.replaceAll(commaReplacer, ",");
const [viaColor, viaPosition] = via.split(" ");
if (viaPosition) result += ` via${getVal(viaColor)} via${getVal(viaPosition)}`;
else if (viaColor) result += ` via${getVal(viaColor)}`;
}
if (to) {
to = to.replaceAll(commaReplacer, ",");
const [toColor, toPosition] = to.split(" ");
if (toPosition) result += ` to${getVal(toColor)} to${getVal(toPosition)}`;
else if (toColor) result += ` to${getVal(toColor)}`;
}
return result;
}
const CONSTANTFLAG = "__transform_to_unocss__";
function matchMultipleBgAttrs(value) {
const map$2 = {};
let i = 0;
value = value.replace(/(rgba?|hsla?|lab|lch|hwb|color)\(\)*\)/, (_) => {
map$2[i++] = _;
return `${CONSTANTFLAG}${i}}`;
});
value = value.split(/\)\s*,/).map((item) => `${item.replace(/\s*,\s*/g, ",").replace(/\s+/g, "_")}`).join("),");
Object.keys(map$2).forEach((key) => {
value = value.replace(`${CONSTANTFLAG}${key}}`, map$2[key]);
});
return value;
}
//#endregion
//#region src/border.ts
const borderSize = [
"border-left",
"border-top",
"border-right",
"border-bottom"
];
const widthMatchMap = {
"inline": "x",
"block": "y",
"inline-start": "s",
"inline-end": "e",
"top": "t",
"right": "r",
"bottom": "b",
"left": "l"
};
const radiusMatchMap = {
top: "t",
right: "r",
bottom: "b",
left: "l",
end: "e",
start: "s"
};
function border(key, val) {
const [value, important] = transformImportant(val);
if (key === "border-spacing") return `${important}${key}${getVal(value, joinWithUnderLine, "", true)}`;
if (key === "border-color") return `${important}border${getVal(value)}`;
const radiusMatch = key.match(/border(-start|-end|-top|-bottom)?(-start|-end|-left|-right)?-radius/);
if (radiusMatch) {
const [_, start, end] = radiusMatch;
if (start && end) return `${important}rounded-${radiusMatchMap[start.slice(1)]}${radiusMatchMap[end.slice(1)]}${getVal(value, joinWithUnderLine)}`;
if (start || end) return `${important}rounded-${radiusMatchMap[(start === null || start === void 0 ? void 0 : start.slice(1)) || (end === null || end === void 0 ? void 0 : end.slice(1))]}${getVal(value, joinWithUnderLine)}`;
return `${important}rounded${getVal(value, joinWithUnderLine, "", true)}`;
}
const widthMatch = key.match(/border(-inline|-block|-inline-start|-inline-end|-top|-right|-bottom|-left)?-(width|color)/);
if (widthMatch) {
if (widthMatch[1]) {
const widthType = widthMatchMap[widthMatch[1].slice(1)];
return `${important}border-${widthType}${getVal(value, joinWithUnderLine, "length:")}`;
}
return `${important}border${getVal(value, joinWithUnderLine, "length:")}`;
}
if (borderSize.some((b) => key.startsWith(b))) {
const keys = key.split("-");
if (keys.slice(-1)[0] === "radius") return value.split(" ").map((v) => `${important}rounded-${keys.slice(1, -1).map((s) => s[0]).join("")}${getVal(v)}`).join(" ");
return value.split(" ").filter((item) => item !== "solid").map((v) => `${important}border-${key.split("-")[1][0]}${getVal(v)}`).join(" ");
}
if (key.startsWith("border-image")) return;
if (/^\d[%|(px)rem]$/.test(value) || key === "border-collapse") return `${important}border-${value}`;
if (key === "border-width" || key === "border-style") return `${important}border${getVal(value)}`;
if (key === "border-color") {
if (value === "currentColor") return `${important}border-current`;
return `${important}border${getVal(value)}`;
}
return value.split(" ").map((v) => {
if (value === "currentColor") return `${important}border-current`;
return `${important}border${getVal(v)}`;
}).join(" ");
}
//#endregion
//#region src/color.ts
const colorMap = ["color", "color-scheme"];
function color(key, val, isV4) {
if (!colorMap.includes(key)) return;
const [value, important] = transformImportant(val);
if (key === "color-scheme") {
if (!isV4) return;
return `${important}scheme-${joinWithLine(value)}`;
}
return `${important}text${getVal(value)}`;
}
//#endregion
//#region src/column.ts
const columnMap = ["column-gap"];
function column(key, val) {
if (!columnMap.includes(key)) return;
const [value, important] = transformImportant(val);
if (key === "column-gap") return `${important}gap-x${getVal(value)}`;
return `${important}${key}${getVal(value)}`;
}
//#endregion
//#region src/content.ts
const contentMap = ["content", "content-visibility"];
function content(key, val) {
if (!contentMap.includes(key)) return;
const [value, important] = transformImportant(val, false);
if (key === "content-visibility") return `content-visibility-${value}${important}`;
const match = value.match(/^(["'])(.*?)\1$/);
if (match) return `content-['${match[2].replace(/\s/g, "_")}']${important}`;
return `content-[${value}]${important}`;
}
//#endregion
//#region src/cursor.ts
const cursorMap = ["cursor"];
function cursor(key, val) {
if (!cursorMap.includes(key)) return;
const [value, important] = transformImportant(val);
return `${important}${key}${getVal(value)}`;
}
//#endregion
//#region src/display.ts
const displayMap = [
"display",
"visibility",
"position"
];
function display(key, val) {
if (!displayMap.includes(key)) return;
const [value, important] = transformImportant(val);
if (value === "none") return `${important}hidden`;
if (value === "hidden") return `${important}invisible`;
return `${important}${value}`;
}
//#endregion
//#region src/empty.ts
const emptyKey = {
show: "visible",
hide: "hidden"
};
const emptyMap = ["empty-cells"];
function empty(key, val) {
if (!emptyMap.includes(key)) return;
const [value, important] = transformImportant(val);
if (emptyKey[value]) return `${important}table-empty-cells-${emptyKey[value] ?? value}`;
}
//#endregion
//#region src/flex.ts
const lastMaps = ["flex-basis", "flex-shrink"];
const flexMap = [
"flex",
"flex-grow",
"flex-shrink",
"flex-basis",
"flex-wrap",
"flex-direction"
];
function flex(key, val) {
if (!flexMap.includes(key)) return;
const [value, important] = transformImportant(val);
if (key === "flex-shrink" && value === "1") return `${important}shrink`;
if (key === "flex-grow") {
if (value === "1") return `${important}flex-grow`;
return `${important}flex-grow-${value}`;
}
if (lastMaps.includes(key)) return `${important}${getLastName(key)}${getVal(value)}`;
if (value === "1") return `${important}flex-1`;
const firstVal = value[0];
if (key === "flex" && (firstVal === "0" || firstVal === "1")) return `${important}flex-[${joinWithUnderLine(value)}]`;
return `${important}${getFirstName(key)}-${value.replace("column", "col")}`;
}
//#endregion
//#region src/float.ts
const floatMap = [
"float",
"clear",
"pointer-events",
"fill",
"order",
"perspective",
"columns",
"break-after",
"break-inside",
"break-before"
];
function float(key, val) {
if (!floatMap.includes(key)) return;
const [value, important] = transformImportant(val);
if (positionMap.includes(value)) return `${important}${key}${getVal(value)}`;
return `${important}${key}${getVal(value)}`;
}
//#endregion
//#region src/font.ts
const stretchMap = new Set([
"ultra-condensed",
"extra-condensed",
"condensed",
"semi-condensed",
"normal",
"semi-expanded",
"expanded",
"extra-expanded",
"ultra-expanded"
]);
function font(key, val, isV4) {
const [value, important] = transformImportant(val);
if (key === "font-size") {
if ([
"inherit",
"initial",
"revert",
"unset",
"revert-layer"
].includes(value)) return `${important}font-size-${value}`;
return `${important}text${getVal(value)}`;
}
if (key === "font-weight") return `${important}font-[weight:${value}]`;
if (key === "font-feature-settings") {
if (!isV4) return;
const customProperty = getCustomPropertyName(value);
if (customProperty) return `${important}font-features-(${customProperty})`;
return `${important}font-features-[${value}]`;
}
if (key === "font-smoothing" || key === "osx-font-smoothing") {
if (value === "auto") return `${important}subpixel-antialiased`;
if (value === "antialiased" || value === "grayscale") return `${important}antialiased`;
return;
}
if (key === "font-stretch") {
if (!isV4) return;
const customProperty = getCustomPropertyName(value);
if (customProperty) return `${important}font-stretch-(${customProperty})`;
if (stretchMap.has(value) || /^\d+(?:\.\d+)?%$/.test(value)) return `${important}font-stretch-${value}`;
return `${important}font-stretch${getVal(value)}`;
}
if (key === "font-family") {
const match = value.match(/ui-(\w{0,4})/);
if (!match) return `${important}font-[family-name:${joinWithUnderLine(val)}]`;
const [_, family] = match;
return `${important}font-${family}`;
}
if (key === "font-style") {
if (value === "normal") return `${important}not-italic`;
if (value === "italic") return `${important}italic`;
return;
}
if (key === "font-variant-numeric") {
if (value === "normal") return `${important}normal-nums`;
return `${important}${value}`;
}
return transformFont(value, important);
}
function transformFont(v, important) {
return v.split(" ").map((item) => /^\d/.test(item) ? `${important}text-[${item}]` : `${important}font-${item}`).join(" ");
}
//#endregion
//#region src/grid.ts
const gridMap = [
"grid",
"grid-row",
"grid-column",
"grid-template-columns",
"grid-template-rows",
"grid-auto-flow",
"grid-auto-columns",
"grid-auto-rows",
"grid-column-start",
"grid-column-end",
"grid-row-start",
"grid-row-end"
];
function grid(key, val) {
if (!gridMap.includes(key)) return;
const [value, important] = transformImportant(val);
if (key.startsWith("grid-template")) {
const matcher$1 = value.match(/repeat\s*\(\s*(\d+)/);
if (matcher$1) return `${important}grid-${getLastName(key) === "rows" ? "rows" : "cols"}-${matcher$1[1]}`;
return `${important}grid-${getLastName(key) === "rows" ? "rows" : "cols"}-${value.includes(" ") ? `[${joinWithUnderLine(value)}]` : value}`;
}
if (key === "grid-auto-flow") return `${important}grid-flow-${joinWithLine(value).replace("column", "col")}`;
if (key.startsWith("grid-auto")) {
const matcher$1 = value.match(/minmax\s*\(\s*0\s*,\s*1fr/);
return `${important}auto-${getLastName(key) === "rows" ? "rows" : "cols"}-${matcher$1 ? "fr" : getFirstName(value)}`;
}
const matcher = value.match(/span\s+(\d)/);
if (matcher) return `${important}${key.slice(5).replace("column", "col")}-span-${matcher[1]}`;
if (value === "1/-1") return `${important}${key.slice(5).replace("column", "col")}-span-full`;
return `${important}${key.slice(5).replace("column", "col")}-${value}`;
}
//#endregion
//#region src/isolation.ts
const isolationMap = ["isolation"];
function isolation(key, val) {
if (!isolationMap.includes(key)) return;
const [value, important] = transformImportant(val);
if (val === "isolate") return `${important}${value}`;
return `${important}${key}-${value}`;
}
//#endregion
//#region src/justify.ts
const justifyMap = [
"justify",
"justify-content",
"justify-items",
"justify-self"
];
function justify(key, val) {
if (!justifyMap.includes(key)) return;
const [value, important] = transformImportant(val);
if (value.includes(" ")) return `${key}-${value.split(" ").reverse().map(getLastName).join("-")}${important}`;
if (key === "justify-content") return `${important}justify-${getLastName(value)}`;
return `${important}${key}-${getLastName(value)}`;
}
//#endregion
//#region src/letter.ts
const letterMap = ["letter-spacing"];
function letter(key, val) {
if (!letterMap.includes(key)) return;
const [value, important] = transformImportant(val);
return `${important}tracking${getVal(value)}`;
}
//#endregion
//#region src/line.ts
const lineKey = {
1: "none",
1.25: "tight",
1.375: "snug",
1.5: "normal",
1.625: "relaxed",
2: "loose"
};
const lineMap = ["line-clamp", "line-height"];
function line(key, val, isV4) {
if (!lineMap.includes(key)) return;
const [value, important] = transformImportant(val);
if (key === "line-clamp") {
if (value === "none" || value === "unset") return `${important}line-clamp-none`;
const customProperty = getCustomPropertyName(value);
if (isV4 && customProperty) return `${important}line-clamp-(${customProperty})`;
if (/^\d+$/.test(value)) return `${important}line-clamp-${value}`;
return `${important}line-clamp${getVal(value)}`;
}
if (lineKey[value]) return `${important}leading-${lineKey[value]}`;
return `${important}leading${getVal(value, (v) => /\d$/.test(v) ? `[${v}]` : v)}`;
}
//#endregion
//#region src/list.ts
const listMap = [
"list-style",
"list-style-type",
"list-style-position",
"list-style-image",
"caption-side",
"appearance",
"touch-action",
"table-layout",
"caret-color",
"backface-visibility",
"stroke-width",
"stroke",
"accent",
"accent-color"
];
function list(key, val) {
if (!listMap.includes(key)) return;
const [value, important] = transformImportant(val);
if (key === "list-style-image") {
if (value === "none") return `${important}list-image-none`;
return `${important}list-image${getVal(value)}`;
}
return `${important}${getFirstName(key)}${getVal(value)}`;
}
//#endregion
//#region src/margin.ts
const map$1 = {
"margin-left": "ml",
"margin-right": "mr",
"margin-top": "mt",
"margin-bottom": "mb",
"margin-inline-start": "ms",
"margin-inline-end": "me",
"padding-left": "pl",
"padding-right": "pr",
"padding-top": "pt",
"padding-bottom": "pb",
"padding-inline-start": "ps",
"padding-inline-end": "pe"
};
function transformMargin(key, val) {
const [value, important] = transformImportant(val);
const specail = map$1[key];
if (specail) return `${important}${specail}${getVal(value)}`;
const values = value.split(" ");
const len = values.length;
if (len === 1) return `${important}${key[0]}${getVal(values[0])}`;
if (len === 2) return `${important}${key[0]}x${getVal(values[1])} ${important}${key[0]}y${getVal(values[0])}`;
if (len === 3) return `${important}${key[0]}x${getVal(values[1])} ${important}${key[0]}t${getVal(values[0])} ${important}${key[0]}b${getVal(values[2])}`;
return `${important}${key[0]}t${getVal(values[0])} ${important}${key[0]}b${getVal(values[2])} ${important}${key[0]}l${getVal(values[3])} ${important}${key[0]}r${getVal(values[1])}`;
}
//#endregion
//#region src/mask.ts
const maskMap = [
"mask-position",
"mask-origin",
"mask-repeat",
"mask-size",
"mask-type",
"mask-image",
"mask-mode",
"mask-composite",
"mask-clip",
"mask-type"
];
function mask(key, val) {
if (!maskMap.includes(key)) return;
const [value, important] = transformImportant(val);
if ([
"mask-clip",
"mask-origin",
"mask-type"
].includes(key)) return `${important}${key}-${getFirstName(value)}`;
if (["mask-mode", "mask-composite"].includes(key)) return `${important}${getFirstName(key)}-${getFirstName(value)}`;
if (["mask-position", "mask-size"].includes(key)) {
if (isDynamic(value)) return `${important}${key}${getVal(value)}`;
if (/\d/.test(value)) return `${important}[${key}:${joinWithUnderLine(value)}]`;
return `${important}${getFirstName(key)}-${joinWithLine(value)}`;
}
if (key === "mask-repeat") {
if (value.includes("-")) return `${important}mask-${value}`;
return `${important}${key}-${value}`;
}
if (key === "mask-image") {
if (isGradient(value)) {
const newValue = value.replace(/rgba?\(([^)]+)\)/g, (all, v) => all.replace(v, v.replace(/\s*,\s*/g, commaReplacer)));
const matcher = newValue.match(linearGradientReg);
if (!matcher) return;
let [direction, from, via, to] = matcher.slice(1);
direction = direction.split(" ").map((item) => item[0]).join("");
const type = value.startsWith("linear-gradient") ? "linear" : value.startsWith("radial-gradient") ? "radial" : value.startsWith("conic-gradient") ? "conic" : "";
return direction ? `${getLinearGradientPosition(`mask-${direction}`, from, via, to).trim()}` : getLinearGradientPosition(`mask-${type}`, from, via, to).trim();
}
return `${important}mask${getVal(value)}`;
}
return `${important}${key}${getVal(value)}`;
}
function getLinearGradientPosition(prefix, from, via, to) {
let result = "";
if (via && !to) {
to = via;
via = "";
}
if (from) {
from = from.replaceAll(commaReplacer, ",");
const [fromColor, fromPosition] = from.split(" ");
if (fromPosition) result += ` ${prefix}-from-${isRgb(fromColor) || isVar(fromColor) ? `[${fromColor}]` : fromColor} ${prefix}-from${getVal(fromPosition)}`;
else if (fromColor) result += ` ${prefix}-from-${isRgb(fromColor) || isVar(fromColor) ? `[${fromColor}]` : fromColor}`;
}
if (via) {
via = via.replaceAll(commaReplacer, ",");
const [viaColor, viaPosition] = via.split(" ");
if (viaPosition) result += ` ${prefix}-via${isRgb(viaColor) || isVar(viaColor) ? `[${viaColor}]` : viaColor} ${prefix}-via${getVal(viaPosition)}`;
else if (viaColor) result += ` ${prefix}-via${isRgb(viaColor) || isVar(viaColor) ? `[${viaColor}]` : viaColor}`;
}
if (to) {
to = to.replaceAll(commaReplacer, ",");
const [toColor, toPosition] = to.split(" ");
if (toPosition) result += ` ${prefix}-to-${isRgb(toColor) || isVar(toColor) ? `[${toColor}]` : toColor} ${prefix}-to${getVal(toPosition)}`;
else if (toColor) result += ` ${prefix}-to-${isRgb(toColor) || isVar(toColor) ? `[${toColor}]` : toColor}`;
}
return result;
}
//#endregion
//#region src/max.ts
const maxMap = [
"max-height",
"max-width",
"max-block-size",
"max-inline-size",
"min-height",
"min-width",
"min-block-size",
"min-inline-size"
];
const prefixMap$1 = {
"max-height": "max-h",
"max-width": "max-w",
"max-block-size": "max-block",
"max-inline-size": "max-inline",
"min-height": "min-h",
"min-width": "min-w",
"min-block-size": "min-block",
"min-inline-size": "min-inline"
};
function max(key, val, isV4) {
if (!maxMap.includes(key)) return;
if (!isV4 && /(?:inline|block)-size$/.test(key)) return;
const [value, important] = transformImportant(val);
const prefix = prefixMap$1[key];
if (isV4) {
const customProperty = getCustomPropertyName(value);
if (customProperty) return `${important}${prefix}-(${customProperty})`;
const normalized = normalizeFraction(value);
if (/^\d+\/\d+$/.test(normalized)) return `${important}${prefix}-${normalized}`;
const alias = getSizeAlias$1(key, value);
if (alias) return `${important}${prefix}-${alias}`;
}
const attributeValue = isCalc(value) || isVar(value) ? getVal(value) : getVal(getFirstName(value));
return `${important}${prefix}${attributeValue}`;
}
function getSizeAlias$1(key, value) {
const viewportKey = /width|inline/.test(key) ? "100vw" : "100vh";
const map$2 = {
"auto": "auto",
"1px": "px",
"100%": "full",
[viewportKey]: "screen",
"100dvw": "dvw",
"100dvh": "dvh",
"100lvw": "lvw",
"100lvh": "lvh",
"100svw": "svw",
"100svh": "svh",
"min-content": "min",
"max-content": "max",
"fit-content": "fit",
"none": "none"
};
return map$2[value];
}
//#endregion
//#region src/mix.ts
function mix(key, val) {
const [value, important] = transformImportant(val);
return `${important}mix-blend-${value}`;
}
//#endregion
//#region src/object.ts
const objectMap = ["object-fit", "object-position"];
function object(key, val) {
if (!objectMap.includes(key)) return;
const [value, important] = transformImportant(val);
if (key === "object-position") return `${important}${getFirstName(key)}-${joinWithLine(value)}`;
return `${important}${getFirstName(key)}-${value}`;
}
//#endregion
//#region src/opacity.ts
const opacityMap = ["opacity"];
function opacity(key, val) {
if (!opacityMap.includes(key)) return;
const [value, important] = transformImportant(val);
if (isPercent(val)) return `${important}op-${value.replace(/%/g, "")}`;
return `${important}op-${+value * 100}`;
}
//#endregion
//#region src/outline.ts
const outlineMap = [
"outline-width",
"outline-style",
"outline-offset",
"outline",
"outline-color"
];
function outline(key, val) {
if (!outlineMap.includes(key)) return;
const [value, important] = transformImportant(val);
if (key === "outline-offset") return `${important}${key}-${value}`;
return `${important}${getFirstName(key)}-${value}`;
}
//#endregion
//#region src/overflow.ts.ts
const overflowMap = [
"overflow",
"overflow-x",
"overflow-y",
"overflow-wrap"
];
function overflow(key, val) {
if (!overflowMap.includes(key)) return;
const [value, important] = transformImportant(val);
if (key === "overflow-wrap") return `${important}wrap-${value}`;
return `${important}${key}-${value}`;
}
//#endregion
//#region src/overscroll.ts
const overscrollMap = [
"overscroll-behavior",
"overscroll-behavior-x",
"overscroll-behavior-y"
];
function overscroll(key, val) {
if (!overscrollMap.includes(key)) return;
const [value, important] = transformImportant(val);
const [prefix, _, suffix] = key.split("-");
if (suffix) return `${important}${prefix}-${suffix}-${value}`;
return `${important}${prefix}-${value}`;
}
//#endregion
//#region src/place.ts
const placeMap = [
"place-content",
"place-items",
"place-self"
];
function place(key, val) {
if (!placeMap.includes(key)) return;
const [value, important] = transformImportant(val);
if (value.includes(" ")) return `${key}-${value.split(" ").reverse().map(getLastName).join("-")}${important}`;
return `${important}${key}-${getLastName(value)}`;
}
//#endregion
//#region src/resize.ts
const map = {
vertical: "y",
horizontal: "x"
};
function resize(key, val) {
const [value, important] = transformImportant(val);
if (value === "both") return `${important}${key}`;
return `${important}${key}-${map[value] || value}`;
}
//#endregion
//#region src/row.ts
const rowMap = ["row-gap"];
function row(key, val) {
if (!rowMap.includes(key)) return;
const [value, important] = transformImportant(val);
return `${important}gap-y${getVal(value)}`;
}
//#endregion
//#region src/scroll.ts
const scrollMap = [
"scroll-snap-type",
"scroll-snap-stop",
"scroll-snap-align",
"scroll-padding",
"scroll-padding-inline",
"scroll-padding-block",
"scroll-padding-inline-start",
"scroll-padding-inline-end",
"scroll-padding-block-start",
"scroll-padding-block-end",
"scroll-padding-top",
"scroll-padding-right",
"scroll-padding-bottom",
"scroll-padding-left",
"scroll-margin",
"scroll-margin-inline",
"scroll-margin-block",
"scroll-margin-inline-start",
"scroll-margin-inline-end",
"scroll-margin-block-start",
"scroll-margin-block-end",
"scroll-margin-top",
"scroll-margin-right",
"scroll-margin-bottom",
"scroll-margin-left",
"scroll-behavior"
];
function scroll(key, val) {
if (!scrollMap.includes(key)) return;
const [value, important] = transformImportant(val);
if (key.startsWith("scroll-snap")) {
if (value.includes(" ")) {
const [pre, after] = value.split(" ");
return `${important}snap-${pre}${getVal(after)}`;
}
return `${important}snap-${value}`;
}
if (key === "scroll-behavior") return `${important}scroll-${value}`;
const [_, prefix, suffix, way] = key.match(/scroll-(margin|padding)-?(\w+)?-?(\w+)?/);
if (suffix === "inline" && way) return `${important}scroll-${prefix[0]}${way[0]}${getVal(value)}`;
if (suffix) return `${important}scroll-${prefix[0]}${suffix[0]}${getVal(value)}`;
return `${important}scroll-${prefix[0]}${getVal(value)}`;
}
//#endregion
//#region src/size.ts
const sizeMap = [
"width",
"height",
"inline-size",
"block-size"
];
const prefixMap = {
"width": "w",
"height": "h",
"inline-size": "inline",
"block-size": "block"
};
function size(key, val, isV4) {
if (!sizeMap.includes(key)) return;
if (!isV4 && ["inline-size", "block-size"].includes(key)) return;
const [value, important] = transformImportant(val);
const prefix = prefixMap[key];
if (isV4) {
const customProperty = getCustomPropertyName(value);
if (customProperty) return `${important}${prefix}-(${customProperty})`;
const normalized = normalizeFraction(value);
if (/^\d+\/\d+$/.test(normalized)) return `${important}${prefix}-${normalized}`;
const alias = getSizeAlias(key, value);
if (alias) return `${important}${prefix}-${alias}`;
}
return `${important}${prefix}${getVal(value, isDynamic(value) ? void 0 : getFirstName)}`;
}
function getSizeAlias(key, value) {
const viewportKey = ["width", "inline-size"].includes(key) ? "100vw" : "100vh";
const map$2 = {
"auto": "auto",
"1px": "px",
"100%": "full",
[viewportKey]: "screen",
"100dvw": "dvw",
"100dvh": "dvh",
"100lvw": "lvw",
"100lvh": "lvh",
"100svw": "svw",
"100svh": "svh",
"min-content": "min",
"max-content": "max",
"fit-content": "fit"
};
return map$2[value];
}
//#endregion
//#region src/text.ts
const textMap = [
"text-align",
"text-align-last",
"text-decoration",
"text-decoration-line",
"text-decoration-style",
"text-decoration-color",
"text-decoration-thickness",
"text-indent",
"text-underline-offset",
"text-transform",
"text-wrap",
"text-overflow",
"text-justify",
"text-shadow"
];
function text(key, val, isV4) {
if (!textMap.includes(key)) return;
const [value, important] = transformImportant(val);
if (positionMap.includes(value)) return `${important}text-${value}`;
if (key === "text-decoration-line") {
if (value === "none") return `${important}no-underline`;
return `${important}${value}`;
}
if (key === "text-transform") {
if (value === "none") return `${important}normal-case`;
return `${important}${value}`;
}
if (key === "text-decoration") return value.split(" ").map((v) => v ? `${important}${v}` : "").join(" ");
if (key === "text-shadow") {
if (!isV4) return `${important}text${getVal(value)}`;
if (value === "none") return `${important}text-shadow-none`;
const customProperty = getCustomPropertyName(value);
if (customProperty) return `${important}text-shadow-(${customProperty})`;
return `${important}text-shadow-[${joinWithUnderLine(value)}]`;
}
if (key.startsWith("text-decoration") || key === "text-indent") return `${important}${key.split("-")[1]}${getVal(value)}`;
if (key === "text-underline-offset") return `${important}underline-offset-${value}`;
if ([
"inherit",
"initial",
"revert",
"unset",
"revert-layer"
].includes(value)) return `${important}text-align-${value}`;
return `${important}text${getVal(value)}`;
}
//#endregion
//#region src/top.ts
const topMap = [
"top",
"right",
"bottom",
"left",
"field-sizing",
"forced-color-adjust",
"hyphens",
"gap",
"gap-x",
"gap-y"
];
function top(key, val) {
if (!topMap.includes(key)) return;
const [value, important] = transformImportant(val);
return `${important}${key}${getVal(value)}`;
}
//#endregion
//#region src/transform.ts
const transformMap = [
"transform",
"transform-origin",
"transform-style",
"perspective",
"perspective-origin",
"rotate",
"scale",
"skew",
"translate"
];
function transform(key, val, isV4) {
if (!transformMap.includes(key)) return;
const [v, important] = transformImportant(val);
if (key === "transform-origin") {
if (isVar(v) || isCalc(v)) return `${important}origin${getVal(v)}`;
return `${important}origin-${/\d/.test(v) && v.includes(" ") ? `[${joinWithUnderLine(v)}]` : joinWithLine(v)}`;
}
if (key === "transform-style") return `${important}transform-${v}`;
if (key === "perspective") return getBaseUtility("perspective", v, important, isV4);
if (key === "perspective-origin") {
if (!isV4) return;
return getBaseUtility("perspective-origin", v, important, isV4);
}
if (key === "rotate") return getRotateUtility(v, important, isV4);
if (key === "scale") return getScaleUtility(splitTransformValues(v), important, isV4);
if (key === "skew") return getSkewUtility(splitTransformValues(v), important, isV4);
if (key === "translate") return getTranslateUtility(splitTransformValues(v), important, isV4, true);
if (v === "none") return `${important}${key}-none`;
return joinEmpty(v).split(" ").map((item) => {
const matcher = item.match(/([a-z]+)(3d)?([A-Z])?\((.*)\)/);
if (!matcher) return void 0;
const [_, namePrefix, _is3d, nameSuffix, value] = matcher;
const values = splitTransformValues(value);
const axis = nameSuffix === null || nameSuffix === void 0 ? void 0 : nameSuffix.toLowerCase();
if (namePrefix === "rotate") return getRotateUtility(values[0], important, isV4, axis);
if (namePrefix === "scale") return getScaleUtility(values, important, isV4, axis);
if (namePrefix === "translate") return getTranslateUtility(values, important, isV4, false, axis);
if (namePrefix === "skew") return getSkewUtility(values, important, isV4, axis);
return void 0;
}).filter(Boolean).join(" ");
}
function splitTransformValues(value) {
return joinEmpty(value).replace(/,(?![^()]*\))/g, " ").split(" ").filter(Boolean);
}
function getBaseUtility(prefix, value, important, isV4) {
const customProperty = getCustomPropertyName(value);
if (isV4 && customProperty) return `${important}${prefix}-(${customProperty})`;
if (prefix === "perspective-origin" && value.includes(" ")) {
if (!/\d/.test(value) && !isVar(value) && !isCalc(value)) return `${important}${prefix}-${joinWithLine(value)}`;
return `${important}${prefix}-[${joinWithUnderLine(value)}]`;
}
return `${important}${prefix}${getVal(value)}`;
}
function getRotateUtility(value, important, isV4, axis) {
const prefix = axis ? `rotate-${axis}` : "rotate";
if (!axis && value === "none") return `${important}rotate-none`;
const customProperty = getCustomPropertyName(value);
if (isV4 && customProperty) return `${important}${prefix}-(${customProperty})`;
const simpleAngle = getSimpleAngle(value);
if (isV4 && simpleAngle) {
const [negative, amount] = simpleAngle;
return `${important}${negative ? "-" : ""}${prefix}-${amount}`;
}
return `${important}${prefix}${getVal(value)}`;
}
function getScaleUtility(values, important, isV4, axis) {
const prefix = axis ? `scale-${axis}` : "scale";
if (!axis && values[0] === "none") return `${important}scale-none`;
if (values.length > 1) {
if (!axis && values.every((value$1) => value$1 === values[0])) return getScaleUtility([values[0]], important, isV4);
return `${important}${prefix}-[${values.join("_")}]`;
}
const value = values[0];
const customProperty = getCustomPropertyName(value);
if (isV4 && customProperty) return `${important}${prefix}-(${customProperty})`;
const scaleAmount = getScaleAmount(value);
if (isV4 && scaleAmount) {
const [negative, amount] = scaleAmount;
return `${important}${negative ? "-" : ""}${prefix}-${amount}`;
}
return `${important}${prefix}${isVar(value) || isCalc(value) ? `-[${value}]` : getVal(getHundred(value))}`;
}
function getTranslateUtility(values, important, isV4, isDirectProperty = false, axis) {
if (axis) return getTranslateAxisUtility(axis, values[0], important, isV4);
if (values[0] === "none") return `${important}translate-none`;
if (values.length > 1) {
if (isV4 && values.every((value) => value === values[0])) return getTranslatePairUtility(values[0], important, isV4);
return values.slice(0, 3).map((value, index) => getTranslateAxisUtility([
"x",
"y",
"z"
][index], value, important, isV4)).join(" ");
}
if (!isDirectProperty) return getTranslateAxisUtility("x", values[0], important, isV4);
return getTranslatePairUtility(values[0], important, isV4);
}
function getTranslatePairUtility(value, important, isV4) {
const customProperty = getCustomPropertyName(value);
if (isV4 && customProperty) return `${important}translate-(${customProperty})`;
const alias = getTranslateAlias(value);
if (isV4 && alias) return `${important}${alias[0] ? "-" : ""}translate-${alias[1]}`;
return `${important}translate${getVal(value)}`;
}
function getTranslateAxisUtility(axis, value, important, isV4) {
const prefix = `translate-${axis}`;
const customProperty = getCustomPropertyName(value);
if (isV4 && customProperty) return `${important}${prefix}-(${customProperty})`;
const alias = getTranslateAlias(value);
if (isV4 && alias) return `${important}${alias[0] ? "-" : ""}${prefix}-${alias[1]}`;
return `${important}${prefix}${getVal(value)}`;
}
function getSkewUtility(values, important, isV4, axis) {
if (axis) return getSkewAxisUtility(axis, values[0], important, isV4);
if (values.length > 1) return values.slice(0, 2).map((value, index) => getSkewAxisUtility(["x", "y"][index], value, important, isV4)).join(" ");
return getSkewAxisUtility("x", values[0], important, isV4);
}
function getSkewAxisUtility(axis, value, important, isV4) {
const prefix = `skew-${axis}`;
const customProperty = getCustomPropertyName(value);
if (isV4 && customProperty) return `${important}${prefix}-(${customProperty})`;
const simpleAngle = getSimpleAngle(value);
if (isV4 && simpleAngle) {
const [negative, amount] = simpleAngle;
return `${important}${negative ? "-" : ""}${prefix}-${amount}`;
}
return `${important}${prefix}${getVal(value)}`;
}
function getSimpleAngle(value) {
const match = value.match(/^(-?)(\d+)deg$/);
if (!match) return;
return [match[1] === "-", match[2]];
}
function getScaleAmount(value) {
if (value === "0") return [false, "0"];
if (/^-?\d+$/.test(value)) return [value.startsWith("-"), String(Math.abs(Number(value) * 100))];
const match = value.match(/^(-?)(\d*\.?\d+)$/);
if (match) {
const amount = Number.parseFloat(match[2]) * 100;
if (Number.isInteger(amount)) return [match[1] === "-", String(amount)];
}
const percentMatch = value.match(/^(-?)(\d+(?:\.\d+)?)%$/);
if (percentMatch && !percentMatch[2].includes(".")) return [percentMatch[1] === "-", percentMatch[2]];
}
function getTranslateAlias(value) {
if (value === "1px") return [false, "px"];
if (value === "-1px") return [true, "px"];
if (value === "100%") return [false, "full"];
if (value === "-100%") return [true, "full"];
if (/^-?\d+\/\d+$/.test(value)) return [value.startsWith("-"), value.replace(/^-/, "")];
}
//#endregion
//#region src/transition.ts
const times = ["transition-delay", "transition-duration"];
const transitionMap = [
"transition",
"transition-property",
"transition-duration",
"transition-delay",
"transition-timing-function",
"transition-behavior"
];
function transition(key, val) {
if (!transitionMap.includes(key)) return;
const [value, important] = transformImportant(val);
if (key === "transition-timing-function") {
if (value === "linear") return `${important}ease-${value}`;
return `${important}ease-[${value}]`;
}
if (key === "transition") return transformTransition(value, important);
if (key === "transition-property") {
if (value.includes("color")) return `${important}transition-color`;
if (value === "box-shadow") return `${important}transition-shadow`;
return `${important}transition-${value}`;
}
if (key === "transition-behavior") return `${important}transition-${getLastName(value)}`;
const _val = getVal(value);
if (_val === `-${value}` && times.includes(key)) {
let num = value.trim();
if (num.endsWith("ms")) num = num.replace(/ms$/, "");
else if (num.endsWith("s")) num = (Number.parseFloat(num.replace(/s$/, "")) * 1e3).toString();
return `${important}${key.split("-")[1]}-${num}`;
}
return `${important}${key.split("-")[1]}${_val}`;
}
function transformTransition(v, important) {
let hasDuration = false;
return v.split(" ").map((item) => {
if (/^\d/.test(item) || /^\.\d/.test(item)) {
if (hasDuration) return `${important}delay${getVal(item, void 0)}`;
hasDuration = true;
return `${important}dur