twirlwind 0.2.0 → 0.3.0

package/dist/index.mjs

@@ -1316,6 +1316,25 @@ const exactUtilities = {
 		contain: "overscroll-y-contain",
 		none: "overscroll-y-none"
 	},
+	"scrollbar-width": {
+		auto: "scrollbar-auto",
+		thin: "scrollbar-thin",
+		none: "scrollbar-none"
+	},
+	"scrollbar-gutter": {
+		stable: "scrollbar-gutter-stable",
+		"stable both-edges": "scrollbar-gutter-both-edges"
+	},
+	"mask-type": {
+		alpha: "mask-type-alpha",
+		luminance: "mask-type-luminance"
+	},
+	"mask-composite": {
+		add: "mask-composite-add",
+		subtract: "mask-composite-subtract",
+		intersect: "mask-composite-intersect",
+		exclude: "mask-composite-exclude"
+	},
 	"scroll-behavior": {
 		auto: "scroll-auto",
 		smooth: "scroll-smooth"
@@ -1419,6 +1438,24 @@ const exactUtilities = {
 		"0 0": "origin-top-left",
 		"0% 0%": "origin-top-left"
 	},
+	"perspective-origin": {
+		center: "perspective-origin-center",
+		top: "perspective-origin-top",
+		"top right": "perspective-origin-top-right",
+		right: "perspective-origin-right",
+		"bottom right": "perspective-origin-bottom-right",
+		bottom: "perspective-origin-bottom",
+		"bottom left": "perspective-origin-bottom-left",
+		left: "perspective-origin-left",
+		"top left": "perspective-origin-top-left",
+		"100% 0": "perspective-origin-top-right",
+		"100% 0%": "perspective-origin-top-right",
+		"100% 100%": "perspective-origin-bottom-right",
+		"0 100%": "perspective-origin-bottom-left",
+		"0% 100%": "perspective-origin-bottom-left",
+		"0 0": "perspective-origin-top-left",
+		"0% 0%": "perspective-origin-top-left"
+	},
 	"scroll-snap-align": {
 		start: "snap-start",
 		end: "snap-end",
@@ -1668,6 +1705,9 @@ const arbitraryPrefixes = {
 	"flex-shrink": "shrink",
 	"word-spacing": "word-spacing",
 	hyphens: "hyphens",
+	"scrollbar-color": "scrollbar-color",
+	"font-feature-settings": "font-feature",
+	"perspective-origin": "perspective-origin",
 	"column-rule-color": "column-rule",
 	"column-rule-width": "column-rule",
 	"column-rule-style": "column-rule",
@@ -2214,6 +2254,15 @@ function convertDeclaration(declaration, options) {
 		if (Array.isArray(filterResult)) return filterResult.map((cls) => converted(declaration, cls, "exact"));
 		return converted(declaration, filterResult, "exact");
 	}
+	const shadowClass = convertShadow(declaration);
+	if (shadowClass) return converted(declaration, shadowClass, "exact");
+	const gradientResult = convertGradient(declaration, options);
+	if (gradientResult) {
+		if (Array.isArray(gradientResult)) return gradientResult.map((cls) => converted(declaration, cls, "exact"));
+		return converted(declaration, gradientResult, "exact");
+	}
+	const varRef = convertVarReference(declaration);
+	if (varRef) return converted(declaration, varRef, "exact");
 	const prefix = arbitraryPrefixes[declaration.property];
 	if (prefix && options.allowArbitraryValues) return converted(declaration, arbitraryValue(prefix, declaration.value), "arbitrary");
 	if (options.allowArbitraryProperties) return converted(declaration, arbitraryProperty(declaration.property, declaration.value), "arbitrary");
@@ -2522,6 +2571,9 @@ function convertTransform(declaration, options) {
 	if (declaration.property === "scale-x") return scaleClass(declaration.value, "scale-x");
 	if (declaration.property === "scale-y") return scaleClass(declaration.value, "scale-y");
 	if (declaration.property === "scale-z") return scaleClass(declaration.value, "scale-z");
+	if (declaration.property === "skew") return angleClass("skew", declaration.value);
+	if (declaration.property === "skew-x") return angleClass("skew-x", declaration.value);
+	if (declaration.property === "skew-y") return angleClass("skew-y", declaration.value);
 	if (declaration.property === "translate") return translateClass(declaration.value, options);
 	if (declaration.property === "translate-x") return translateAxisClass("translate-x", declaration.value, options);
 	if (declaration.property === "translate-y") return translateAxisClass("translate-y", declaration.value, options);
@@ -2623,6 +2675,135 @@ function scaleClass(value, prefix = "scale") {
 	if (!Number.isInteger(percent)) return `${prefix}-[${value.trim()}]`;
 	return percent < 0 ? `-${prefix}-${Math.abs(percent)}` : `${prefix}-${percent}`;
 }
+const shadowValues = {
+	"0 1px 2px 0 rgb(0 0 0 / 0.05)": "shadow-xs",
+	"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)": "shadow-sm",
+	"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)": "shadow-md",
+	"0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)": "shadow-lg",
+	"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)": "shadow-xl",
+	"0 25px 50px -12px rgb(0 0 0 / 0.25)": "shadow-2xl",
+	"inset 0 2px 4px 0 rgb(0 0 0 / 0.05)": "shadow-inner"
+};
+function convertShadow(declaration) {
+	if (declaration.property !== "box-shadow") return void 0;
+	return shadowValues[declaration.value.trim().replace(/\s+/g, " ")];
+}
+const varPrefixes = {
+	color: "text",
+	"background-color": "bg",
+	"border-color": "border",
+	"border-top-color": "border-t",
+	"border-right-color": "border-r",
+	"border-bottom-color": "border-b",
+	"border-left-color": "border-l",
+	"outline-color": "outline",
+	fill: "fill",
+	stroke: "stroke",
+	"caret-color": "caret",
+	"accent-color": "accent",
+	"text-decoration-color": "decoration",
+	width: "w",
+	height: "h",
+	"min-width": "min-w",
+	"min-height": "min-h",
+	"max-width": "max-w",
+	"max-height": "max-h",
+	padding: "p",
+	"padding-top": "pt",
+	"padding-right": "pr",
+	"padding-bottom": "pb",
+	"padding-left": "pl",
+	margin: "m",
+	"margin-top": "mt",
+	"margin-right": "mr",
+	"margin-bottom": "mb",
+	"margin-left": "ml",
+	gap: "gap",
+	"row-gap": "gap-y",
+	"column-gap": "gap-x",
+	"font-size": "text",
+	"font-family": "font",
+	"border-radius": "rounded",
+	"border-width": "border",
+	"box-shadow": "shadow",
+	"line-height": "leading",
+	"letter-spacing": "tracking"
+};
+function convertVarReference(declaration) {
+	const match = declaration.value.match(/^var\(\s*(--[\w-]+)\s*\)$/);
+	if (!match?.[1]) return void 0;
+	const prefix = varPrefixes[declaration.property];
+	if (prefix) return `${prefix}-(${match[1]})`;
+}
+const gradientDirections = {
+	"to right": "bg-linear-to-r",
+	"to left": "bg-linear-to-l",
+	"to top": "bg-linear-to-t",
+	"to bottom": "bg-linear-to-b",
+	"to top right": "bg-linear-to-tr",
+	"to top left": "bg-linear-to-tl",
+	"to bottom right": "bg-linear-to-br",
+	"to bottom left": "bg-linear-to-bl"
+};
+function convertGradient(declaration, options) {
+	if (declaration.property !== "background-image" && declaration.property !== "background") return void 0;
+	const linearMatch = declaration.value.trim().match(/^linear-gradient\((.+)\)$/);
+	if (!linearMatch?.[1]) return void 0;
+	const inner = linearMatch[1];
+	const firstComma = findTopLevelComma(inner);
+	if (firstComma === -1) return void 0;
+	const directionPart = inner.slice(0, firstComma).trim();
+	const colorsPart = inner.slice(firstComma + 1).trim();
+	const dirClass = gradientDirections[directionPart] ?? (directionPart.match(/^\d+deg$/) ? `bg-linear-${directionPart.replace("deg", "")}` : void 0);
+	if (!dirClass) return void 0;
+	const colorStops = splitGradientStops(colorsPart);
+	if (colorStops.length < 2 || colorStops.length > 3) return void 0;
+	const classes = [dirClass];
+	const fromColor = matchGradientColor(colorStops[0] ?? "", "from", options);
+	if (!fromColor) return void 0;
+	classes.push(fromColor);
+	if (colorStops.length === 3) {
+		const viaColor = matchGradientColor(colorStops[1] ?? "", "via", options);
+		if (!viaColor) return void 0;
+		classes.push(viaColor);
+	}
+	const toColor = matchGradientColor(colorStops[colorStops.length - 1] ?? "", "to", options);
+	if (!toColor) return void 0;
+	classes.push(toColor);
+	return classes;
+}
+function matchGradientColor(stop, prefix, options) {
+	const color = stop.trim().split(/\s+/)[0];
+	if (!color) return void 0;
+	const normalized = normalizeColor(color);
+	const keyword = colorKeywords[normalized];
+	if (keyword) return `${prefix}-${keyword}`;
+	const hexToken = lookupHexToken(normalized);
+	if (hexToken) return `${prefix}-${hexToken}`;
+	const token = Object.entries(options.theme.colors).find(([, c]) => normalizeColor(c) === normalized)?.[0];
+	if (token) return `${prefix}-${token}`;
+	return `${prefix}-[${color}]`;
+}
+function findTopLevelComma(value) {
+	let depth = 0;
+	for (let i = 0; i < value.length; i++) if (value[i] === "(") depth++;
+	else if (value[i] === ")") depth--;
+	else if (value[i] === "," && depth === 0) return i;
+	return -1;
+}
+function splitGradientStops(value) {
+	const stops = [];
+	let depth = 0;
+	let start = 0;
+	for (let i = 0; i < value.length; i++) if (value[i] === "(") depth++;
+	else if (value[i] === ")") depth--;
+	else if (value[i] === "," && depth === 0) {
+		stops.push(value.slice(start, i).trim());
+		start = i + 1;
+	}
+	stops.push(value.slice(start).trim());
+	return stops.filter(Boolean);
+}
 function converted(declaration, className, kind) {
 	const important = declaration.important ? "!" : "";
 	const variants = declaration.variants.length > 0 ? `${declaration.variants.join(":")}:` : "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twirlwind",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Tailwind v4-first CSS style object to utility class serializer with lossless arbitrary-property fallback.",
   "keywords": [
     "converter",