transform-to-unocss-core 0.0.61 → 0.0.63

package/dist/index.cjs

@@ -55,7 +55,7 @@ function getVal(val, transform$1, inClass, prefix = "") {
 	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);
+	if (typeof n === "string" && n.endsWith("%")) return +n.slice(0, -1);
 	return +n * 100;
 }
 function joinWithLine(s) {
@@ -84,8 +84,11 @@ function trim(s, type = "around") {
 	if (type === "around") return s.replace(/(^\s*)|(\s*$)/g, "");
 	return s;
 }
-function transformImportant(v) {
-	v = v.replace(/\s+/g, " ").replace(/\s*,\s*/g, ",").replace(/\s*\/\s*/g, "/");
+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(""));
@@ -95,8 +98,7 @@ function transformImportant(v) {
 		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(""));
+		return all.replace(k, k.replace(/\s/g, "_"));
 	});
 	if (v.endsWith("!important")) return [v.replace(/\s*!important/, "").trim(), "!"];
 	return [v.trim(), ""];
@@ -135,16 +137,43 @@ function getGradient(s) {
 	return s.startsWith("linear-gradient") ? "linear" : s.startsWith("radial-gradient") ? "radial" : s.startsWith("conic-gradient") ? "conic" : "";
 }
 
+//#endregion
+//#region src/accent.ts
+const accentMap = ["accent-color"];
+function accent(key, val) {
+	if (!accentMap.includes(key)) return;
+	const [value, important] = transformImportant(val);
+	return `accent${getVal(value, (v) => `[${v}]`)}${important}`;
+}
+
 //#endregion
 //#region src/align.ts
+const alignMap = [
+	"align-content",
+	"align-items",
+	"align-self"
+];
 function align(key, val) {
+	if (!alignMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
-	return `${getLastName(key)}-${getLastName(value)}${important}`;
+	return `${getLastName(key)}-${value.split(" ").reverse().map(getLastName).join("-")}${important}`;
 }
 
 //#endregion
 //#region src/animation.ts
+const animationMap = [
+	"animation",
+	"animation-delay",
+	"animation-direction",
+	"animation-duration",
+	"animation-fill-mode",
+	"animation-iteration-count",
+	"animation-name",
+	"animation-play-state",
+	"animation-timing-function"
+];
 function animation(key, val) {
+	if (!animationMap.includes(key)) return;
 	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}`;
@@ -196,63 +225,105 @@ function animation(key, val) {
 	return `animate-[${value}]${important}`;
 }
 
+//#endregion
+//#region src/appearance.ts
+const appearanceMap = ["appearance"];
+function appearance(key, val) {
+	if (!appearanceMap.includes(key)) return;
+	const [value, important] = transformImportant(val);
+	return `appearance${getVal(value)}${important}`;
+}
+
 //#endregion
 //#region src/aspect.ts
+const aspectMap = ["aspect-ratio"];
 function aspect(key, val) {
+	if (!aspectMap.includes(key)) return;
 	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"
 ];
+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 (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}`;
+	if ([
+		"contrast",
+		"brightness",
+		"saturate"
+	].includes(name)) {
+		const hundred = getHundred(value);
+		if (Number.isNaN(hundred)) return `${name}${getVal(value)}${important}`;
+		return `${name}-${hundred}${important}`;
+	}
+	if (name === "drop-shadow") return `drop-${dropShadow(value, important)}`;
+	if (percent.includes(name)) {
+		if (value.endsWith("%")) return `${name}-${value.slice(0, -1)}${important}`;
+		const hundred = getHundred(value);
+		if (Number.isNaN(hundred)) return `${name}${getVal(value)}${important}`;
+		return `${name}-${hundred}${important}`;
+	}
+	if (name === "hue-rotate") {
+		if (value.endsWith("deg")) return `${name}-${value.slice(0, -3)}${important}`;
+		return `${name}${getVal(value)}${important}`;
+	}
 	return `${name}-${value}${important}`;
 }
+function dropShadow(val, important = "") {
+	const [value] = transformImportant(val);
+	return `shadow="[${value.split(" ").join("_")}]${important}"`;
+}
 
 //#endregion
 //#region src/backdrop.ts
+const backdropMap = ["backdrop-filter"];
 function backdrop(key, val) {
+	if (!backdropMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
+	if (value.startsWith("var")) return;
 	return `backdrop-${filter(key, value)}${important}`;
 }
 
+//#endregion
+//#region src/backface.ts
+const backfaceMap = ["backface-visibility"];
+function backface(key, val) {
+	if (!backfaceMap.includes(key)) return;
+	const [value, important] = transformImportant(val);
+	return `${getFirstName(key)}${getVal(value)}${important}`;
+}
+
 //#endregion
 //#region src/background.ts
-const backgroundMap = ["background-color", "background-attachment"];
+const backgroundMap = [
+	"background",
+	"background-attachment",
+	"background-blend-mode",
+	"background-clip",
+	"background-color",
+	"background-image",
+	"background-origin",
+	"background-position",
+	"background-repeat",
+	"background-size"
+];
 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;
 	const [value, important] = transformImportant(val);
 	if (key === "background-size") return `bg${getVal(value, /\d/.test(value) ? joinWithUnderLine : joinWithLine, false, "length:")}${important}`;
-	if (backgroundMap.includes(key)) return `bg${getVal(value, joinWithLine)}${important}`;
+	if (["background-color", "background-attachment"].includes(key)) return `bg${getVal(value, joinWithLine)}${important}`;
 	if (key === "background-position") {
 		if (/\d/.test(value)) return `bg${getVal(value, joinWithUnderLine, false, "position:")}${important}`;
 		return `bg${getVal(value, joinWithLine)}${important}`;
@@ -441,49 +512,132 @@ function border(key, val) {
 	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-width") return `border${getVal(value)}${important}`;
 	if (key === "border-color") {
 		if (value === "currentColor") return `border-current${important}`;
 		return `border${getVal(value)}${important}`;
 	}
+	if (key === "border-style") {
+		const styles = value.split(" ");
+		if (styles.length === 4) return `border-t-${styles[0]} border-r-${styles[1]} border-b-${styles[2]} border-l-${styles[3]}`;
+		if (styles.length === 3) return `border-t-${styles[0]} border-x-${styles[1]} border-b-${styles[2]}`;
+		if (styles.length === 2) return `border-y-${styles[0]} border-x-${styles[1]}`;
+		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/box.ts
+const boxMap = [
+	"box-sizing",
+	"box-decoration-break",
+	"box-shadow"
+];
+function box(key, val) {
+	if (!boxMap.includes(key)) return;
+	const [value, important] = transformImportant(val);
+	if (key.startsWith("box-decoration-break")) return `box-decoration-${value}${important}`;
+	if (key === "box-sizing") return `box-${getFirstName(value)}${important}`;
+	if (key === "box-shadow") return `shadow="[${value.split(" ").join("_")}]${important}"`;
+}
+
+//#endregion
+//#region src/break.ts
+const breakMap = [
+	"break-inside",
+	"break-before",
+	"break-after"
+];
+function transformBreak(key, val) {
+	if (!breakMap.includes(key)) return;
+	const [value, important] = transformImportant(val);
+	return `${key}-${value}${important}`;
+}
+
+//#endregion
+//#region src/caption.ts
+const captionMap = ["caption-side"];
+function caption(key, val) {
+	if (!captionMap.includes(key)) return;
+	const [value, important] = transformImportant(val);
+	return `${getFirstName(key)}${getVal(value)}${important}`;
+}
+
+//#endregion
+//#region src/caret.ts
+const caretMap = ["caret-color"];
+function caret(key, val) {
+	if (!caretMap.includes(key)) return;
+	const [value, important] = transformImportant(val);
+	return `${getFirstName(key)}${getVal(value)}${important}`;
+}
+
+//#endregion
+//#region src/clear.ts
+const clearMap = ["clear"];
+function clear(key, val) {
+	if (!clearMap.includes(key)) return;
+	const [value, important] = transformImportant(val);
+	return `${key}-${value}${important}`;
+}
+
 //#endregion
 //#region src/color.ts
+const colorMap = ["color"];
 function color(key, val) {
+	if (!colorMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
 	return `text${getVal(value)}${important}`;
 }
 
 //#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 `gap-x-${value}${important}`;
+}
+
+//#endregion
+//#region src/columns.ts
+const columnsMap = ["columns"];
+function columns(key, val) {
+	if (!columnsMap.includes(key)) return;
+	const [value, important] = transformImportant(val);
 	return `${key}-${value}${important}`;
 }
 
 //#endregion
 //#region src/content.ts
+const contentMap = ["content", "content-visibility"];
 function content(key, val) {
-	const [value, important] = transformImportant(val);
-	return value === "\" \"" || value === "' '" ? `content-['_']${important}` : `content-[${value.replace(/"/g, "'")}]${important}`;
+	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 `${key}${getVal(value)}${important}`;
 }
 
 //#endregion
 //#region src/display.ts
+const displayMap = ["display"];
 function display(key, val) {
+	if (!displayMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
 	if (value === "none") return `hidden${important}`;
 	if (value === "hidden") return `invisible${important}`;
@@ -492,13 +646,24 @@ function display(key, val) {
 
 //#endregion
 //#region src/empty.ts
-const emptyMap = {
+const emptyKey = {
 	show: "visible",
 	hide: "hidden"
 };
+const emptyMap = ["empty-cells"];
 function empty(key, val) {
+	if (!emptyMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
-	return `table-empty-cells-${emptyMap[value] ?? value}${important}`;
+	if (emptyKey[value]) return `table-empty-cells-${emptyKey[value]}${important}`;
+}
+
+//#endregion
+//#region src/fill.ts
+const fillMap = ["fill"];
+function fill(key, val) {
+	if (!fillMap.includes(key)) return;
+	const [value, important] = transformImportant(val);
+	return `${key}-${value}${important}`;
 }
 
 //#endregion
@@ -508,8 +673,16 @@ const lastMaps = [
 	"flex-grow",
 	"flex-shrink"
 ];
+const flexMap = [
+	"flex",
+	"flex-grow",
+	"flex-shrink",
+	"flex-basis",
+	"flex-wrap",
+	"flex-direction"
+];
 function flex(key, val) {
-	if (["flex-negative", "flex-positive"].includes(key)) return "";
+	if (!flexMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
 	if (lastMaps.includes(key)) return `${getLastName(key)}${getVal(value)}${important}`;
 	if (value === "1") return `flex-1${important}`;
@@ -521,14 +694,25 @@ function flex(key, val) {
 
 //#endregion
 //#region src/float.ts
+const floatMap = ["float"];
 function float(key, val) {
+	if (!floatMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
-	return `${key}-${value}${important}`;
+	return `${key}-${getLastName(value)}${important}`;
 }
 
 //#endregion
 //#region src/font.ts
+const fontMap = [
+	"font",
+	"font-size",
+	"font-weight",
+	"font-family",
+	"font-style",
+	"font-variant-numeric"
+];
 function font(key, val) {
+	if (!fontMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
 	if (key === "font-size") {
 		if ([
@@ -540,7 +724,7 @@ function font(key, val) {
 		].includes(value)) return `font-size-${value}${important}`;
 		return `text-${value}${important}`;
 	}
-	if (key === "font-weight") return `font-${value}${important}`;
+	if (key === "font-weight") return `font${getVal(value)}${important}`;
 	if (key === "font-family") {
 		const match = value.match(/ui-(\w{0,4})/);
 		if (!match) return `font-[${joinWithUnderLine(val)}]${important}`;
@@ -561,38 +745,84 @@ function transformFont(v) {
 	return v.split(" ").map((item) => /^\d/.test(item) ? `text-${item}` : item).join(" ");
 }
 
+//#endregion
+//#region src/gap.ts
+const gapMap = [
+	"gap",
+	"gap-x",
+	"gap-y"
+];
+function gap(key, val) {
+	if (!gapMap.includes(key)) return;
+	const [value, important] = transformImportant(val);
+	if (key.startsWith("column")) return `gap-x${getVal(value)}${important}`;
+	if (key.startsWith("row")) return `gap-y${getVal(value)}${important}`;
+	return `gap${getVal(value)}${important}`;
+}
+
 //#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+)/);
+		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 (value.startsWith("repeat(")) return;
+		return `grid-${getLastName(key) === "rows" ? "rows" : "cols"}${value.includes(" ") ? `-[${joinWithUnderLine(value)}]` : getVal(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}`;
+		if (/\d/.test(value)) return `auto-${getLastName(key) === "rows" ? "rows" : "cols"}-[${joinWithUnderLine(value)}]${important}`;
+		return `auto-${getLastName(key) === "rows" ? "rows" : "cols"}-${getFirstName(value)}${important}`;
+	}
+	const matcher = value.match(/span\s+([^/]+)\/\s*span\s+(.*)/);
+	if (matcher) {
+		if (matcher[1] !== matcher[2]) return;
+		return `${key.slice(5).replace("column", "col")}-span${getVal(matcher[1])}${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}`;
+	return `${key.slice(5).replace("column", "col")}${getVal(value)}${important}`;
+}
+
+//#endregion
+//#region src/hyphens.ts
+const hyphensMap = ["hyphens"];
+function hyphens(key, val) {
+	if (!hyphensMap.includes(key)) return;
+	const [value, important] = transformImportant(val);
+	return `${key}${getVal(value)}${important}`;
 }
 
 //#endregion
 //#region src/inset.ts
+const insetMap = ["inset-inline-start", "inset-inline-end"];
 function inset(key, val) {
+	if (!insetMap.includes(key)) return;
 	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
+const isolationMap = ["isolation"];
 function isolation(key, val) {
+	if (!isolationMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
 	if (val === "isolate") return `${value}${important}`;
 	return `${key}-${value}${important}`;
@@ -600,22 +830,32 @@ function isolation(key, val) {
 
 //#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;
 	if (key === "justify-content") return `justify-${getLastName(value)}${important}`;
 	return `${key}-${getLastName(value)}${important}`;
 }
 
 //#endregion
 //#region src/letter.ts
+const letterMap = ["letter-spacing"];
 function letter(key, val) {
+	if (!letterMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
-	return `tracking-${value}${important}`;
+	return `tracking${getVal(value)}${important}`;
 }
 
 //#endregion
 //#region src/line.ts
-const lineMap = {
+const lineKey = {
 	1: "none",
 	1.25: "tight",
 	1.375: "snug",
@@ -623,16 +863,29 @@ const lineMap = {
 	1.625: "relaxed",
 	2: "loose"
 };
+const lineMap = ["line-height"];
 function line(key, val) {
+	if (!lineMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
-	if (value in lineMap) return `lh-${lineMap[value]}${important}`;
+	if (value in lineKey) return `lh-${lineKey[value]}${important}`;
 	return `lh${getVal(value, (v) => /\d$/.test(v) ? `[${v}]` : v)}${important}`;
 }
 
 //#endregion
 //#region src/list.ts
+const listMap = [
+	"list-style",
+	"list-style-type",
+	"list-style-position",
+	"list-style-image"
+];
 function list(key, val) {
+	if (!listMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
+	if (key === "list-style-image") {
+		if (value === "none") return `${getFirstName(key)}-none${important}`;
+		return `${getFirstName(key)}${getVal(value)}${important}`;
+	}
 	return `${getFirstName(key)}${getVal(value)}${important}`;
 }
 
@@ -666,33 +919,49 @@ function transformMargin(key, val) {
 
 //#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)}`;
+	].includes(key)) return `${key}-${getFirstName(value)}${important}`;
+	if (["mask-mode", "mask-composite"].includes(key)) return `${getFirstName(key)}-${getFirstName(value)}${important}`;
 	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)}`;
 		if (/\d/.test(value)) return `${important}[${key}:${joinWithUnderLine(value)}]`;
 		return `${important}${getFirstName(key)}-${joinWithLine(value)}`;
 	}
-	if (key === "mask-repeat") return `${important}${key}-${value}`;
+	if (key === "mask-repeat") {
+		if (value.includes("-")) return `mask-${value}${important}`;
+		return `${key}-${value}${important}`;
+	}
 	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 `${important}[${key}:${joinWithUnderLine(value)}]`;
+			if (!matcher) return `[${key}:${joinWithUnderLine(value)}]${important}`;
 			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 `mask${getVal(value)}${important}`;
 	}
-	return `${important}${key}${getVal(value)}`;
+	return `${key}${getVal(value)}${important}`;
 }
 function getLinearGradientPosition(prefix, from, via, to) {
 	let result = "";
@@ -723,8 +992,24 @@ function getLinearGradientPosition(prefix, from, via, to) {
 
 //#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"
+];
 function max(key, val) {
+	if (!maxMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
+	if (/(?:max|min)-(?:inline|block)-size/.test(key)) {
+		const fixedKey = key.split("-").slice(0, 2).join("-");
+		if (/\d/.test(value) || isVar(value) || isCalc(value)) return `${fixedKey}${getVal(value)}${important}`;
+		return `${fixedKey}-${getFirstName(value)}${important}`;
+	}
 	const all = key.split("-");
 	const attributeValue = isCalc(value) || isVar(value) ? getVal(value) : getVal(getFirstName(value));
 	return `${all[0]}-${all[1][0]}${attributeValue}${important}`;
@@ -732,38 +1017,64 @@ function max(key, val) {
 
 //#endregion
 //#region src/mix.ts
+const mixMap = ["mix-blend-mode"];
 function mix(key, val) {
+	if (!mixMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
 	return `mix-blend-${value}${important}`;
 }
 
 //#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 `${getFirstName(key)}-${joinWithLine(value)}${important}`;
+	if (key === "object-position") {
+		if (isVar(value)) return `${getFirstName(key)}${getVal(value)}${important}`;
+		return `${getFirstName(key)}-${joinWithLine(value)}${important}`;
+	}
 	return `${getFirstName(key)}-${value}${important}`;
 }
 
 //#endregion
 //#region src/opacity.ts
+const opacityMap = ["opacity"];
 function opacity(key, val) {
+	if (!opacityMap.includes(key)) return;
+	const [value, important] = transformImportant(val);
+	const hundred = getHundred(value);
+	if (Number.isNaN(hundred)) return `${key}${getVal(value)}${important}`;
+	return `op-${hundred}${important}`;
+}
+
+//#endregion
+//#region src/order.ts
+const orderMap = ["order"];
+function order(key, val) {
+	if (!orderMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
-	if (isPercent(val)) return `op-${value.replace(/%/g, "")}${important}`;
-	return `op-${+value * 100}${important}`;
+	return `${key}${getVal(value)}${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}`;
+	if (key === "outline-offset") return `${key}${getVal(value)}${important}`;
+	return `${getFirstName(key)}${getVal(value)}${important}`;
 }
 
 //#endregion
 //#region src/word.ts
+const wordMap = [
+	"word-break",
+	"word-spacing",
+	"word-wrap",
+	"overflow-wrap"
+];
 function word(key, val) {
+	if (!wordMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
 	if (key.startsWith("word-spacing")) return `word-spacing${getVal(val)}${important}`;
 	if (value === "keep-all") return `break-keep${important}`;
@@ -773,7 +1084,14 @@ function word(key, val) {
 
 //#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 word(key, val);
 	return `${key}-${value}${important}`;
@@ -781,27 +1099,71 @@ function overflow(key, val) {
 
 //#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 `${prefix}-${suffix}-${value}${important}`;
 	return `${prefix}-${value}${important}`;
 }
 
+//#endregion
+//#region src/perspective.ts
+const perspectiveMap = ["perspective", "perspective-origin"];
+function perspective(key, val) {
+	if (!perspectiveMap.includes(key)) return;
+	const [value, important] = transformImportant(val);
+	return `${key}${getVal(value, joinWithLine)}${important}`;
+}
+
 //#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;
+	return `${key}-${getLastName(value)}${important}`;
+}
+
+//#endregion
+//#region src/pointer.ts
+const pointerMap = ["pointer-events"];
+function pointer(key, val) {
+	if (!pointerMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
 	return `${key}-${getLastName(value)}${important}`;
 }
 
+//#endregion
+//#region src/position.ts
+const positionMap$1 = ["position"];
+function position(key, val) {
+	if (!positionMap$1.includes(key)) return;
+	const [value, important] = transformImportant(val);
+	if (value === "none") return `hidden${important}`;
+	if (value === "hidden") return `invisible${important}`;
+	return `${value}${important}`;
+}
+
 //#endregion
 //#region src/resize.ts
 const map = {
 	vertical: "y",
 	horizontal: "x"
 };
+const resizeMap = ["resize"];
 function resize(key, val) {
+	if (!resizeMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
 	if (value === "both") return `${key}${important}`;
 	return `${key}-${map[value] || value}${important}`;
@@ -809,7 +1171,9 @@ function resize(key, val) {
 
 //#endregion
 //#region src/rotate.ts
+const rotateMap = ["rotate"];
 function rotate(key, val) {
+	if (!rotateMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
 	if (value.includes(" ")) return `rotate-[${joinWithUnderLine(value)}]${important}`;
 	return `rotate${getVal(value)}${important}`;
@@ -817,34 +1181,111 @@ function rotate(key, val) {
 
 //#endregion
 //#region src/row.ts
+const rowMap = ["row-gap"];
 function row(key, val) {
+	if (!rowMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
-	return `gap-y-${value}${important}`;
+	return `gap-y${getVal(value)}${important}`;
 }
 
 //#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")) return `snap-${value}${important}`;
+	if (key.startsWith("scroll-snap")) {
+		if (value.includes(" ")) {
+			const [pre, after] = value.split(" ");
+			return `snap-${pre}${getVal(after)}${important}`;
+		}
+		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}`;
+	return `scroll-${prefix[0]}${getVal(value)}${important}`;
 }
 
 //#endregion
 //#region src/size.ts
+const sizeMap = [
+	"z-index",
+	"width",
+	"height"
+];
 function size(key, val) {
+	if (!sizeMap.includes(key)) return;
 	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/stroke.ts
+const strokeMap = ["stroke", "stroke-width"];
+function stroke(key, val) {
+	if (!strokeMap.includes(key)) return;
+	const [value, important] = transformImportant(val);
+	return `${getFirstName(key)}${getVal(value)}${important}`;
+}
+
+//#endregion
+//#region src/table.ts
+const tableMap = ["table-layout"];
+function table(key, val) {
+	if (!tableMap.includes(key)) return;
+	const [value, important] = transformImportant(val);
+	return `${getFirstName(key)}${getVal(value)}${important}`;
+}
+
 //#endregion
 //#region src/text.ts
+const textMap = [
+	"text-align",
+	"text-align-last",
+	"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) {
+	if (!textMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
 	if (key === "text-decoration-line") {
 		if (value === "none") return `no-underline${important}`;
@@ -855,7 +1296,7 @@ function text(key, val) {
 		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}`;
+	if (key === "text-underline-offset") return `underline-offset${getVal(value)}${important}`;
 	if (key === "text-align-last") return `${important}[${key}:${value}]`;
 	if ([
 		"inherit",
@@ -869,16 +1310,41 @@ function text(key, val) {
 
 //#endregion
 //#region src/top.ts
+const topMap = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
 function top(key, val) {
+	if (!topMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
 	return `${key}${getVal(value)}${important}`;
 }
 
+//#endregion
+//#region src/touch.ts
+const touchMap = ["touch-action"];
+function touch(key, val) {
+	if (!touchMap.includes(key)) return;
+	const [value, important] = transformImportant(val);
+	return `${getFirstName(key)}${getVal(value)}${important}`;
+}
+
 //#endregion
 //#region src/transform.ts
+const transformMap = [
+	"transform",
+	"transform-origin",
+	"transform-style"
+];
 function transform(key, val) {
+	if (!transformMap.includes(key)) return;
 	const [v, important] = transformImportant(val);
-	if (key === "transform-origin") return `origin-${/\d/.test(v) && v.includes(" ") ? `[${joinWithUnderLine(v)}]` : joinWithLine(v)}${important}`;
+	if (key === "transform-origin") {
+		if (isVar(v) || isCalc(v)) return `origin${getVal(v)}${important}`;
+		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) => {
@@ -890,10 +1356,14 @@ function transform(key, val) {
 			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(" ");
+			let 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}"`;
+				if (values.some((v$2) => (isCalc(v$2) || isVar(v$2)) && !v$2.endsWith(")"))) values = [value];
+				return `${namePrefix}="${values.map((v$2) => {
+					const _v = isVar(v$2) || isCalc(v$2) ? `[${v$2}]` : namePrefix === "scale" ? getHundred(v$2) : transformVal(v$2);
+					return _v;
+				}).join(" ")}${important}"`;
 			}
 			return `${namePrefix}="${isVar(values[0]) ? `[${values[0]}]` : namePrefix === "scale" ? getHundred(values[0]) : transformVal(values[0])}${important}"`;
 		}
@@ -907,7 +1377,16 @@ function transformVal(val) {
 //#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 `ease-${value}${important}`;
@@ -919,6 +1398,7 @@ function transition(key, val) {
 		if (value === "box-shadow") return `transition-shadow${important}`;
 		return `transition-${value}${important}`;
 	}
+	if (key === "transition-behavior") return `transition-${getLastName(value)}${important}`;
 	const _val = getVal(value);
 	if (_val === `-${value}` && times.includes(key)) {
 		let num = value.trim();
@@ -945,35 +1425,72 @@ function transformTransition(v, important) {
 
 //#endregion
 //#region src/user.ts
+const userMap = ["user-select"];
 function user(key, val) {
+	if (!userMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
 	return `${getLastName(key)}-${value}${important}`;
 }
 
 //#endregion
 //#region src/vertical.ts
+const verticalMap = [
+	"vertical-align",
+	"vertical-text-align",
+	"vertical-text-align-last",
+	"vertical-align-last",
+	"vertical-justify",
+	"vertical-justify-content",
+	"vertical-justify-items",
+	"vertical-justify-self"
+];
 function vertical(key, val) {
+	if (!verticalMap.includes(key)) return;
+	const [value, important] = transformImportant(val);
+	return `v${getVal(value)}${important}`;
+}
+
+//#endregion
+//#region src/visibility.ts
+const visibilityMap = ["visibility"];
+function visibility(key, val) {
+	if (!visibilityMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
-	return `v-${value}${important}`;
+	if (value === "none") return `hidden${important}`;
+	if (value === "hidden") return `invisible${important}`;
+	return `${value}${important}`;
 }
 
 //#endregion
 //#region src/white.ts
+const whiteMap$1 = ["white-space"];
 function white(key, val) {
+	if (!whiteMap$1.includes(key)) return;
 	const [value, important] = transformImportant(val);
 	return `whitespace-${value}${important}`;
 }
 
 //#endregion
 //#region src/will.ts
+const willMap = ["will-change"];
+const willChangeKeys = {
+	"auto": "auto",
+	"scroll-position": "scroll",
+	"contents": "contents",
+	"transform": "transform"
+};
 function will(key, val) {
+	if (!willMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
-	return `${key}-${getFirstName(value)}${important}`;
+	if (value in willChangeKeys) return `will-change-${willChangeKeys[value]}${important}`;
+	return `${key}-[${joinWithUnderLine(value)}]${important}`;
 }
 
 //#endregion
 //#region src/writing.ts
+const whiteMap = ["writing-mode"];
 function writing(key, val) {
+	if (!whiteMap.includes(key)) return;
 	const [value, important] = transformImportant(val);
 	if (val === "horizontal-tb") return `write-normal${important}`;
 	return `write-${value.replace("-rl", "-right").replace("-lr", "-left")}${important}`;
@@ -984,37 +1501,37 @@ function writing(key, val) {
 const typeMap = {
 	animation,
 	aspect,
-	backface: list,
-	caption: list,
+	backface,
+	caption,
 	column,
-	columns: float,
-	break: float,
+	columns,
+	break: transformBreak,
 	empty,
 	box,
 	writing,
 	display,
 	float,
-	clear: float,
+	clear,
 	isolation,
 	object,
 	overflow,
 	overscroll,
-	position: display,
+	position,
 	top,
 	left: top,
 	right: top,
 	bottom: top,
-	visibility: display,
+	visibility,
 	z: size,
 	flex,
-	order: float,
+	order,
 	grid,
-	gap: top,
+	gap,
 	justify,
 	align,
 	place,
 	padding: transformMargin,
-	perspective: float,
+	perspective,
 	margin: transformMargin,
 	width: size,
 	min: max,
@@ -1026,7 +1543,7 @@ const typeMap = {
 	list,
 	text,
 	mask,
-	hyphens: top,
+	hyphens,
 	vertical,
 	white,
 	word,
@@ -1039,22 +1556,22 @@ const typeMap = {
 	mix,
 	filter,
 	backdrop,
-	table: list,
+	table,
 	transition,
 	transform,
-	accent: list,
-	appearance: list,
+	accent,
+	appearance,
 	cursor,
-	caret: list,
-	pointer: float,
+	caret,
+	pointer,
 	resize,
 	scroll,
 	inset,
-	touch: list,
+	touch,
 	user,
 	will,
-	fill: float,
-	stroke: list,
+	fill,
+	stroke,
 	color,
 	row
 };