transform-to-unocss-core 0.0.46 → 0.0.48

package/dist/index.cjs

@@ -0,0 +1,1147 @@
+"use strict";
+
+//#region src/utils.ts
+const flag = ".__unocss_transfer__";
+const cssMathFnRE = /^(?:calc|clamp|min|max)\s*\(.*\)/;
+const numberWithUnitRE = /^-?[0-9.]+(px|rem|em|%|vw|vh|vmin|vmax|deg)$/;
+function isNot(s) {
+	return /\[&:not\(/.test(s);
+}
+function isCalc(s) {
+	return cssMathFnRE.test(s);
+}
+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("%") && !s.includes(" ");
+}
+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 isCubicBezier(s) {
+	return s.startsWith("cubic-bezier");
+}
+function getVal(val, transform$1, inClass, prefix = "") {
+	if (isCalc(val) || isUrl(val) || isHex(val) || isRgb(val) || isHsl(val) || isPercent(val) || isVar(val) || isCubicBezier(val)) return inClass ? `-[${prefix}${trim(val, "all").replace(/['"]/g, "")}]` : `="[${prefix}${trim(val, "all").replace(/['"]/g, "")}]"`;
+	return prefix ? `-[${prefix}${transform$1 ? transform$1(val) : val}]` : `-${transform$1 ? transform$1(val) : val}`;
+}
+function getHundred(n) {
+	if (typeof n === "string" && n.endsWith("%")) return n.slice(0, -1);
+	return +n * 100;
+}
+function joinWithLine(s) {
+	return s.replace(/\s+/, " ").split(" ").join("-");
+}
+function joinWithUnderLine(s) {
+	return s.replace(/\s+/, " ").split(" ").join("_");
+}
+const positionMap = [
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"center"
+];
+/**
+* 删除空格
+* @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) {
+	v = v.replace(/\s+/, " ").replace(/\s*,\s*/g, ",").replace(/\s*\/\s*/, "/");
+	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) => {
+		const _k = k.trim().split(" ");
+		return all.replace(k, _k.map((i, index) => i.endsWith(",") ? i : i + (_k.length - 1 === index ? "" : ",")).join(""));
+	});
+	if (v.endsWith("!important")) return [v.replace(/\s*!important/, "").trim(), "!"];
+	return [v.trim(), ""];
+}
+function diffTemplateStyle(before, after) {
+	const s1 = before.match(/<style scoped>.*<\/style>/s);
+	const s2 = after.match(/<style scoped>.*<\/style>/s);
+	return s1[0] === s2[0];
+}
+function isEmptyStyle(code) {
+	return /<style scoped>\s*<\/style>/.test(code);
+}
+function getStyleScoped(code) {
+	const match = code.match(/<style scoped>(.*)<\/style>/s);
+	if (!match) return "";
+	return match[1];
+}
+function joinEmpty(str) {
+	return str.replace(/\(\s*/g, "(").replace(/\s*\)/g, ")").replace(/\s*,\s*/g, ",");
+}
+function isVar(s) {
+	return s.startsWith("var(--");
+}
+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-|-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__";
+function getGradient(s) {
+	return s.startsWith("linear-gradient") ? "linear" : s.startsWith("radial-gradient") ? "radial" : s.startsWith("conic-gradient") ? "conic" : "";
+}
+
+//#endregion
+//#region src/align.ts
+function align(key, val) {
+	const [value, important] = transformImportant(val);
+	return `${getLastName(key)}-${getLastName(value)}${important}`;
+}
+
+//#endregion
+//#region src/animation.ts
+function animation(key, val) {
+	const [value, important] = transformImportant(val);
+	if (key === "animation-delay") return `animate-delay${getVal(value)}${important}`;
+	if (key === "animation-duration") return `animate-duration${getVal(value)}${important}`;
+	if (key === "animation-name") return `animate-[${value}]${important}`;
+	if (key === "animation-timing-function") return `animate-ease-[${value}]${important}`;
+	if (key === "animation-iteration-count") return `animate-count${getVal(value)}${important}`;
+	if (key === "animation-direction") return `animate-direction-${value}${important}`;
+	if (key === "animation-fill-mode") return `animate-fill-${value}${important}`;
+	const playStates = {
+		running: "running",
+		paused: "paused"
+	};
+	if (key === "animation-play-state") {
+		if (value in playStates) return `animate-${playStates[value]}${important}`;
+		return `animate-[${value}]${important}`;
+	}
+	if (key === "animation") {
+		const parts = value.split(" ");
+		const result = [];
+		let timeValuesFound = 0;
+		for (let i = 0; i < parts.length; i++) {
+			const part = parts[i];
+			if (/^\d+(?:\.\d+)?s?$/.test(part)) {
+				if (timeValuesFound === 0) result.push(`animate-duration${getVal(part)}`);
+				else if (timeValuesFound === 1) result.push(`animate-delay${getVal(part)}`);
+				else result.push(`animate-[${part}]`);
+				timeValuesFound++;
+			} else if (/^(?:linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end)$/.test(part)) result.push(`animate-ease-[${part}]`);
+			else if (part.startsWith("cubic-bezier") || part.startsWith("steps")) result.push(`animate-ease-[${part}]`);
+			else if ([
+				"alternate",
+				"alternate-reverse",
+				"normal",
+				"reverse"
+			].includes(part)) result.push(`animate-direction-${part}`);
+			else if ([
+				"forwards",
+				"backwards",
+				"both",
+				"none"
+			].includes(part)) result.push(`animate-fill-${part}`);
+			else if (playStates[part]) result.push(`animate-${playStates[part]}`);
+			else if (part === "infinite" || /^\d+$/.test(part)) result.push(`animate-count${getVal(part)}`);
+			else if (part !== "normal") result.push(`animate-[${part}]`);
+			else result.push(`animate-[${part}]`);
+		}
+		return result.length > 0 ? result.join(" ") + important : "";
+	}
+	return `animate-[${value}]${important}`;
+}
+
+//#endregion
+//#region src/aspect.ts
+function aspect(key, val) {
+	const [value, important] = transformImportant(val);
+	if (value === "auto") return `${getFirstName(key)}-${value}${important}`;
+	return `${getFirstName(key)}="[${value}]${important}"`;
+}
+
+//#endregion
+//#region src/box.ts
+const validKey = ["box-shadow", "drop-shadow"];
+function box(key, val) {
+	let [value, important] = transformImportant(val);
+	if (key.startsWith("box-decoration")) return `box-decoration-${value}${important}`;
+	if (key === "box-sizing") return `box-${getFirstName(value)}${important}`;
+	if (validKey.includes(key)) return `shadow="[${value.split(" ").join("_")}]${important}"`;
+}
+
+//#endregion
+//#region src/filter.ts
+const hundred = [
+	"contrast",
+	"brightness",
+	"saturate"
+];
+const percent = [
+	"grayscale",
+	"invert",
+	"sepia"
+];
+function filter(key, val) {
+	const [v, important] = transformImportant(val);
+	const [_, name, value] = v.match(/([\w-]+)\((.*)\)/);
+	if (hundred.includes(name)) return `${name}-${getHundred(value)}${important}`;
+	if (name === "drop-shadow") return `drop-${box(name, value)}${important}`;
+	if (percent.includes(name)) return `${name}-${value.endsWith("%") ? value.slice(0, -1) : getHundred(value)}${important}`;
+	if (name === "hue-rotate") return `${name}-${value.slice(0, -3)}${important}`;
+	return `${name}-${value}${important}`;
+}
+
+//#endregion
+//#region src/backdrop.ts
+function backdrop(key, val) {
+	const [value, important] = transformImportant(val);
+	return `backdrop-${filter(key, value)}${important}`;
+}
+
+//#endregion
+//#region src/background.ts
+const backgroundMap = [
+	"background-color",
+	"background-attachment",
+	"background-position"
+];
+function background(key, val) {
+	const [value, important] = transformImportant(val);
+	if (key === "background-size") return `bg${getVal(value, /\d/.test(value) ? transformSpaceToUnderLine : transformSpaceToLine, false, "length:")}${important}`;
+	if (backgroundMap.includes(key)) return `bg${getVal(value, transformSpaceToLine)}${important}`;
+	if (["background", "background-image"].includes(key)) {
+		if (isSize(value)) return `bg${getVal(value, transformSpaceToLine, false, "position:")}${important}`;
+		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;
+			return `bg-gradient-linear bg-gradient-[${matcher1[1]},${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];
+			const [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];
+			return `bg="${value.replace(rgb, `[${rgb}]`)}${important}"`;
+		}
+		const urlMatch = value.match(/^url\(["'\s.\-\w/@]*\)$/);
+		if (urlMatch) return `bg="${value.replace(urlMatch[0], `[${urlMatch[0].replace(/['"]/g, "")}]${important}`)}"`;
+		if (value.includes(" ")) {
+			let r = value.split(" ").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 `bg${getVal(value, transformSpaceToLine)}${important}`;
+	}
+	if (key === "background-blend-mode") return `bg-blend-${value}${important}`;
+	return `${replaceBackground(key, value)}-${transformBox(value)}${important}`;
+}
+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 transformSpaceToLine(s);
+}
+function transformSpaceToLine(s) {
+	return s.replace(/\s+/, " ").replace(" ", "-");
+}
+function transformSpaceToUnderLine(s) {
+	return s.replace(/\s+/, " ").replace(" ", "_");
+}
+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="${isRgb(fromColor) ? `[${fromColor}]` : fromColor} ${fromPosition}"`;
+		else if (fromColor) result += ` from="${isRgb(fromColor) ? `[${fromColor}]` : fromColor}"`;
+	}
+	if (via) {
+		via = via.replaceAll(commaReplacer, ",");
+		const [viaColor, viaPosition] = via.split(" ");
+		if (viaPosition) result += ` via="${isRgb(viaColor) ? `[${viaColor}]` : viaColor} ${viaPosition}"`;
+		else if (viaColor) result += ` via="${isRgb(viaColor) ? `[${viaColor}]` : viaColor}"`;
+	}
+	if (to) {
+		to = to.replaceAll(commaReplacer, ",");
+		const [toColor, toPosition] = to.split(" ");
+		if (toPosition) result += ` to="${isRgb(toColor) ? `[${toColor}]` : toColor} ${toPosition}"`;
+		else if (toColor) result += ` to="${isRgb(toColor) ? `[${toColor}]` : 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-top",
+	"border-right",
+	"border-bottom",
+	"border-left"
+];
+function border(key, val) {
+	let [value, important] = transformImportant(val);
+	if (key === "border-spacing") return `${key}="[${joinWithUnderLine(value)}]${important}"`;
+	if (key === "border-color") {
+		if (value.includes(" ")) {
+			const len = value.split(" ").length;
+			const vs = value.split(" ").map((s) => isHex(s) || isRgb(s) || isHsl(s) ? `-[${s}]` : `-${s}`);
+			const [top$1, right, bottom, left] = vs;
+			switch (len) {
+				case 2: return `border-y${top$1}${important} border-x${right}${important}`;
+				case 3: return `border-t${top$1}${important} border-b${bottom}${important} border-x${right}${important}`;
+				case 4: return `border-t${top$1}${important} border-b${bottom}${important} border-r${right}${important} border-l${left}${important}`;
+			}
+		}
+		return `border${getVal(value)}${important}`;
+	}
+	if (key === "border-radius") return isCalc(value) || !value.includes(" ") ? `border-rd${getVal(value)}${important}` : `border-rd="[${joinWithUnderLine(value)}]${important}"`;
+	if (borderSize.some((b) => key.startsWith(b))) return value.split(" ").map((v) => `border-${key.split("-")[1][0]}${getVal(v)}${important}`).join(" ");
+	if (key === "border-inline-end-width") return `border-e${getVal(value)}${important}`;
+	if (key === "border-inline-start-width") return `border-s${getVal(value)}${important}`;
+	if (key.startsWith("border-image")) return "";
+	if (key === "border-width" && value.includes(" ")) return value.split(" ").map((v, i) => `border-${borderSize[i].split("-")[1][0]}${getVal(v)}${important}`).join(" ");
+	if (/^\d[%|(px)rem]$/.test(value) || key === "border-collapse") return `border-${value}${important}`;
+	if (key === "border-width" || key === "border-style") return `border${getVal(value)}${important}`;
+	if (key === "border-color") {
+		if (value === "currentColor") return `border-current${important}`;
+		return `border${getVal(value)}${important}`;
+	}
+	return value.split(" ").map((v) => {
+		if (value === "currentColor") return `border-current${important}`;
+		return `border${getVal(v)}${important}`;
+	}).join(" ");
+}
+
+//#endregion
+//#region src/color.ts
+function color(key, val) {
+	const [value, important] = transformImportant(val);
+	return `text${getVal(value)}${important}`;
+}
+
+//#endregion
+//#region src/column.ts
+function column(key, val) {
+	const [value, important] = transformImportant(val);
+	if (key === "column-gap") return `gap-x-${value}${important}`;
+	return `${key}-${value}${important}`;
+}
+
+//#endregion
+//#region src/content.ts
+function content(key, val) {
+	const [value, important] = transformImportant(val);
+	return value === "\" \"" || value === "' '" ? `content-['_']${important}` : `content-[${value.replace(/"/g, "'")}]${important}`;
+}
+
+//#endregion
+//#region src/cursor.ts
+function cursor(key, val) {
+	const [value, important] = transformImportant(val);
+	return `${key}${getVal(value)}${important}`;
+}
+
+//#endregion
+//#region src/display.ts
+function display(key, val) {
+	const [value, important] = transformImportant(val);
+	if (value === "none") return `hidden${important}`;
+	if (value === "hidden") return `invisible${important}`;
+	return `${value}${important}`;
+}
+
+//#endregion
+//#region src/empty.ts
+const emptyMap = {
+	show: "visible",
+	hide: "hidden"
+};
+function empty(key, val) {
+	const [value, important] = transformImportant(val);
+	return `table-empty-cells-${emptyMap[value] ?? value}${important}`;
+}
+
+//#endregion
+//#region src/flex.ts
+const lastMaps = [
+	"flex-basis",
+	"flex-grow",
+	"flex-shrink"
+];
+function flex(key, val) {
+	const [value, important] = transformImportant(val);
+	if (lastMaps.includes(key)) return `${getLastName(key)}${getVal(value)}${important}`;
+	if (value === "1") return `flex-1${important}`;
+	const firstVal = value[0];
+	if (key === "flex" && (firstVal === "0" || firstVal === "1")) return `flex="[${joinWithUnderLine(value)}]${important}"`;
+	return `${getFirstName(key)}-${value.replace("column", "col")}${important}`;
+}
+
+//#endregion
+//#region src/float.ts
+function float(key, val) {
+	const [value, important] = transformImportant(val);
+	return `${key}-${value}${important}`;
+}
+
+//#endregion
+//#region src/font.ts
+function font(key, val) {
+	const [value, important] = transformImportant(val);
+	if (key === "font-size") return `text-${value}${important}`;
+	if (key === "font-weight") return `font-${value}${important}`;
+	if (key === "font-family") {
+		const match = value.match(/ui-(\w{0,4})/);
+		if (!match) return `font-[${joinWithUnderLine(val)}]${important}`;
+		const [_, family] = match;
+		return `font-${family}${important}`;
+	}
+	if (key === "font-style") {
+		if (value === "normal") return `font-not-italic${important}`;
+		return `font-${value}${important}`;
+	}
+	if (key === "font-variant-numeric") {
+		if (value === "normal") return `normal-nums${important}`;
+		return `${value}${important}`;
+	}
+	return `font="${transformFont(value)}${important}"`;
+}
+function transformFont(v) {
+	return v.split(" ").map((item) => /^\d/.test(item) ? `text-${item}` : item).join(" ");
+}
+
+//#endregion
+//#region src/grid.ts
+function grid(key, val) {
+	const [value, important] = transformImportant(val);
+	if (key.startsWith("grid-template")) {
+		const matcher$1 = value.match(/repeat\s*\(\s*(\d+)/);
+		if (matcher$1) return `grid-${getLastName(key) === "rows" ? "rows" : "cols"}-${matcher$1[1]}${important}`;
+		return `grid-${getLastName(key) === "rows" ? "rows" : "cols"}-${value.includes(" ") ? `[${joinWithUnderLine(value)}]` : value}${important}`;
+	}
+	if (key === "grid-auto-flow") return `grid-flow-${joinWithLine(value).replace("column", "col")}${important}`;
+	if (key.startsWith("grid-auto")) {
+		const matcher$1 = value.match(/minmax\s*\(\s*0\s*,\s*1fr/);
+		return `auto-${getLastName(key) === "rows" ? "rows" : "cols"}-${matcher$1 ? "fr" : getFirstName(value)}${important}`;
+	}
+	const matcher = value.match(/span\s+(\d)/);
+	if (matcher) return `${key.slice(5).replace("column", "col")}-span-${matcher[1]}${important}`;
+	if (value === "1/-1") return `${key.slice(5).replace("column", "col")}-span-full${important}`;
+	return `${key.slice(5).replace("column", "col")}-${value}${important}`;
+}
+
+//#endregion
+//#region src/inset.ts
+function inset(key, val) {
+	const [value, important] = transformImportant(val);
+	if (key === "inset-inline-start") return `start${getVal(value)}${important}`;
+	if (key === "inset-inline-end") return `end${getVal(value)}${important}`;
+	return void 0;
+}
+
+//#endregion
+//#region src/isolation.ts
+function isolation(key, val) {
+	const [value, important] = transformImportant(val);
+	if (val === "isolate") return `${value}${important}`;
+	return `${key}-${value}${important}`;
+}
+
+//#endregion
+//#region src/justify.ts
+function justify(key, val) {
+	const [value, important] = transformImportant(val);
+	if (key === "justify-content") return `justify-${getLastName(value)}${important}`;
+	return `${key}-${getLastName(value)}${important}`;
+}
+
+//#endregion
+//#region src/letter.ts
+function letter(key, val) {
+	const [value, important] = transformImportant(val);
+	return `tracking-${value}${important}`;
+}
+
+//#endregion
+//#region src/line.ts
+const lineMap = {
+	1: "none",
+	1.25: "tight",
+	1.375: "snug",
+	1.5: "normal",
+	1.625: "relaxed",
+	2: "loose"
+};
+function line(key, val) {
+	const [value, important] = transformImportant(val);
+	if (value in lineMap) return `lh-${lineMap[value]}${important}`;
+	return `lh${getVal(value, (v) => /\d$/.test(v) ? `[${v}]` : v)}${important}`;
+}
+
+//#endregion
+//#region src/list.ts
+function list(key, val) {
+	const [value, important] = transformImportant(val);
+	return `${getFirstName(key)}${getVal(value)}${important}`;
+}
+
+//#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 `${specail}${getVal(value)}${important}`;
+	const values = value.split(" ");
+	const len = values.length;
+	if (len === 1) return `${key[0]}${getVal(values[0])}${important}`;
+	if (len === 2) return `${key[0]}x${getVal(values[1])}${important} ${key[0]}y${getVal(values[0])}${important}`;
+	if (len === 3) return `${key[0]}x${getVal(values[1])}${important} ${key[0]}t${getVal(values[0])}${important} ${key[0]}b${getVal(values[2])}${important}`;
+	return `${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])}${important}`;
+}
+
+//#endregion
+//#region src/mask.ts
+function mask(key, val) {
+	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 (isCalc(value) || isUrl(value) || isHex(value) || isRgb(value) || isHsl(value) || isPercent(value) || isVar(value) || isCubicBezier(value)) return `${important}${key}${getVal(value)}`;
+		return `${important}${getFirstName(key)}-${joinWithLine(value)}`;
+	}
+	if (key === "mask-repeat") return `${important}${key}-${value}`;
+	if (key === "mask-image") {
+		const type = getGradient(value);
+		if (type) {
+			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("");
+			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) ? `[${fromColor}]` : fromColor} ${fromPosition}"`;
+		else if (fromColor) result += ` ${prefix}-from-${isRgb(fromColor) ? `[${fromColor}]` : fromColor}`;
+	}
+	if (via) {
+		via = via.replaceAll(commaReplacer, ",");
+		const [viaColor, viaPosition] = via.split(" ");
+		if (viaPosition) result += ` ${prefix}-via="${isRgb(viaColor) ? `[${viaColor}]` : viaColor} ${viaPosition}"`;
+		else if (viaColor) result += ` ${prefix}-via${isRgb(viaColor) ? `[${viaColor}]` : viaColor}`;
+	}
+	if (to) {
+		to = to.replaceAll(commaReplacer, ",");
+		const [toColor, toPosition] = to.split(" ");
+		if (toPosition) result += ` ${prefix}-to="${isRgb(toColor) ? `[${toColor}]` : toColor} ${toPosition}"`;
+		else if (toColor) result += ` ${prefix}-to-${isRgb(toColor) ? `[${toColor}]` : toColor}`;
+	}
+	return result;
+}
+
+//#endregion
+//#region src/max.ts
+function max(key, val) {
+	const [value, important] = transformImportant(val);
+	const all = key.split("-");
+	const attributeValue = isCalc(value) || isVar(value) ? getVal(value) : getVal(getFirstName(value));
+	return `${all[0]}-${all[1][0]}${attributeValue}${important}`;
+}
+
+//#endregion
+//#region src/mix.ts
+function mix(key, val) {
+	const [value, important] = transformImportant(val);
+	return `mix-blend-${value}${important}`;
+}
+
+//#endregion
+//#region src/object.ts
+function object(key, val) {
+	const [value, important] = transformImportant(val);
+	if (key === "object-position") return `${getFirstName(key)}-${joinWithLine(value)}${important}`;
+	return `${getFirstName(key)}-${value}${important}`;
+}
+
+//#endregion
+//#region src/opacity.ts
+function opacity(key, val) {
+	const [value, important] = transformImportant(val);
+	if (isPercent(val)) return `op-${value.replace("%", "")}${important}`;
+	return `op-${+value * 100}${important}`;
+}
+
+//#endregion
+//#region src/outline.ts
+function outline(key, val) {
+	const [value, important] = transformImportant(val);
+	if (key === "outline-offset") return `${key}-${value}${important}`;
+	return `${getFirstName(key)}-${value}${important}`;
+}
+
+//#endregion
+//#region src/word.ts
+function word(key, val) {
+	const [value, important] = transformImportant(val);
+	if (key.startsWith("word-spacing")) return `word-spacing${getVal(val)}${important}`;
+	if (value === "keep-all") return `break-keep${important}`;
+	if (value === "break-word") return `break-words${important}`;
+	return `break-${getLastName(value)}${important}`;
+}
+
+//#endregion
+//#region src/overflow.ts.ts
+function overflow(key, val) {
+	const [value, important] = transformImportant(val);
+	if (key === "overflow-wrap") return word(key, val);
+	return `${key}-${value}${important}`;
+}
+
+//#endregion
+//#region src/overscroll.ts
+function overscroll(key, val) {
+	const [value, important] = transformImportant(val);
+	const [prefix, _, suffix] = key.split("-");
+	if (suffix) return `${prefix}-${suffix}-${value}${important}`;
+	return `${prefix}-${value}${important}`;
+}
+
+//#endregion
+//#region src/place.ts
+function place(key, val) {
+	const [value, important] = transformImportant(val);
+	return `${key}-${getLastName(value)}${important}`;
+}
+
+//#endregion
+//#region src/resize.ts
+const map = {
+	vertical: "y",
+	horizontal: "x"
+};
+function resize(key, val) {
+	const [value, important] = transformImportant(val);
+	if (value === "both") return `${key}${important}`;
+	return `${key}-${map[value] || value}${important}`;
+}
+
+//#endregion
+//#region src/rotate.ts
+function rotate(key, val) {
+	const [value, important] = transformImportant(val);
+	if (value.includes(" ")) return `rotate-[${joinWithUnderLine(value)}]${important}`;
+	return `rotate${getVal(value)}${important}`;
+}
+
+//#endregion
+//#region src/row.ts
+function row(key, val) {
+	const [value, important] = transformImportant(val);
+	return `gap-y-${value}${important}`;
+}
+
+//#endregion
+//#region src/scroll.ts
+function scroll(key, val) {
+	const [value, important] = transformImportant(val);
+	if (key.startsWith("scroll-snap")) return `snap-${value}${important}`;
+	if (key === "scroll-behavior") return `scroll-${value}${important}`;
+	const [_, prefix, suffix, way] = key.match(/scroll-(margin|padding)-?(\w+)?-?(\w+)?/);
+	if (suffix === "inline" && way) return `scroll-${prefix[0]}${way[0]}${getVal(value)}${important}`;
+	if (suffix) return `scroll-${prefix[0]}${suffix[0]}${getVal(value)}${important}`;
+	return `scroll-${prefix[0]}-${value}${important}`;
+}
+
+//#endregion
+//#region src/size.ts
+function size(key, val) {
+	const [value, important] = transformImportant(val);
+	if (value.startsWith("-")) return `-${key[0]}${getVal(value.slice(1), getFirstName)}${important}`;
+	return `${key[0]}${getVal(value, getFirstName)}${important}`;
+}
+
+//#endregion
+//#region src/text.ts
+function text(key, val) {
+	const [value, important] = transformImportant(val);
+	if (key === "text-decoration-line") {
+		if (value === "none") return `no-underline${important}`;
+		return `${value}${important}`;
+	}
+	if (key === "text-transform") {
+		if (value === "none") return `normal-case${important}`;
+		return `${value}${important}`;
+	}
+	if (key.startsWith("text-decoration") || key === "text-indent") return `${key.split("-")[1]}${getVal(value)}${important}`;
+	if (key === "text-underline-offset") return `underline-offset-${value}${important}`;
+	return `text-${value}${important}`;
+}
+
+//#endregion
+//#region src/top.ts
+function top(key, val) {
+	const [value, important] = transformImportant(val);
+	return `${key}${getVal(value)}${important}`;
+}
+
+//#endregion
+//#region src/transform.ts
+function transform(key, val) {
+	const [v, important] = transformImportant(val);
+	if (key === "transform-origin") return `origin-${/\d/.test(v) && v.includes(" ") ? `[${joinWithUnderLine(v)}]` : joinWithLine(v)}${important}`;
+	if (key === "transform-style") return `transform-${v}${important}`;
+	if (val === "none") return `${key}-none${important}`;
+	return joinEmpty(v).split(" ").map((v$1) => {
+		const matcher = v$1.match(/([a-z]+)(3d)?([A-Z])?\((.*)\)/);
+		if (!matcher) return void 0;
+		const [_, namePrefix, is3d, nameSuffix, value] = matcher;
+		if (nameSuffix) {
+			const values = value.replace(/,(?![^()]*\))/g, " ").split(" ");
+			if (values.length > 1) return `${namePrefix}-${nameSuffix.toLowerCase()}="${values.map((v$2) => isVar(v$2) ? `[${v$2}]` : namePrefix === "scale" ? getHundred(v$2) : transformVal(v$2)).join(" ")}${important}"`;
+			return `${namePrefix}="${nameSuffix.toLowerCase()}-${isVar(values[0]) ? `[${values[0]}]` : namePrefix === "scale" ? getHundred(values[0]) : transformVal(values[0])}${important}"`;
+		} else {
+			const values = value.replace(/,(?![^()]*\))/g, " ").split(" ");
+			if (values.length > 1) {
+				if (namePrefix === "translate") return `${namePrefix}="[${values.join(",")}]"`;
+				return `${namePrefix}="${values.map((v$2) => isVar(v$2) ? `[${v$2}]` : namePrefix === "scale" ? getHundred(v$2) : transformVal(v$2)).join(" ")}${important}"`;
+			}
+			return `${namePrefix}="${isVar(values[0]) ? `[${values[0]}]` : namePrefix === "scale" ? getHundred(values[0]) : transformVal(values[0])}${important}"`;
+		}
+	}).filter(Boolean).join(" ");
+}
+function transformVal(val) {
+	if (val.endsWith("deg")) return val.slice(0, -3);
+	return val;
+}
+
+//#endregion
+//#region src/transition.ts
+const times = ["transition-delay", "transition-duration"];
+function transition(key, val) {
+	const [value, important] = transformImportant(val);
+	if (key === "transition-timing-function") {
+		if (value === "linear") return `ease-${value}${important}`;
+		return `ease="[${value}]${important}"`;
+	}
+	if (key === "transition") return `transition="${transformTransition(value, important)}"`;
+	if (key === "transition-property") {
+		if (value.includes("color")) return `transition-color${important}`;
+		if (value === "box-shadow") return `transition-shadow${important}`;
+		return `transition-${value}${important}`;
+	}
+	if (times.includes(key)) return `${key.split("-")[1]}-${value.slice(0, -2)}${important}`;
+}
+function transformTransition(v, important) {
+	let hasDuration = false;
+	return v.split(" ").map((item) => {
+		if (/^\d/.test(item) || /^\.\d/.test(item)) {
+			if (hasDuration) return `delay${getVal(item, void 0, true)}${important}`;
+			hasDuration = true;
+			return `duration${getVal(item, void 0, true)}${important}`;
+		}
+		if (item === "background-color") return "colors";
+		return item;
+	}).join(" ");
+}
+
+//#endregion
+//#region src/user.ts
+function user(key, val) {
+	const [value, important] = transformImportant(val);
+	return `${getLastName(key)}-${value}${important}`;
+}
+
+//#endregion
+//#region src/vertical.ts
+function vertical(key, val) {
+	const [value, important] = transformImportant(val);
+	return `v-${value}${important}`;
+}
+
+//#endregion
+//#region src/white.ts
+function white(key, val) {
+	const [value, important] = transformImportant(val);
+	return `whitespace-${value}${important}`;
+}
+
+//#endregion
+//#region src/will.ts
+function will(key, val) {
+	const [value, important] = transformImportant(val);
+	return `${key}-${getFirstName(value)}${important}`;
+}
+
+//#endregion
+//#region src/writing.ts
+function writing(key, val) {
+	const [value, important] = transformImportant(val);
+	if (val === "horizontal-tb") return `write-normal${important}`;
+	return `write-${value.replace("-rl", "-right").replace("-lr", "-left")}${important}`;
+}
+
+//#endregion
+//#region src/toUnocss.ts
+const typeMap = {
+	animation,
+	aspect,
+	backface: list,
+	caption: list,
+	column,
+	columns: float,
+	break: float,
+	empty,
+	box,
+	writing,
+	display,
+	float,
+	clear: float,
+	isolation,
+	object,
+	overflow,
+	overscroll,
+	position: display,
+	top,
+	left: top,
+	right: top,
+	bottom: top,
+	visibility: display,
+	z: size,
+	flex,
+	order: float,
+	grid,
+	gap: top,
+	justify,
+	align,
+	place,
+	padding: transformMargin,
+	perspective: float,
+	margin: transformMargin,
+	width: size,
+	min: max,
+	max,
+	height: size,
+	font,
+	letter,
+	line,
+	list,
+	text,
+	mask,
+	hyphens: top,
+	vertical,
+	white,
+	word,
+	content,
+	background,
+	rotate,
+	border,
+	outline,
+	opacity,
+	mix,
+	filter,
+	backdrop,
+	table: list,
+	transition,
+	transform,
+	accent: list,
+	appearance: list,
+	cursor,
+	caret: list,
+	pointer: float,
+	resize,
+	scroll,
+	inset,
+	touch: list,
+	user,
+	will,
+	fill: float,
+	stroke: list,
+	color,
+	row
+};
+const splitReg = /([\w-]+)\s*:\s*([^;]+)/;
+function toUnocss(css, isRem = false) {
+	var _typeMap$first;
+	css = css.replace(browserReg, "");
+	const match = css.match(splitReg);
+	if (!match) return;
+	const [_, key, val] = match;
+	const first = getFirstName(key);
+	const result = (_typeMap$first = typeMap[first]) === null || _typeMap$first === void 0 ? void 0 : _typeMap$first.call(typeMap, key, val);
+	if (result && isRem) return result.replace(/-([0-9.]+)px/, (_$1, v) => `-${+v / 4}`).replace(/\[[^\]]+\]/g, (match$1) => match$1.replace(/([0-9.]+)px/g, (_$1, v) => `${+v / 16}rem`));
+	return result;
+}
+
+//#endregion
+//#region src/transformer.ts
+function createRuleProcessor(config) {
+	return (v) => {
+		const anyMatch = config.anyMatch || [];
+		const priority = config.priority || [];
+		let matchedAnyRule = null;
+		if (anyMatch.length > 0) {
+			matchedAnyRule = anyMatch.find((rule) => v[rule.key] && (rule.pattern instanceof RegExp ? rule.pattern.test(v[rule.key]) : v[rule.key] === rule.pattern));
+			if (!matchedAnyRule) return {
+				transformedResult: "",
+				deleteKeys: []
+			};
+		}
+		let valueToUse = "";
+		if (anyMatch.length > 0 && priority.length > 0) for (const key of priority) {
+			const rule = anyMatch.find((r) => r.key === key);
+			if (rule && v[key] && (rule.pattern instanceof RegExp ? rule.pattern.test(v[key]) : v[key] === rule.pattern)) {
+				valueToUse = v[key];
+				break;
+			}
+		}
+		const allMatchRules = { ...config.allMatch };
+		const allMatchKeys = Object.keys(allMatchRules);
+		for (const key of allMatchKeys) {
+			const expectedValue = allMatchRules[key];
+			if (!(expectedValue instanceof RegExp ? expectedValue.test(v[key]) : v[key] === expectedValue)) return {
+				transformedResult: "",
+				deleteKeys: []
+			};
+		}
+		const deleteKeys = [...allMatchKeys, ...anyMatch.map((rule) => rule.key)];
+		const transformedResult = typeof config.outputTemplate === "function" ? config.outputTemplate(valueToUse) : config.outputTemplate.replace("${value}", valueToUse);
+		return {
+			transformedResult,
+			deleteKeys
+		};
+	};
+}
+const transformer = {
+	"line-clamp-${number}": createRuleProcessor({
+		allMatch: {
+			"overflow": "hidden",
+			"display": "-webkit-box",
+			"-webkit-box-orient": "vertical"
+		},
+		anyMatch: [{
+			key: "-webkit-line-clamp",
+			pattern: /\d/
+		}, {
+			key: "line-clamp",
+			pattern: /\d/
+		}],
+		priority: ["line-clamp", "-webkit-line-clamp"],
+		outputTemplate: (value) => `line-clamp-${value}`
+	}),
+	"line-clamp-${prop}": createRuleProcessor({
+		allMatch: {
+			"overflow": "visible",
+			"display": "block",
+			"-webkit-box-orient": "horizontal"
+		},
+		anyMatch: [{
+			key: "-webkit-line-clamp",
+			pattern: /inherit|initial|revert|unset/
+		}, {
+			key: "line-clamp",
+			pattern: /inherit|initial|revert|unset/
+		}],
+		priority: ["line-clamp", "-webkit-line-clamp"],
+		outputTemplate: (value) => `line-clamp-${value}`
+	}),
+	"truncate": createRuleProcessor({
+		allMatch: {
+			"overflow": "hidden",
+			"text-overflow": "ellipsis",
+			"white-space": "nowrap"
+		},
+		outputTemplate: () => "truncate"
+	})
+};
+function transformStyleToUnocssPre(styles) {
+	const preTransformedList = [];
+	const styleToObj = styles.split(";").reduce((r, item) => {
+		const [key, value] = item.split(":");
+		if (key.trim() && value.trim()) r[key.trim()] = value.trim();
+		return r;
+	}, {});
+	for (const key in transformer) {
+		const { transformedResult, deleteKeys } = transformer[key](styleToObj);
+		if (transformedResult && deleteKeys.length) {
+			preTransformedList.push(transformedResult);
+			deleteKeys.forEach((deleteKey) => {
+				delete styleToObj[deleteKey];
+			});
+		}
+	}
+	return {
+		transformedResult: preTransformedList.join(" "),
+		newStyle: Object.entries(styleToObj).map(([key, value]) => `${key}: ${value}`).join("; ")
+	};
+}
+
+//#endregion
+//#region src/transformStyleToUnocss.ts
+function transformStyleToUnocss(styles, isRem) {
+	const noTransfer = [];
+	const cache = new Set();
+	const { newStyle, transformedResult } = transformStyleToUnocssPre(styles);
+	if (transformedResult) return [[transformedResult, newStyle.split(";").filter(Boolean).reduce((result, cur) => {
+		const key = cur.replaceAll(browserReg, "").trim();
+		if (cache.has(key)) return result;
+		cache.add(key);
+		const val = toUnocss(cur, isRem) || "";
+		if (!val) noTransfer.push(cur);
+		return result += `${val} `;
+	}, "").trim().replace(/\s+/g, " ")].filter(Boolean).join(" "), noTransfer];
+	return [styles.split(";").filter(Boolean).reduce((result, cur) => {
+		const key = cur.replaceAll(browserReg, "").trim();
+		if (cache.has(key)) return result;
+		cache.add(key);
+		const val = toUnocss(cur, isRem) || "";
+		if (!val) noTransfer.push(cur);
+		return result += `${val} `;
+	}, "").trim().replace(/\s+/g, " "), noTransfer];
+}
+
+//#endregion
+//#region src/toUnocssClass.ts
+function toUnocssClass(css, isRem = false) {
+	const [transferred, noTransferred] = transformStyleToUnocss(css, isRem);
+	return [transferred ? transferred.replace(/([^\s=]+)="([^"]+)"/g, (_, v1, v2) => v2.split(" ").map((v) => `${v1}-${v}`).join(" ")) : "", noTransferred];
+}
+
+//#endregion
+exports.browserReg = browserReg
+exports.commaReplacer = commaReplacer
+exports.cssMathFnRE = cssMathFnRE
+exports.diffTemplateStyle = diffTemplateStyle
+exports.flag = flag
+exports.getFirstName = getFirstName
+exports.getGradient = getGradient
+exports.getHundred = getHundred
+exports.getLastName = getLastName
+exports.getStyleScoped = getStyleScoped
+exports.getVal = getVal
+exports.isCalc = isCalc
+exports.isColor = isColor
+exports.isCubicBezier = isCubicBezier
+exports.isEmptyStyle = isEmptyStyle
+exports.isHex = isHex
+exports.isHsl = isHsl
+exports.isNot = isNot
+exports.isPercent = isPercent
+exports.isRgb = isRgb
+exports.isSize = isSize
+exports.isUrl = isUrl
+exports.isVar = isVar
+exports.joinEmpty = joinEmpty
+exports.joinWithLine = joinWithLine
+exports.joinWithUnderLine = joinWithUnderLine
+exports.linearGradientReg = linearGradientReg
+exports.linearGradientReg1 = linearGradientReg1
+exports.numberWithUnitRE = numberWithUnitRE
+exports.otherGradientReg = otherGradientReg
+exports.positionMap = positionMap
+exports.toUnocss = toUnocss
+exports.toUnocssClass = toUnocssClass
+exports.transformImportant = transformImportant
+exports.transformStyleToUnocss = transformStyleToUnocss
+exports.transformStyleToUnocssPre = transformStyleToUnocssPre
+exports.trim = trim