@tenphi/tasty 1.1.0 → 1.3.0

package/dist/styles/directional.js

@@ -0,0 +1,133 @@
+import { CSS_WIDE_KEYWORDS } from "../parser/const.js";
+import { DIRECTIONS, filterMods, parseStyle } from "../utils/styles.js";
+import { extractCSSWideKeyword } from "./shared.js";
+//#region src/styles/directional.ts
+function parseSingleValue(val, defaultValue, trueValue) {
+	if (typeof val === "number") return `${val}px`;
+	if (!val) return null;
+	if (val === true) val = trueValue;
+	const strVal = String(val);
+	if (CSS_WIDE_KEYWORDS.has(strVal)) return strVal;
+	const { values } = parseStyle(strVal).groups[0] ?? { values: [] };
+	return values[0] || defaultValue;
+}
+function extractGroupData(group, defaultValue) {
+	const { values = [], mods = [] } = group;
+	return {
+		values: values.length ? values : [defaultValue],
+		directions: filterMods(mods, DIRECTIONS)
+	};
+}
+function applyGroup(dirs, values, directions) {
+	if (!values.length) return;
+	if (directions.length === 0) {
+		dirs.top = values[0];
+		dirs.right = values[1] || values[0];
+		dirs.bottom = values[2] || values[0];
+		dirs.left = values[3] || values[1] || values[0];
+	} else directions.forEach((dir, i) => {
+		dirs[dir] = values[i] ?? values[0];
+	});
+}
+function optimizeShorthand(property, dirs) {
+	const { top, right, bottom, left } = dirs;
+	if (top === right && right === bottom && bottom === left) return { [property]: top };
+	if (top === bottom && left === right) return { [property]: `${top} ${left}` };
+	return { [property]: `${top} ${right} ${bottom} ${left}` };
+}
+/**
+* Core directional style logic shared by padding, margin, inset, scrollMargin.
+*/
+function processDirectionalStyle(config, props) {
+	const { main, block, inline, top, right, bottom, left } = props;
+	if (main == null && block == null && inline == null && top == null && right == null && bottom == null && left == null) return null;
+	const { property, defaultValue, trueValue, defaultInit, individualOnly, directionProperty } = config;
+	const dirProp = directionProperty ?? ((dir) => `${property}-${dir}`);
+	if (individualOnly) {
+		if (main == null && block == null && inline == null) {
+			const result = {};
+			if (top != null) {
+				const val = parseSingleValue(top, defaultValue, trueValue);
+				if (val) result[dirProp("top")] = val;
+			}
+			if (right != null) {
+				const val = parseSingleValue(right, defaultValue, trueValue);
+				if (val) result[dirProp("right")] = val;
+			}
+			if (bottom != null) {
+				const val = parseSingleValue(bottom, defaultValue, trueValue);
+				if (val) result[dirProp("bottom")] = val;
+			}
+			if (left != null) {
+				const val = parseSingleValue(left, defaultValue, trueValue);
+				if (val) result[dirProp("left")] = val;
+			}
+			return Object.keys(result).length > 0 ? result : null;
+		}
+	}
+	const dirs = {
+		top: defaultInit,
+		right: defaultInit,
+		bottom: defaultInit,
+		left: defaultInit
+	};
+	let useLonghand = false;
+	if (main != null) if (typeof main === "number") dirs.top = dirs.right = dirs.bottom = dirs.left = `${main}px`;
+	else {
+		const strMain = main === true ? trueValue : String(main);
+		if (strMain) {
+			const keyword = CSS_WIDE_KEYWORDS.has(strMain) ? strMain : null;
+			if (keyword) dirs.top = dirs.right = dirs.bottom = dirs.left = keyword;
+			else {
+				const groups = parseStyle(strMain).groups ?? [];
+				for (const group of groups) {
+					if (group.mods.includes("longhand")) useLonghand = true;
+					const kw = extractCSSWideKeyword(group);
+					if (kw) {
+						const groupDirs = filterMods(group.mods, DIRECTIONS);
+						if (groupDirs.length === 0) dirs.top = dirs.right = dirs.bottom = dirs.left = kw;
+						else for (const dir of groupDirs) dirs[dir] = kw;
+					} else {
+						const { values, directions } = extractGroupData(group, defaultValue);
+						applyGroup(dirs, values, directions);
+					}
+				}
+			}
+		}
+	}
+	if (block != null) {
+		const val = parseSingleValue(block, defaultValue, trueValue);
+		if (val) dirs.top = dirs.bottom = val;
+	}
+	if (inline != null) {
+		const val = parseSingleValue(inline, defaultValue, trueValue);
+		if (val) dirs.left = dirs.right = val;
+	}
+	if (top != null) {
+		const val = parseSingleValue(top, defaultValue, trueValue);
+		if (val) dirs.top = val;
+	}
+	if (right != null) {
+		const val = parseSingleValue(right, defaultValue, trueValue);
+		if (val) dirs.right = val;
+	}
+	if (bottom != null) {
+		const val = parseSingleValue(bottom, defaultValue, trueValue);
+		if (val) dirs.bottom = val;
+	}
+	if (left != null) {
+		const val = parseSingleValue(left, defaultValue, trueValue);
+		if (val) dirs.left = val;
+	}
+	if (useLonghand) return {
+		[dirProp("top")]: dirs.top,
+		[dirProp("right")]: dirs.right,
+		[dirProp("bottom")]: dirs.bottom,
+		[dirProp("left")]: dirs.left
+	};
+	return optimizeShorthand(property, dirs);
+}
+//#endregion
+export { processDirectionalStyle };
+
+//# sourceMappingURL=directional.js.map

package/dist/styles/directional.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"directional.js","names":[],"sources":["../../src/styles/directional.ts"],"sourcesContent":["import type { StyleDetails } from '../parser/types';\nimport { CSS_WIDE_KEYWORDS } from '../parser/const';\nimport { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\nimport { extractCSSWideKeyword } from './shared';\n\ntype Direction = (typeof DIRECTIONS)[number];\n\nexport interface DirectionalConfig {\n  /** CSS property name (e.g. 'padding', 'margin', 'inset', 'scroll-margin') */\n  property: string;\n  /** Default value when parsing yields empty (e.g. 'var(--gap)', '0') */\n  defaultValue: string;\n  /** Value used when the prop is `true` (e.g. '1x', '0') */\n  trueValue: string;\n  /** Default per-direction init value (e.g. '0', 'auto') */\n  defaultInit: string;\n  /**\n   * When true, if only individual direction props are set (no shorthand,\n   * no block/inline), output individual CSS properties instead of the\n   * shorthand. Needed by inset for correct CSS cascade with modifiers.\n   */\n  individualOnly?: boolean;\n  /**\n   * Maps individual direction CSS property names. Defaults to\n   * `${property}-top`, `${property}-right`, etc. For inset this is\n   * `top`, `right`, `bottom`, `left`.\n   */\n  directionProperty?: (dir: Direction) => string;\n}\n\nexport function parseSingleValue(\n  val: string | number | boolean,\n  defaultValue: string,\n  trueValue: string,\n): string | null {\n  if (typeof val === 'number') return `${val}px`;\n  if (!val) return null;\n  if (val === true) val = trueValue;\n\n  const strVal = String(val);\n\n  if (CSS_WIDE_KEYWORDS.has(strVal)) return strVal;\n\n  const { values } = parseStyle(strVal).groups[0] ?? { values: [] };\n\n  return values[0] || defaultValue;\n}\n\nfunction extractGroupData(\n  group: StyleDetails,\n  defaultValue: string,\n): {\n  values: string[];\n  directions: Direction[];\n} {\n  const { values = [], mods = [] } = group;\n\n  return {\n    values: values.length ? values : [defaultValue],\n    directions: filterMods(mods, DIRECTIONS) as Direction[],\n  };\n}\n\nfunction applyGroup(\n  dirs: Record<Direction, string>,\n  values: string[],\n  directions: Direction[],\n): void {\n  if (!values.length) return;\n\n  if (directions.length === 0) {\n    dirs.top = values[0];\n    dirs.right = values[1] || values[0];\n    dirs.bottom = values[2] || values[0];\n    dirs.left = values[3] || values[1] || values[0];\n  } else {\n    directions.forEach((dir, i) => {\n      dirs[dir] = values[i] ?? values[0];\n    });\n  }\n}\n\nfunction optimizeShorthand(\n  property: string,\n  dirs: Record<Direction, string>,\n): Record<string, string> {\n  const { top, right, bottom, left } = dirs;\n\n  if (top === right && right === bottom && bottom === left) {\n    return { [property]: top };\n  }\n  if (top === bottom && left === right) {\n    return { [property]: `${top} ${left}` };\n  }\n\n  return { [property]: `${top} ${right} ${bottom} ${left}` };\n}\n\nexport interface DirectionalProps {\n  main?: string | number | boolean;\n  block?: string | number | boolean;\n  inline?: string | number | boolean;\n  top?: string | number | boolean;\n  right?: string | number | boolean;\n  bottom?: string | number | boolean;\n  left?: string | number | boolean;\n}\n\n/**\n * Core directional style logic shared by padding, margin, inset, scrollMargin.\n */\nexport function processDirectionalStyle(\n  config: DirectionalConfig,\n  props: DirectionalProps,\n): Record<string, string> | null {\n  const { main, block, inline, top, right, bottom, left } = props;\n\n  if (\n    main == null &&\n    block == null &&\n    inline == null &&\n    top == null &&\n    right == null &&\n    bottom == null &&\n    left == null\n  ) {\n    return null;\n  }\n\n  const {\n    property,\n    defaultValue,\n    trueValue,\n    defaultInit,\n    individualOnly,\n    directionProperty,\n  } = config;\n  const dirProp =\n    directionProperty ?? ((dir: Direction) => `${property}-${dir}`);\n\n  if (individualOnly) {\n    const onlyIndividualProps = main == null && block == null && inline == null;\n\n    if (onlyIndividualProps) {\n      const result: Record<string, string> = {};\n\n      if (top != null) {\n        const val = parseSingleValue(top, defaultValue, trueValue);\n        if (val) result[dirProp('top')] = val;\n      }\n      if (right != null) {\n        const val = parseSingleValue(right, defaultValue, trueValue);\n        if (val) result[dirProp('right')] = val;\n      }\n      if (bottom != null) {\n        const val = parseSingleValue(bottom, defaultValue, trueValue);\n        if (val) result[dirProp('bottom')] = val;\n      }\n      if (left != null) {\n        const val = parseSingleValue(left, defaultValue, trueValue);\n        if (val) result[dirProp('left')] = val;\n      }\n\n      return Object.keys(result).length > 0 ? result : null;\n    }\n  }\n\n  const dirs: Record<Direction, string> = {\n    top: defaultInit,\n    right: defaultInit,\n    bottom: defaultInit,\n    left: defaultInit,\n  };\n\n  let useLonghand = false;\n\n  if (main != null) {\n    if (typeof main === 'number') {\n      const v = `${main}px`;\n      dirs.top = dirs.right = dirs.bottom = dirs.left = v;\n    } else {\n      const strMain = main === true ? trueValue : String(main);\n\n      if (strMain) {\n        const keyword = CSS_WIDE_KEYWORDS.has(strMain) ? strMain : null;\n\n        if (keyword) {\n          dirs.top = dirs.right = dirs.bottom = dirs.left = keyword;\n        } else {\n          const processed = parseStyle(strMain);\n          const groups = processed.groups ?? [];\n\n          for (const group of groups) {\n            if (group.mods.includes('longhand')) {\n              useLonghand = true;\n            }\n\n            const kw = extractCSSWideKeyword(group);\n\n            if (kw) {\n              const groupDirs = filterMods(\n                group.mods,\n                DIRECTIONS,\n              ) as Direction[];\n\n              if (groupDirs.length === 0) {\n                dirs.top = dirs.right = dirs.bottom = dirs.left = kw;\n              } else {\n                for (const dir of groupDirs) {\n                  dirs[dir] = kw;\n                }\n              }\n            } else {\n              const { values, directions } = extractGroupData(\n                group,\n                defaultValue,\n              );\n              applyGroup(dirs, values, directions);\n            }\n          }\n        }\n      }\n    }\n  }\n\n  if (block != null) {\n    const val = parseSingleValue(block, defaultValue, trueValue);\n    if (val) dirs.top = dirs.bottom = val;\n  }\n  if (inline != null) {\n    const val = parseSingleValue(inline, defaultValue, trueValue);\n    if (val) dirs.left = dirs.right = val;\n  }\n\n  if (top != null) {\n    const val = parseSingleValue(top, defaultValue, trueValue);\n    if (val) dirs.top = val;\n  }\n  if (right != null) {\n    const val = parseSingleValue(right, defaultValue, trueValue);\n    if (val) dirs.right = val;\n  }\n  if (bottom != null) {\n    const val = parseSingleValue(bottom, defaultValue, trueValue);\n    if (val) dirs.bottom = val;\n  }\n  if (left != null) {\n    const val = parseSingleValue(left, defaultValue, trueValue);\n    if (val) dirs.left = val;\n  }\n\n  if (useLonghand) {\n    return {\n      [dirProp('top')]: dirs.top,\n      [dirProp('right')]: dirs.right,\n      [dirProp('bottom')]: dirs.bottom,\n      [dirProp('left')]: dirs.left,\n    };\n  }\n\n  return optimizeShorthand(property, dirs);\n}\n"],"mappings":"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"}

package/dist/styles/display.d.ts

@@ -9,18 +9,11 @@ interface DisplayStyleProps {
 /**
  * Handles display, hide, textOverflow, overflow, and whiteSpace styles.
  *
- * textOverflow syntax:
- * - `textOverflow="ellipsis"` - single-line truncation with ellipsis
- * - `textOverflow="ellipsis / 3"` - multi-line clamping (3 lines) with ellipsis
- * - `textOverflow="clip"` - single-line truncation with clip (no ellipsis)
- * - `textOverflow="clip / 2"` - multi-line clip (2 lines)
- * - `textOverflow={true}` or `textOverflow="initial"` - reset to initial
- *
  * Priority:
  * 1. `hide` takes precedence (display: none)
  * 2. Multi-line `textOverflow` forces display: -webkit-box
- * 3. Single-line `textOverflow` defaults white-space to nowrap, multi-line defaults to initial
- * 4. Explicit `whiteSpace` overrides the default white-space from `textOverflow`
+ * 3. Single-line `textOverflow` defaults white-space to nowrap
+ * 4. Explicit `whiteSpace` overrides the default from `textOverflow`
  */
 declare function displayStyle({
   display,
@@ -28,7 +21,7 @@ declare function displayStyle({
   textOverflow,
   overflow,
   whiteSpace
-}: DisplayStyleProps): Record<string, string | number> | undefined;
+}: DisplayStyleProps): Record<string, string | number> | null;
 declare namespace displayStyle {
   var __lookupStyles: string[];
 }

package/dist/styles/display.js

@@ -1,57 +1,63 @@
 import { parseStyle } from "../utils/styles.js";
-
 //#region src/styles/display.ts
 /**
-* Handles display, hide, textOverflow, overflow, and whiteSpace styles.
+* Process textOverflow into CSS properties for truncation/clamping.
 *
-* textOverflow syntax:
-* - `textOverflow="ellipsis"` - single-line truncation with ellipsis
-* - `textOverflow="ellipsis / 3"` - multi-line clamping (3 lines) with ellipsis
-* - `textOverflow="clip"` - single-line truncation with clip (no ellipsis)
-* - `textOverflow="clip / 2"` - multi-line clip (2 lines)
-* - `textOverflow={true}` or `textOverflow="initial"` - reset to initial
+* - `ellipsis` — single-line truncation with ellipsis
+* - `ellipsis / 3` — multi-line clamping (3 lines) with ellipsis
+* - `clip` — single-line truncation with clip
+* - `clip / 2` — multi-line clip (2 lines)
+* - `true` or `initial` — reset to initial
+*/
+function processTextOverflow(textOverflow, whiteSpace) {
+	if (textOverflow === true || textOverflow === "initial") return { "text-overflow": "initial" };
+	const group = parseStyle(String(textOverflow)).groups[0];
+	if (!group) return null;
+	const { parts } = group;
+	const modePart = parts[0];
+	const clampPart = parts[1];
+	const hasEllipsis = modePart?.mods.includes("ellipsis");
+	const hasClip = modePart?.mods.includes("clip");
+	if (!hasEllipsis && !hasClip) return null;
+	let clamp = 1;
+	if (clampPart?.values[0]) {
+		const parsed = parseInt(clampPart.values[0], 10);
+		if (!isNaN(parsed) && parsed > 0) clamp = parsed;
+	}
+	const result = {
+		overflow: "hidden",
+		"text-overflow": hasEllipsis ? "ellipsis" : "clip"
+	};
+	if (clamp === 1) result["white-space"] = whiteSpace || "nowrap";
+	else {
+		result["display"] = "-webkit-box";
+		result["-webkit-box-orient"] = "vertical";
+		result["-webkit-line-clamp"] = clamp;
+		result["line-clamp"] = clamp;
+		result["white-space"] = whiteSpace || "initial";
+	}
+	return result;
+}
+/**
+* Handles display, hide, textOverflow, overflow, and whiteSpace styles.
 *
 * Priority:
 * 1. `hide` takes precedence (display: none)
 * 2. Multi-line `textOverflow` forces display: -webkit-box
-* 3. Single-line `textOverflow` defaults white-space to nowrap, multi-line defaults to initial
-* 4. Explicit `whiteSpace` overrides the default white-space from `textOverflow`
+* 3. Single-line `textOverflow` defaults white-space to nowrap
+* 4. Explicit `whiteSpace` overrides the default from `textOverflow`
 */
 function displayStyle({ display, hide, textOverflow, overflow, whiteSpace }) {
 	const result = {};
-	if (textOverflow != null && textOverflow !== false) if (textOverflow === true || textOverflow === "initial") result["text-overflow"] = "initial";
-	else {
-		const group = parseStyle(String(textOverflow)).groups[0];
-		if (group) {
-			const { parts } = group;
-			const modePart = parts[0];
-			const clampPart = parts[1];
-			const hasEllipsis = modePart?.mods.includes("ellipsis");
-			const hasClip = modePart?.mods.includes("clip");
-			let clamp = 1;
-			if (clampPart?.values[0]) {
-				const parsed = parseInt(clampPart.values[0], 10);
-				if (!isNaN(parsed) && parsed > 0) clamp = parsed;
-			}
-			if (hasEllipsis || hasClip) {
-				result["overflow"] = "hidden";
-				result["text-overflow"] = hasEllipsis ? "ellipsis" : "clip";
-				if (clamp === 1) result["white-space"] = whiteSpace || "nowrap";
-				else {
-					result["display"] = "-webkit-box";
-					result["-webkit-box-orient"] = "vertical";
-					result["-webkit-line-clamp"] = clamp;
-					result["line-clamp"] = clamp;
-					result["white-space"] = whiteSpace || "initial";
-				}
-			}
-		}
+	if (textOverflow != null && textOverflow !== false) {
+		const textResult = processTextOverflow(textOverflow, whiteSpace);
+		if (textResult) Object.assign(result, textResult);
 	}
 	if (overflow && !result["overflow"]) result["overflow"] = overflow;
 	if (whiteSpace && !result["white-space"]) result["white-space"] = whiteSpace;
 	if (hide) result["display"] = "none";
 	else if (!result["display"] && display) result["display"] = display;
-	if (Object.keys(result).length === 0) return;
+	if (Object.keys(result).length === 0) return null;
 	return result;
 }
 displayStyle.__lookupStyles = [
@@ -61,7 +67,7 @@ displayStyle.__lookupStyles = [
 	"overflow",
 	"whiteSpace"
 ];
-
 //#endregion
 export { displayStyle };
+
 //# sourceMappingURL=display.js.map

package/dist/styles/display.js.map

@@ -1 +1 @@
-{"version":3,"file":"display.js","names":[],"sources":["../../src/styles/display.ts"],"sourcesContent":["import { parseStyle } from '../utils/styles';\n\ninterface DisplayStyleProps {\n  display?: string;\n  hide?: boolean;\n  textOverflow?: string | boolean;\n  overflow?: string;\n  whiteSpace?: string;\n}\n\n/**\n * Handles display, hide, textOverflow, overflow, and whiteSpace styles.\n *\n * textOverflow syntax:\n * - `textOverflow=\"ellipsis\"` - single-line truncation with ellipsis\n * - `textOverflow=\"ellipsis / 3\"` - multi-line clamping (3 lines) with ellipsis\n * - `textOverflow=\"clip\"` - single-line truncation with clip (no ellipsis)\n * - `textOverflow=\"clip / 2\"` - multi-line clip (2 lines)\n * - `textOverflow={true}` or `textOverflow=\"initial\"` - reset to initial\n *\n * Priority:\n * 1. `hide` takes precedence (display: none)\n * 2. Multi-line `textOverflow` forces display: -webkit-box\n * 3. Single-line `textOverflow` defaults white-space to nowrap, multi-line defaults to initial\n * 4. Explicit `whiteSpace` overrides the default white-space from `textOverflow`\n */\nexport function displayStyle({\n  display,\n  hide,\n  textOverflow,\n  overflow,\n  whiteSpace,\n}: DisplayStyleProps) {\n  const result: Record<string, string | number> = {};\n\n  // Handle textOverflow first to determine required overrides\n  if (textOverflow != null && textOverflow !== false) {\n    // Boolean true or 'initial' → reset to initial\n    if (textOverflow === true || textOverflow === 'initial') {\n      result['text-overflow'] = 'initial';\n    } else {\n      const processed = parseStyle(String(textOverflow));\n      const group = processed.groups[0];\n\n      if (group) {\n        const { parts } = group;\n        const modePart = parts[0];\n        const clampPart = parts[1];\n\n        const hasEllipsis = modePart?.mods.includes('ellipsis');\n        const hasClip = modePart?.mods.includes('clip');\n\n        // Get clamp value from second part (after /)\n        let clamp = 1;\n        if (clampPart?.values[0]) {\n          const parsed = parseInt(clampPart.values[0], 10);\n          if (!isNaN(parsed) && parsed > 0) {\n            clamp = parsed;\n          }\n        }\n\n        if (hasEllipsis || hasClip) {\n          result['overflow'] = 'hidden';\n          result['text-overflow'] = hasEllipsis ? 'ellipsis' : 'clip';\n\n          if (clamp === 1) {\n            result['white-space'] = whiteSpace || 'nowrap';\n          } else {\n            result['display'] = '-webkit-box';\n            result['-webkit-box-orient'] = 'vertical';\n            result['-webkit-line-clamp'] = clamp;\n            result['line-clamp'] = clamp;\n            result['white-space'] = whiteSpace || 'initial';\n          }\n        }\n      }\n    }\n  }\n\n  // Apply user-specified values (only if not overridden by textOverflow)\n  if (overflow && !result['overflow']) {\n    result['overflow'] = overflow;\n  }\n  if (whiteSpace && !result['white-space']) {\n    result['white-space'] = whiteSpace;\n  }\n\n  // Handle display (hide > textOverflow > user value)\n  if (hide) {\n    result['display'] = 'none';\n  } else if (!result['display'] && display) {\n    result['display'] = display;\n  }\n\n  // Return undefined if no styles to apply\n  if (Object.keys(result).length === 0) {\n    return;\n  }\n\n  return result;\n}\n\ndisplayStyle.__lookupStyles = [\n  'display',\n  'hide',\n  'textOverflow',\n  'overflow',\n  'whiteSpace',\n];\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA0BA,SAAgB,aAAa,EAC3B,SACA,MACA,cACA,UACA,cACoB;CACpB,MAAM,SAA0C,EAAE;AAGlD,KAAI,gBAAgB,QAAQ,iBAAiB,MAE3C,KAAI,iBAAiB,QAAQ,iBAAiB,UAC5C,QAAO,mBAAmB;MACrB;EAEL,MAAM,QADY,WAAW,OAAO,aAAa,CAAC,CAC1B,OAAO;AAE/B,MAAI,OAAO;GACT,MAAM,EAAE,UAAU;GAClB,MAAM,WAAW,MAAM;GACvB,MAAM,YAAY,MAAM;GAExB,MAAM,cAAc,UAAU,KAAK,SAAS,WAAW;GACvD,MAAM,UAAU,UAAU,KAAK,SAAS,OAAO;GAG/C,IAAI,QAAQ;AACZ,OAAI,WAAW,OAAO,IAAI;IACxB,MAAM,SAAS,SAAS,UAAU,OAAO,IAAI,GAAG;AAChD,QAAI,CAAC,MAAM,OAAO,IAAI,SAAS,EAC7B,SAAQ;;AAIZ,OAAI,eAAe,SAAS;AAC1B,WAAO,cAAc;AACrB,WAAO,mBAAmB,cAAc,aAAa;AAErD,QAAI,UAAU,EACZ,QAAO,iBAAiB,cAAc;SACjC;AACL,YAAO,aAAa;AACpB,YAAO,wBAAwB;AAC/B,YAAO,wBAAwB;AAC/B,YAAO,gBAAgB;AACvB,YAAO,iBAAiB,cAAc;;;;;AAQhD,KAAI,YAAY,CAAC,OAAO,YACtB,QAAO,cAAc;AAEvB,KAAI,cAAc,CAAC,OAAO,eACxB,QAAO,iBAAiB;AAI1B,KAAI,KACF,QAAO,aAAa;UACX,CAAC,OAAO,cAAc,QAC/B,QAAO,aAAa;AAItB,KAAI,OAAO,KAAK,OAAO,CAAC,WAAW,EACjC;AAGF,QAAO;;AAGT,aAAa,iBAAiB;CAC5B;CACA;CACA;CACA;CACA;CACD"}
+{"version":3,"file":"display.js","names":[],"sources":["../../src/styles/display.ts"],"sourcesContent":["import { parseStyle } from '../utils/styles';\n\ninterface DisplayStyleProps {\n  display?: string;\n  hide?: boolean;\n  textOverflow?: string | boolean;\n  overflow?: string;\n  whiteSpace?: string;\n}\n\n/**\n * Process textOverflow into CSS properties for truncation/clamping.\n *\n * - `ellipsis` — single-line truncation with ellipsis\n * - `ellipsis / 3` — multi-line clamping (3 lines) with ellipsis\n * - `clip` — single-line truncation with clip\n * - `clip / 2` — multi-line clip (2 lines)\n * - `true` or `initial` — reset to initial\n */\nfunction processTextOverflow(\n  textOverflow: string | boolean,\n  whiteSpace?: string,\n): Record<string, string | number> | null {\n  if (textOverflow === true || textOverflow === 'initial') {\n    return { 'text-overflow': 'initial' };\n  }\n\n  const processed = parseStyle(String(textOverflow));\n  const group = processed.groups[0];\n\n  if (!group) return null;\n\n  const { parts } = group;\n  const modePart = parts[0];\n  const clampPart = parts[1];\n\n  const hasEllipsis = modePart?.mods.includes('ellipsis');\n  const hasClip = modePart?.mods.includes('clip');\n\n  if (!hasEllipsis && !hasClip) return null;\n\n  let clamp = 1;\n\n  if (clampPart?.values[0]) {\n    const parsed = parseInt(clampPart.values[0], 10);\n\n    if (!isNaN(parsed) && parsed > 0) {\n      clamp = parsed;\n    }\n  }\n\n  const result: Record<string, string | number> = {\n    overflow: 'hidden',\n    'text-overflow': hasEllipsis ? 'ellipsis' : 'clip',\n  };\n\n  if (clamp === 1) {\n    result['white-space'] = whiteSpace || 'nowrap';\n  } else {\n    result['display'] = '-webkit-box';\n    result['-webkit-box-orient'] = 'vertical';\n    result['-webkit-line-clamp'] = clamp;\n    result['line-clamp'] = clamp;\n    result['white-space'] = whiteSpace || 'initial';\n  }\n\n  return result;\n}\n\n/**\n * Handles display, hide, textOverflow, overflow, and whiteSpace styles.\n *\n * Priority:\n * 1. `hide` takes precedence (display: none)\n * 2. Multi-line `textOverflow` forces display: -webkit-box\n * 3. Single-line `textOverflow` defaults white-space to nowrap\n * 4. Explicit `whiteSpace` overrides the default from `textOverflow`\n */\nexport function displayStyle({\n  display,\n  hide,\n  textOverflow,\n  overflow,\n  whiteSpace,\n}: DisplayStyleProps) {\n  const result: Record<string, string | number> = {};\n\n  if (textOverflow != null && textOverflow !== false) {\n    const textResult = processTextOverflow(textOverflow, whiteSpace);\n\n    if (textResult) Object.assign(result, textResult);\n  }\n\n  if (overflow && !result['overflow']) {\n    result['overflow'] = overflow;\n  }\n  if (whiteSpace && !result['white-space']) {\n    result['white-space'] = whiteSpace;\n  }\n\n  if (hide) {\n    result['display'] = 'none';\n  } else if (!result['display'] && display) {\n    result['display'] = display;\n  }\n\n  if (Object.keys(result).length === 0) {\n    return null;\n  }\n\n  return result;\n}\n\ndisplayStyle.__lookupStyles = [\n  'display',\n  'hide',\n  'textOverflow',\n  'overflow',\n  'whiteSpace',\n];\n"],"mappings":";;;;;;;;;;;AAmBA,SAAS,oBACP,cACA,YACwC;AACxC,KAAI,iBAAiB,QAAQ,iBAAiB,UAC5C,QAAO,EAAE,iBAAiB,WAAW;CAIvC,MAAM,QADY,WAAW,OAAO,aAAa,CAAC,CAC1B,OAAO;AAE/B,KAAI,CAAC,MAAO,QAAO;CAEnB,MAAM,EAAE,UAAU;CAClB,MAAM,WAAW,MAAM;CACvB,MAAM,YAAY,MAAM;CAExB,MAAM,cAAc,UAAU,KAAK,SAAS,WAAW;CACvD,MAAM,UAAU,UAAU,KAAK,SAAS,OAAO;AAE/C,KAAI,CAAC,eAAe,CAAC,QAAS,QAAO;CAErC,IAAI,QAAQ;AAEZ,KAAI,WAAW,OAAO,IAAI;EACxB,MAAM,SAAS,SAAS,UAAU,OAAO,IAAI,GAAG;AAEhD,MAAI,CAAC,MAAM,OAAO,IAAI,SAAS,EAC7B,SAAQ;;CAIZ,MAAM,SAA0C;EAC9C,UAAU;EACV,iBAAiB,cAAc,aAAa;EAC7C;AAED,KAAI,UAAU,EACZ,QAAO,iBAAiB,cAAc;MACjC;AACL,SAAO,aAAa;AACpB,SAAO,wBAAwB;AAC/B,SAAO,wBAAwB;AAC/B,SAAO,gBAAgB;AACvB,SAAO,iBAAiB,cAAc;;AAGxC,QAAO;;;;;;;;;;;AAYT,SAAgB,aAAa,EAC3B,SACA,MACA,cACA,UACA,cACoB;CACpB,MAAM,SAA0C,EAAE;AAElD,KAAI,gBAAgB,QAAQ,iBAAiB,OAAO;EAClD,MAAM,aAAa,oBAAoB,cAAc,WAAW;AAEhE,MAAI,WAAY,QAAO,OAAO,QAAQ,WAAW;;AAGnD,KAAI,YAAY,CAAC,OAAO,YACtB,QAAO,cAAc;AAEvB,KAAI,cAAc,CAAC,OAAO,eACxB,QAAO,iBAAiB;AAG1B,KAAI,KACF,QAAO,aAAa;UACX,CAAC,OAAO,cAAc,QAC/B,QAAO,aAAa;AAGtB,KAAI,OAAO,KAAK,OAAO,CAAC,WAAW,EACjC,QAAO;AAGT,QAAO;;AAGT,aAAa,iBAAiB;CAC5B;CACA;CACA;CACA;CACA;CACD"}

package/dist/styles/fade.d.ts

@@ -6,7 +6,7 @@ declare function fadeStyle({
 }): {
   mask: string;
   'mask-composite': string;
-} | undefined;
+} | null;
 declare namespace fadeStyle {
   var __lookupStyles: string[];
 }

package/dist/styles/fade.js

@@ -1,5 +1,5 @@
+import { CSS_WIDE_KEYWORDS } from "../parser/const.js";
 import { DIRECTIONS, filterMods, parseStyle } from "../utils/styles.js";
-
 //#region src/styles/fade.ts
 const DIRECTION_MAP = {
 	right: "to left",
@@ -32,9 +32,13 @@ function processGroup(group, isOnlyGroup) {
 	});
 }
 function fadeStyle({ fade }) {
-	if (!fade) return;
+	if (!fade) return null;
+	if (CSS_WIDE_KEYWORDS.has(fade)) return {
+		mask: fade,
+		"mask-composite": fade
+	};
 	const groups = parseStyle(fade).groups ?? [];
-	if (!groups.length) return;
+	if (!groups.length) return null;
 	const isOnlyGroup = groups.length === 1;
 	const gradients = [];
 	for (const group of groups) {
@@ -45,14 +49,14 @@ function fadeStyle({ fade }) {
 		}, isOnlyGroup);
 		gradients.push(...groupGradients);
 	}
-	if (!gradients.length) return;
+	if (!gradients.length) return null;
 	return {
 		mask: gradients.join(", "),
 		"mask-composite": "intersect"
 	};
 }
 fadeStyle.__lookupStyles = ["fade"];
-
 //#endregion
 export { fadeStyle };
+
 //# sourceMappingURL=fade.js.map

package/dist/styles/fade.js.map

@@ -1 +1 @@
-{"version":3,"file":"fade.js","names":[],"sources":["../../src/styles/fade.ts"],"sourcesContent":["import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\n\nconst DIRECTION_MAP: Record<(typeof DIRECTIONS)[number], string> = {\n  right: 'to left',\n  left: 'to right',\n  top: 'to bottom',\n  bottom: 'to top',\n};\n\n// Default mask colors (standard black with alpha for gradient masks)\nconst DEFAULT_TRANSPARENT_COLOR = 'rgb(0 0 0 / 0)';\nconst DEFAULT_OPAQUE_COLOR = 'rgb(0 0 0 / 1)';\n\ninterface GroupData {\n  values: string[];\n  mods: string[];\n  colors: string[];\n}\n\n/**\n * Process a single group and return gradient strings for its directions.\n */\nfunction processGroup(group: GroupData, isOnlyGroup: boolean): string[] {\n  let { values } = group;\n  const { mods, colors } = group;\n\n  let directions = filterMods(\n    mods,\n    DIRECTIONS,\n  ) as (typeof DIRECTIONS)[number][];\n\n  if (!values.length) {\n    values = ['calc(2 * var(--gap))'];\n  }\n\n  // If this is the only group and no directions specified, apply to all edges\n  if (!directions.length) {\n    if (isOnlyGroup) {\n      directions = ['top', 'right', 'bottom', 'left'];\n    } else {\n      // For multi-group without explicit direction, skip this group\n      return [];\n    }\n  }\n\n  // Extract colors: first = transparent mask color, second = opaque mask color\n  const transparentColor = colors?.[0] || DEFAULT_TRANSPARENT_COLOR;\n  const opaqueColor = colors?.[1] || DEFAULT_OPAQUE_COLOR;\n\n  return directions.map(\n    (direction: (typeof DIRECTIONS)[number], index: number) => {\n      const size = values[index] || values[index % 2] || values[0];\n\n      return `linear-gradient(${DIRECTION_MAP[direction]}, ${transparentColor} 0%, ${opaqueColor} ${size})`;\n    },\n  );\n}\n\nexport function fadeStyle({ fade }: { fade?: string }) {\n  if (!fade) return;\n\n  const processed = parseStyle(fade);\n  const groups: GroupData[] = processed.groups ?? [];\n\n  if (!groups.length) return;\n\n  const isOnlyGroup = groups.length === 1;\n\n  // Process all groups and collect gradients\n  const gradients: string[] = [];\n\n  for (const group of groups) {\n    const groupGradients = processGroup(\n      {\n        values: group.values ?? [],\n        mods: group.mods ?? [],\n        colors: group.colors ?? [],\n      },\n      isOnlyGroup,\n    );\n    gradients.push(...groupGradients);\n  }\n\n  if (!gradients.length) return;\n\n  return {\n    mask: gradients.join(', '),\n    'mask-composite': 'intersect',\n  };\n}\n\nfadeStyle.__lookupStyles = ['fade'];\n"],"mappings":";;;AAEA,MAAM,gBAA6D;CACjE,OAAO;CACP,MAAM;CACN,KAAK;CACL,QAAQ;CACT;AAGD,MAAM,4BAA4B;AAClC,MAAM,uBAAuB;;;;AAW7B,SAAS,aAAa,OAAkB,aAAgC;CACtE,IAAI,EAAE,WAAW;CACjB,MAAM,EAAE,MAAM,WAAW;CAEzB,IAAI,aAAa,WACf,MACA,WACD;AAED,KAAI,CAAC,OAAO,OACV,UAAS,CAAC,uBAAuB;AAInC,KAAI,CAAC,WAAW,OACd,KAAI,YACF,cAAa;EAAC;EAAO;EAAS;EAAU;EAAO;KAG/C,QAAO,EAAE;CAKb,MAAM,mBAAmB,SAAS,MAAM;CACxC,MAAM,cAAc,SAAS,MAAM;AAEnC,QAAO,WAAW,KACf,WAAwC,UAAkB;EACzD,MAAM,OAAO,OAAO,UAAU,OAAO,QAAQ,MAAM,OAAO;AAE1D,SAAO,mBAAmB,cAAc,WAAW,IAAI,iBAAiB,OAAO,YAAY,GAAG,KAAK;GAEtG;;AAGH,SAAgB,UAAU,EAAE,QAA2B;AACrD,KAAI,CAAC,KAAM;CAGX,MAAM,SADY,WAAW,KAAK,CACI,UAAU,EAAE;AAElD,KAAI,CAAC,OAAO,OAAQ;CAEpB,MAAM,cAAc,OAAO,WAAW;CAGtC,MAAM,YAAsB,EAAE;AAE9B,MAAK,MAAM,SAAS,QAAQ;EAC1B,MAAM,iBAAiB,aACrB;GACE,QAAQ,MAAM,UAAU,EAAE;GAC1B,MAAM,MAAM,QAAQ,EAAE;GACtB,QAAQ,MAAM,UAAU,EAAE;GAC3B,EACD,YACD;AACD,YAAU,KAAK,GAAG,eAAe;;AAGnC,KAAI,CAAC,UAAU,OAAQ;AAEvB,QAAO;EACL,MAAM,UAAU,KAAK,KAAK;EAC1B,kBAAkB;EACnB;;AAGH,UAAU,iBAAiB,CAAC,OAAO"}
+{"version":3,"file":"fade.js","names":[],"sources":["../../src/styles/fade.ts"],"sourcesContent":["import { CSS_WIDE_KEYWORDS } from '../parser/const';\nimport { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\n\nconst DIRECTION_MAP: Record<(typeof DIRECTIONS)[number], string> = {\n  right: 'to left',\n  left: 'to right',\n  top: 'to bottom',\n  bottom: 'to top',\n};\n\n// Default mask colors (standard black with alpha for gradient masks)\nconst DEFAULT_TRANSPARENT_COLOR = 'rgb(0 0 0 / 0)';\nconst DEFAULT_OPAQUE_COLOR = 'rgb(0 0 0 / 1)';\n\ninterface GroupData {\n  values: string[];\n  mods: string[];\n  colors: string[];\n}\n\n/**\n * Process a single group and return gradient strings for its directions.\n */\nfunction processGroup(group: GroupData, isOnlyGroup: boolean): string[] {\n  let { values } = group;\n  const { mods, colors } = group;\n\n  let directions = filterMods(\n    mods,\n    DIRECTIONS,\n  ) as (typeof DIRECTIONS)[number][];\n\n  if (!values.length) {\n    values = ['calc(2 * var(--gap))'];\n  }\n\n  // If this is the only group and no directions specified, apply to all edges\n  if (!directions.length) {\n    if (isOnlyGroup) {\n      directions = ['top', 'right', 'bottom', 'left'];\n    } else {\n      // For multi-group without explicit direction, skip this group\n      return [];\n    }\n  }\n\n  // Extract colors: first = transparent mask color, second = opaque mask color\n  const transparentColor = colors?.[0] || DEFAULT_TRANSPARENT_COLOR;\n  const opaqueColor = colors?.[1] || DEFAULT_OPAQUE_COLOR;\n\n  return directions.map(\n    (direction: (typeof DIRECTIONS)[number], index: number) => {\n      const size = values[index] || values[index % 2] || values[0];\n\n      return `linear-gradient(${DIRECTION_MAP[direction]}, ${transparentColor} 0%, ${opaqueColor} ${size})`;\n    },\n  );\n}\n\nexport function fadeStyle({ fade }: { fade?: string }) {\n  if (!fade) return null;\n\n  if (CSS_WIDE_KEYWORDS.has(fade)) {\n    return { mask: fade, 'mask-composite': fade };\n  }\n\n  const processed = parseStyle(fade);\n  const groups: GroupData[] = processed.groups ?? [];\n\n  if (!groups.length) return null;\n\n  const isOnlyGroup = groups.length === 1;\n\n  // Process all groups and collect gradients\n  const gradients: string[] = [];\n\n  for (const group of groups) {\n    const groupGradients = processGroup(\n      {\n        values: group.values ?? [],\n        mods: group.mods ?? [],\n        colors: group.colors ?? [],\n      },\n      isOnlyGroup,\n    );\n    gradients.push(...groupGradients);\n  }\n\n  if (!gradients.length) return null;\n\n  return {\n    mask: gradients.join(', '),\n    'mask-composite': 'intersect',\n  };\n}\n\nfadeStyle.__lookupStyles = ['fade'];\n"],"mappings":";;;AAGA,MAAM,gBAA6D;CACjE,OAAO;CACP,MAAM;CACN,KAAK;CACL,QAAQ;CACT;AAGD,MAAM,4BAA4B;AAClC,MAAM,uBAAuB;;;;AAW7B,SAAS,aAAa,OAAkB,aAAgC;CACtE,IAAI,EAAE,WAAW;CACjB,MAAM,EAAE,MAAM,WAAW;CAEzB,IAAI,aAAa,WACf,MACA,WACD;AAED,KAAI,CAAC,OAAO,OACV,UAAS,CAAC,uBAAuB;AAInC,KAAI,CAAC,WAAW,OACd,KAAI,YACF,cAAa;EAAC;EAAO;EAAS;EAAU;EAAO;KAG/C,QAAO,EAAE;CAKb,MAAM,mBAAmB,SAAS,MAAM;CACxC,MAAM,cAAc,SAAS,MAAM;AAEnC,QAAO,WAAW,KACf,WAAwC,UAAkB;EACzD,MAAM,OAAO,OAAO,UAAU,OAAO,QAAQ,MAAM,OAAO;AAE1D,SAAO,mBAAmB,cAAc,WAAW,IAAI,iBAAiB,OAAO,YAAY,GAAG,KAAK;GAEtG;;AAGH,SAAgB,UAAU,EAAE,QAA2B;AACrD,KAAI,CAAC,KAAM,QAAO;AAElB,KAAI,kBAAkB,IAAI,KAAK,CAC7B,QAAO;EAAE,MAAM;EAAM,kBAAkB;EAAM;CAI/C,MAAM,SADY,WAAW,KAAK,CACI,UAAU,EAAE;AAElD,KAAI,CAAC,OAAO,OAAQ,QAAO;CAE3B,MAAM,cAAc,OAAO,WAAW;CAGtC,MAAM,YAAsB,EAAE;AAE9B,MAAK,MAAM,SAAS,QAAQ;EAC1B,MAAM,iBAAiB,aACrB;GACE,QAAQ,MAAM,UAAU,EAAE;GAC1B,MAAM,MAAM,QAAQ,EAAE;GACtB,QAAQ,MAAM,UAAU,EAAE;GAC3B,EACD,YACD;AACD,YAAU,KAAK,GAAG,eAAe;;AAGnC,KAAI,CAAC,UAAU,OAAQ,QAAO;AAE9B,QAAO;EACL,MAAM,UAAU,KAAK,KAAK;EAC1B,kBAAkB;EACnB;;AAGH,UAAU,iBAAiB,CAAC,OAAO"}

package/dist/styles/fill.d.ts

@@ -23,7 +23,7 @@ declare function fillStyle({
   backgroundOrigin?: string;
   backgroundClip?: string;
   background?: string;
-}): Record<string, string> | undefined;
+}): Record<string, string> | null;
 declare namespace fillStyle {
   var __lookupStyles: string[];
 }
@@ -33,7 +33,7 @@ declare function svgFillStyle({
   svgFill?: string;
 }): {
   fill: string;
-} | undefined;
+} | null;
 declare namespace svgFillStyle {
   var __lookupStyles: string[];
 }

package/dist/styles/fill.js

@@ -1,5 +1,4 @@
 import { parseStyle } from "../utils/styles.js";
-
 //#region src/styles/fill.ts
 function fillStyle({ fill, backgroundColor, image, backgroundImage, backgroundPosition, backgroundSize, backgroundRepeat, backgroundAttachment, backgroundOrigin, backgroundClip, background }) {
 	if (background) return { background: parseStyle(background).output || background };
@@ -24,7 +23,7 @@ function fillStyle({ fill, backgroundColor, image, backgroundImage, backgroundPo
 	if (backgroundAttachment) result["background-attachment"] = backgroundAttachment;
 	if (backgroundOrigin) result["background-origin"] = backgroundOrigin;
 	if (backgroundClip) result["background-clip"] = backgroundClip;
-	if (Object.keys(result).length === 0) return;
+	if (Object.keys(result).length === 0) return null;
 	return result;
 }
 fillStyle.__lookupStyles = [
@@ -41,12 +40,12 @@ fillStyle.__lookupStyles = [
 	"background"
 ];
 function svgFillStyle({ svgFill }) {
-	if (!svgFill) return;
+	if (!svgFill) return null;
 	svgFill = parseStyle(svgFill).groups[0]?.colors[0] || svgFill;
 	return { fill: svgFill };
 }
 svgFillStyle.__lookupStyles = ["svgFill"];
-
 //#endregion
 export { fillStyle, svgFillStyle };
+
 //# sourceMappingURL=fill.js.map

package/dist/styles/fill.js.map

@@ -1 +1 @@
-{"version":3,"file":"fill.js","names":[],"sources":["../../src/styles/fill.ts"],"sourcesContent":["import { parseStyle } from '../utils/styles';\n\nexport function fillStyle({\n  fill,\n  backgroundColor,\n  image,\n  backgroundImage,\n  backgroundPosition,\n  backgroundSize,\n  backgroundRepeat,\n  backgroundAttachment,\n  backgroundOrigin,\n  backgroundClip,\n  background,\n}: {\n  fill?: string;\n  backgroundColor?: string;\n  image?: string;\n  backgroundImage?: string;\n  backgroundPosition?: string;\n  backgroundSize?: string;\n  backgroundRepeat?: string;\n  backgroundAttachment?: string;\n  backgroundOrigin?: string;\n  backgroundClip?: string;\n  background?: string;\n}) {\n  // If background is set, it overrides everything\n  if (background) {\n    const processed = parseStyle(background);\n    return { background: processed.output || background };\n  }\n\n  const result: Record<string, string> = {};\n\n  // Priority: backgroundColor > fill\n  const colorValue = backgroundColor ?? fill;\n  if (colorValue) {\n    const parsed = parseStyle(colorValue);\n    const firstColor = parsed.groups[0]?.colors[0];\n    const secondColor = parsed.groups[0]?.colors[1];\n\n    result['background-color'] = firstColor || colorValue;\n\n    if (secondColor) {\n      result['--tasty-second-fill-color'] = secondColor;\n    }\n  }\n\n  const gradientLayer = result['--tasty-second-fill-color']\n    ? 'linear-gradient(var(--tasty-second-fill-color), var(--tasty-second-fill-color))'\n    : null;\n\n  // Priority: backgroundImage > image\n  const imageValue = backgroundImage ?? image;\n  if (imageValue) {\n    const parsed = parseStyle(imageValue);\n    const imgCss = parsed.output || imageValue;\n\n    result['background-image'] = gradientLayer\n      ? `${imgCss}, ${gradientLayer}`\n      : imgCss;\n  } else if (gradientLayer) {\n    result['background-image'] = gradientLayer;\n  }\n\n  // Other background properties (pass through with parseStyle for token support)\n  if (backgroundPosition) {\n    result['background-position'] =\n      parseStyle(backgroundPosition).output || backgroundPosition;\n  }\n  if (backgroundSize) {\n    result['background-size'] =\n      parseStyle(backgroundSize).output || backgroundSize;\n  }\n  if (backgroundRepeat) {\n    result['background-repeat'] = backgroundRepeat;\n  }\n  if (backgroundAttachment) {\n    result['background-attachment'] = backgroundAttachment;\n  }\n  if (backgroundOrigin) {\n    result['background-origin'] = backgroundOrigin;\n  }\n  if (backgroundClip) {\n    result['background-clip'] = backgroundClip;\n  }\n\n  if (Object.keys(result).length === 0) return;\n  return result;\n}\n\nfillStyle.__lookupStyles = [\n  'fill',\n  'backgroundColor',\n  'image',\n  'backgroundImage',\n  'backgroundPosition',\n  'backgroundSize',\n  'backgroundRepeat',\n  'backgroundAttachment',\n  'backgroundOrigin',\n  'backgroundClip',\n  'background',\n];\n\nexport function svgFillStyle({ svgFill }: { svgFill?: string }) {\n  if (!svgFill) return;\n\n  const processed = parseStyle(svgFill);\n  svgFill = processed.groups[0]?.colors[0] || svgFill;\n\n  return { fill: svgFill };\n}\n\nsvgFillStyle.__lookupStyles = ['svgFill'];\n"],"mappings":";;;AAEA,SAAgB,UAAU,EACxB,MACA,iBACA,OACA,iBACA,oBACA,gBACA,kBACA,sBACA,kBACA,gBACA,cAaC;AAED,KAAI,WAEF,QAAO,EAAE,YADS,WAAW,WAAW,CACT,UAAU,YAAY;CAGvD,MAAM,SAAiC,EAAE;CAGzC,MAAM,aAAa,mBAAmB;AACtC,KAAI,YAAY;EACd,MAAM,SAAS,WAAW,WAAW;EACrC,MAAM,aAAa,OAAO,OAAO,IAAI,OAAO;EAC5C,MAAM,cAAc,OAAO,OAAO,IAAI,OAAO;AAE7C,SAAO,sBAAsB,cAAc;AAE3C,MAAI,YACF,QAAO,+BAA+B;;CAI1C,MAAM,gBAAgB,OAAO,+BACzB,oFACA;CAGJ,MAAM,aAAa,mBAAmB;AACtC,KAAI,YAAY;EAEd,MAAM,SADS,WAAW,WAAW,CACf,UAAU;AAEhC,SAAO,sBAAsB,gBACzB,GAAG,OAAO,IAAI,kBACd;YACK,cACT,QAAO,sBAAsB;AAI/B,KAAI,mBACF,QAAO,yBACL,WAAW,mBAAmB,CAAC,UAAU;AAE7C,KAAI,eACF,QAAO,qBACL,WAAW,eAAe,CAAC,UAAU;AAEzC,KAAI,iBACF,QAAO,uBAAuB;AAEhC,KAAI,qBACF,QAAO,2BAA2B;AAEpC,KAAI,iBACF,QAAO,uBAAuB;AAEhC,KAAI,eACF,QAAO,qBAAqB;AAG9B,KAAI,OAAO,KAAK,OAAO,CAAC,WAAW,EAAG;AACtC,QAAO;;AAGT,UAAU,iBAAiB;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAgB,aAAa,EAAE,WAAiC;AAC9D,KAAI,CAAC,QAAS;AAGd,WADkB,WAAW,QAAQ,CACjB,OAAO,IAAI,OAAO,MAAM;AAE5C,QAAO,EAAE,MAAM,SAAS;;AAG1B,aAAa,iBAAiB,CAAC,UAAU"}
+{"version":3,"file":"fill.js","names":[],"sources":["../../src/styles/fill.ts"],"sourcesContent":["import { parseStyle } from '../utils/styles';\n\nexport function fillStyle({\n  fill,\n  backgroundColor,\n  image,\n  backgroundImage,\n  backgroundPosition,\n  backgroundSize,\n  backgroundRepeat,\n  backgroundAttachment,\n  backgroundOrigin,\n  backgroundClip,\n  background,\n}: {\n  fill?: string;\n  backgroundColor?: string;\n  image?: string;\n  backgroundImage?: string;\n  backgroundPosition?: string;\n  backgroundSize?: string;\n  backgroundRepeat?: string;\n  backgroundAttachment?: string;\n  backgroundOrigin?: string;\n  backgroundClip?: string;\n  background?: string;\n}) {\n  // If background is set, it overrides everything\n  if (background) {\n    const processed = parseStyle(background);\n    return { background: processed.output || background };\n  }\n\n  const result: Record<string, string> = {};\n\n  // Priority: backgroundColor > fill\n  const colorValue = backgroundColor ?? fill;\n  if (colorValue) {\n    const parsed = parseStyle(colorValue);\n    const firstColor = parsed.groups[0]?.colors[0];\n    const secondColor = parsed.groups[0]?.colors[1];\n\n    result['background-color'] = firstColor || colorValue;\n\n    if (secondColor) {\n      result['--tasty-second-fill-color'] = secondColor;\n    }\n  }\n\n  const gradientLayer = result['--tasty-second-fill-color']\n    ? 'linear-gradient(var(--tasty-second-fill-color), var(--tasty-second-fill-color))'\n    : null;\n\n  // Priority: backgroundImage > image\n  const imageValue = backgroundImage ?? image;\n  if (imageValue) {\n    const parsed = parseStyle(imageValue);\n    const imgCss = parsed.output || imageValue;\n\n    result['background-image'] = gradientLayer\n      ? `${imgCss}, ${gradientLayer}`\n      : imgCss;\n  } else if (gradientLayer) {\n    result['background-image'] = gradientLayer;\n  }\n\n  // Other background properties (pass through with parseStyle for token support)\n  if (backgroundPosition) {\n    result['background-position'] =\n      parseStyle(backgroundPosition).output || backgroundPosition;\n  }\n  if (backgroundSize) {\n    result['background-size'] =\n      parseStyle(backgroundSize).output || backgroundSize;\n  }\n  if (backgroundRepeat) {\n    result['background-repeat'] = backgroundRepeat;\n  }\n  if (backgroundAttachment) {\n    result['background-attachment'] = backgroundAttachment;\n  }\n  if (backgroundOrigin) {\n    result['background-origin'] = backgroundOrigin;\n  }\n  if (backgroundClip) {\n    result['background-clip'] = backgroundClip;\n  }\n\n  if (Object.keys(result).length === 0) return null;\n  return result;\n}\n\nfillStyle.__lookupStyles = [\n  'fill',\n  'backgroundColor',\n  'image',\n  'backgroundImage',\n  'backgroundPosition',\n  'backgroundSize',\n  'backgroundRepeat',\n  'backgroundAttachment',\n  'backgroundOrigin',\n  'backgroundClip',\n  'background',\n];\n\nexport function svgFillStyle({ svgFill }: { svgFill?: string }) {\n  if (!svgFill) return null;\n\n  const processed = parseStyle(svgFill);\n  svgFill = processed.groups[0]?.colors[0] || svgFill;\n\n  return { fill: svgFill };\n}\n\nsvgFillStyle.__lookupStyles = ['svgFill'];\n"],"mappings":";;AAEA,SAAgB,UAAU,EACxB,MACA,iBACA,OACA,iBACA,oBACA,gBACA,kBACA,sBACA,kBACA,gBACA,cAaC;AAED,KAAI,WAEF,QAAO,EAAE,YADS,WAAW,WAAW,CACT,UAAU,YAAY;CAGvD,MAAM,SAAiC,EAAE;CAGzC,MAAM,aAAa,mBAAmB;AACtC,KAAI,YAAY;EACd,MAAM,SAAS,WAAW,WAAW;EACrC,MAAM,aAAa,OAAO,OAAO,IAAI,OAAO;EAC5C,MAAM,cAAc,OAAO,OAAO,IAAI,OAAO;AAE7C,SAAO,sBAAsB,cAAc;AAE3C,MAAI,YACF,QAAO,+BAA+B;;CAI1C,MAAM,gBAAgB,OAAO,+BACzB,oFACA;CAGJ,MAAM,aAAa,mBAAmB;AACtC,KAAI,YAAY;EAEd,MAAM,SADS,WAAW,WAAW,CACf,UAAU;AAEhC,SAAO,sBAAsB,gBACzB,GAAG,OAAO,IAAI,kBACd;YACK,cACT,QAAO,sBAAsB;AAI/B,KAAI,mBACF,QAAO,yBACL,WAAW,mBAAmB,CAAC,UAAU;AAE7C,KAAI,eACF,QAAO,qBACL,WAAW,eAAe,CAAC,UAAU;AAEzC,KAAI,iBACF,QAAO,uBAAuB;AAEhC,KAAI,qBACF,QAAO,2BAA2B;AAEpC,KAAI,iBACF,QAAO,uBAAuB;AAEhC,KAAI,eACF,QAAO,qBAAqB;AAG9B,KAAI,OAAO,KAAK,OAAO,CAAC,WAAW,EAAG,QAAO;AAC7C,QAAO;;AAGT,UAAU,iBAAiB;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,SAAgB,aAAa,EAAE,WAAiC;AAC9D,KAAI,CAAC,QAAS,QAAO;AAGrB,WADkB,WAAW,QAAQ,CACjB,OAAO,IAAI,OAAO,MAAM;AAE5C,QAAO,EAAE,MAAM,SAAS;;AAG1B,aAAa,iBAAiB,CAAC,UAAU"}

package/dist/styles/flow.js

@@ -6,7 +6,7 @@ function flowStyle({ display = "block", flow }) {
 	return style ? { [style]: flow } : null;
 }
 flowStyle.__lookupStyles = ["display", "flow"];
-
 //#endregion
 export { flowStyle };
+
 //# sourceMappingURL=flow.js.map

package/dist/styles/gap.d.ts

@@ -22,7 +22,7 @@ declare function gapStyle({
   [x: string]: string;
   $: string;
   gap?: undefined;
-} | undefined;
+} | null;
 declare namespace gapStyle {
   var __lookupStyles: string[];
 }

package/dist/styles/gap.js

@@ -1,11 +1,12 @@
+import { CSS_WIDE_KEYWORDS } from "../parser/const.js";
 import { makeEmptyDetails } from "../parser/types.js";
 import { parseStyle } from "../utils/styles.js";
-
 //#region src/styles/gap.ts
 function gapStyle({ display = "block", flow, gap }) {
 	if (typeof gap === "number") gap = `${gap}px`;
-	if (!gap) return;
+	if (!gap) return null;
 	if (gap === true) gap = "1x";
+	if (CSS_WIDE_KEYWORDS.has(String(gap))) return { gap: String(gap) };
 	const isGrid = display.includes("grid");
 	const isFlex = display.includes("flex");
 	const isWrap = flow ? flow.includes("wrap") && !flow.includes("nowrap") : false;
@@ -31,7 +32,7 @@ gapStyle.__lookupStyles = [
 	"flow",
 	"gap"
 ];
-
 //#endregion
 export { gapStyle };
+
 //# sourceMappingURL=gap.js.map

package/dist/styles/gap.js.map

@@ -1 +1 @@
-{"version":3,"file":"gap.js","names":[],"sources":["../../src/styles/gap.ts"],"sourcesContent":["import { makeEmptyDetails } from '../parser/types';\nimport { parseStyle } from '../utils/styles';\n\nexport function gapStyle({\n  display = 'block',\n  flow,\n  gap,\n}: {\n  display?: string;\n  flow?: string;\n  gap?: string | number | boolean;\n}) {\n  if (typeof gap === 'number') {\n    gap = `${gap}px`;\n  }\n\n  if (!gap) {\n    return;\n  }\n\n  if (gap === true) {\n    gap = '1x';\n  }\n\n  const isGrid = display.includes('grid');\n  const isFlex = display.includes('flex');\n  const isWrap = flow\n    ? flow.includes('wrap') && !flow.includes('nowrap')\n    : false;\n\n  if (!isGrid && flow == null) {\n    flow = isFlex ? 'row' : 'column';\n  }\n\n  const processed = parseStyle(gap);\n  const { values } = processed.groups[0] ?? makeEmptyDetails();\n\n  gap = values.join(' ');\n\n  if (isGrid || isFlex) {\n    return { gap };\n  }\n\n  const gapDir = flow?.includes('row') ? 'right' : 'bottom';\n\n  return isWrap\n    ? [\n        {\n          'margin-right': `calc(-1 * ${values[1] || values[0]})`,\n          'margin-bottom': `calc(-1 * ${values[0]})`,\n        },\n        {\n          $: '& > *',\n          'margin-right': values[1] || values[0],\n          'margin-bottom': values[0],\n        },\n      ]\n    : {\n        $: '& > *:not(:last-child)',\n        [`margin-${gapDir}`]: gap,\n      };\n}\n\ngapStyle.__lookupStyles = ['display', 'flow', 'gap'];\n"],"mappings":";;;;AAGA,SAAgB,SAAS,EACvB,UAAU,SACV,MACA,OAKC;AACD,KAAI,OAAO,QAAQ,SACjB,OAAM,GAAG,IAAI;AAGf,KAAI,CAAC,IACH;AAGF,KAAI,QAAQ,KACV,OAAM;CAGR,MAAM,SAAS,QAAQ,SAAS,OAAO;CACvC,MAAM,SAAS,QAAQ,SAAS,OAAO;CACvC,MAAM,SAAS,OACX,KAAK,SAAS,OAAO,IAAI,CAAC,KAAK,SAAS,SAAS,GACjD;AAEJ,KAAI,CAAC,UAAU,QAAQ,KACrB,QAAO,SAAS,QAAQ;CAI1B,MAAM,EAAE,WADU,WAAW,IAAI,CACJ,OAAO,MAAM,kBAAkB;AAE5D,OAAM,OAAO,KAAK,IAAI;AAEtB,KAAI,UAAU,OACZ,QAAO,EAAE,KAAK;CAGhB,MAAM,SAAS,MAAM,SAAS,MAAM,GAAG,UAAU;AAEjD,QAAO,SACH,CACE;EACE,gBAAgB,aAAa,OAAO,MAAM,OAAO,GAAG;EACpD,iBAAiB,aAAa,OAAO,GAAG;EACzC,EACD;EACE,GAAG;EACH,gBAAgB,OAAO,MAAM,OAAO;EACpC,iBAAiB,OAAO;EACzB,CACF,GACD;EACE,GAAG;GACF,UAAU,WAAW;EACvB;;AAGP,SAAS,iBAAiB;CAAC;CAAW;CAAQ;CAAM"}
+{"version":3,"file":"gap.js","names":[],"sources":["../../src/styles/gap.ts"],"sourcesContent":["import { CSS_WIDE_KEYWORDS } from '../parser/const';\nimport { makeEmptyDetails } from '../parser/types';\nimport { parseStyle } from '../utils/styles';\n\nexport function gapStyle({\n  display = 'block',\n  flow,\n  gap,\n}: {\n  display?: string;\n  flow?: string;\n  gap?: string | number | boolean;\n}) {\n  if (typeof gap === 'number') {\n    gap = `${gap}px`;\n  }\n\n  if (!gap) {\n    return null;\n  }\n\n  if (gap === true) {\n    gap = '1x';\n  }\n\n  if (CSS_WIDE_KEYWORDS.has(String(gap))) {\n    return { gap: String(gap) };\n  }\n\n  const isGrid = display.includes('grid');\n  const isFlex = display.includes('flex');\n  const isWrap = flow\n    ? flow.includes('wrap') && !flow.includes('nowrap')\n    : false;\n\n  if (!isGrid && flow == null) {\n    flow = isFlex ? 'row' : 'column';\n  }\n\n  const processed = parseStyle(gap);\n  const { values } = processed.groups[0] ?? makeEmptyDetails();\n\n  gap = values.join(' ');\n\n  if (isGrid || isFlex) {\n    return { gap };\n  }\n\n  const gapDir = flow?.includes('row') ? 'right' : 'bottom';\n\n  return isWrap\n    ? [\n        {\n          'margin-right': `calc(-1 * ${values[1] || values[0]})`,\n          'margin-bottom': `calc(-1 * ${values[0]})`,\n        },\n        {\n          $: '& > *',\n          'margin-right': values[1] || values[0],\n          'margin-bottom': values[0],\n        },\n      ]\n    : {\n        $: '& > *:not(:last-child)',\n        [`margin-${gapDir}`]: gap,\n      };\n}\n\ngapStyle.__lookupStyles = ['display', 'flow', 'gap'];\n"],"mappings":";;;;AAIA,SAAgB,SAAS,EACvB,UAAU,SACV,MACA,OAKC;AACD,KAAI,OAAO,QAAQ,SACjB,OAAM,GAAG,IAAI;AAGf,KAAI,CAAC,IACH,QAAO;AAGT,KAAI,QAAQ,KACV,OAAM;AAGR,KAAI,kBAAkB,IAAI,OAAO,IAAI,CAAC,CACpC,QAAO,EAAE,KAAK,OAAO,IAAI,EAAE;CAG7B,MAAM,SAAS,QAAQ,SAAS,OAAO;CACvC,MAAM,SAAS,QAAQ,SAAS,OAAO;CACvC,MAAM,SAAS,OACX,KAAK,SAAS,OAAO,IAAI,CAAC,KAAK,SAAS,SAAS,GACjD;AAEJ,KAAI,CAAC,UAAU,QAAQ,KACrB,QAAO,SAAS,QAAQ;CAI1B,MAAM,EAAE,WADU,WAAW,IAAI,CACJ,OAAO,MAAM,kBAAkB;AAE5D,OAAM,OAAO,KAAK,IAAI;AAEtB,KAAI,UAAU,OACZ,QAAO,EAAE,KAAK;CAGhB,MAAM,SAAS,MAAM,SAAS,MAAM,GAAG,UAAU;AAEjD,QAAO,SACH,CACE;EACE,gBAAgB,aAAa,OAAO,MAAM,OAAO,GAAG;EACpD,iBAAiB,aAAa,OAAO,GAAG;EACzC,EACD;EACE,GAAG;EACH,gBAAgB,OAAO,MAAM,OAAO;EACpC,iBAAiB,OAAO;EACzB,CACF,GACD;EACE,GAAG;GACF,UAAU,WAAW;EACvB;;AAGP,SAAS,iBAAiB;CAAC;CAAW;CAAQ;CAAM"}

package/dist/styles/height.d.ts

@@ -8,7 +8,7 @@ declare function heightStyle({
   height,
   minHeight,
   maxHeight
-}: HeightStyleProps): Record<string, string | string[]> | undefined;
+}: HeightStyleProps): Record<string, string | string[]> | null;
 declare namespace heightStyle {
   var __lookupStyles: string[];
 }

package/dist/styles/height.js

@@ -1,5 +1,4 @@
 import { dimensionStyle } from "./dimension.js";
-
 //#region src/styles/height.ts
 const dimension = dimensionStyle("height");
 function heightStyle({ height, minHeight, maxHeight }) {
@@ -14,7 +13,7 @@ heightStyle.__lookupStyles = [
 	"minHeight",
 	"maxHeight"
 ];
-
 //#endregion
 export { heightStyle };
+
 //# sourceMappingURL=height.js.map

package/dist/styles/height.js.map

@@ -1 +1 @@
-{"version":3,"file":"height.js","names":[],"sources":["../../src/styles/height.ts"],"sourcesContent":["import { dimensionStyle } from './dimension';\n\nconst dimension = dimensionStyle('height');\n\ninterface HeightStyleProps {\n  height?: string | number | boolean;\n  minHeight?: string | number | boolean;\n  maxHeight?: string | number | boolean;\n}\n\nexport function heightStyle({\n  height,\n  minHeight,\n  maxHeight,\n}: HeightStyleProps) {\n  return dimension({ value: height, min: minHeight, max: maxHeight });\n}\n\nheightStyle.__lookupStyles = ['height', 'minHeight', 'maxHeight'];\n"],"mappings":";;;AAEA,MAAM,YAAY,eAAe,SAAS;AAQ1C,SAAgB,YAAY,EAC1B,QACA,WACA,aACmB;AACnB,QAAO,UAAU;EAAE,OAAO;EAAQ,KAAK;EAAW,KAAK;EAAW,CAAC;;AAGrE,YAAY,iBAAiB;CAAC;CAAU;CAAa;CAAY"}
+{"version":3,"file":"height.js","names":[],"sources":["../../src/styles/height.ts"],"sourcesContent":["import { dimensionStyle } from './dimension';\n\nconst dimension = dimensionStyle('height');\n\ninterface HeightStyleProps {\n  height?: string | number | boolean;\n  minHeight?: string | number | boolean;\n  maxHeight?: string | number | boolean;\n}\n\nexport function heightStyle({\n  height,\n  minHeight,\n  maxHeight,\n}: HeightStyleProps) {\n  return dimension({ value: height, min: minHeight, max: maxHeight });\n}\n\nheightStyle.__lookupStyles = ['height', 'minHeight', 'maxHeight'];\n"],"mappings":";;AAEA,MAAM,YAAY,eAAe,SAAS;AAQ1C,SAAgB,YAAY,EAC1B,QACA,WACA,aACmB;AACnB,QAAO,UAAU;EAAE,OAAO;EAAQ,KAAK;EAAW,KAAK;EAAW,CAAC;;AAGrE,YAAY,iBAAiB;CAAC;CAAU;CAAa;CAAY"}

package/dist/styles/index.d.ts

@@ -1,2 +1 @@
-import "../index.js";
 import { styleHandlers } from "./predefined.js";

package/dist/styles/index.js

@@ -1,9 +1,8 @@
-import { convertColorChainToComponentChain, createStyle } from "./createStyle.js";
-import { normalizeHandlerDefinition, predefine, registerHandler, resetHandlers, styleHandlers } from "./predefined.js";
-
+import "./createStyle.js";
+import { predefine } from "./predefined.js";
 //#region src/styles/index.ts
 const { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias } = predefine();
-
 //#endregion
 export { STYLE_HANDLER_MAP };
+
 //# sourceMappingURL=index.js.map

package/dist/styles/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/styles/index.ts"],"sourcesContent":["import { predefine, styleHandlers } from './predefined';\n\nconst { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias } = predefine();\n\nexport {\n  STYLE_HANDLER_MAP,\n  defineCustomStyle,\n  defineStyleAlias,\n  styleHandlers,\n};\nexport * from './createStyle';\nexport {\n  normalizeHandlerDefinition,\n  registerHandler,\n  resetHandlers,\n  validateHandlerResult,\n} from './predefined';\n"],"mappings":";;;;AAEA,MAAM,EAAE,mBAAmB,mBAAmB,qBAAqB,WAAW"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/styles/index.ts"],"sourcesContent":["import { predefine, styleHandlers } from './predefined';\n\nconst { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias } = predefine();\n\nexport {\n  STYLE_HANDLER_MAP,\n  defineCustomStyle,\n  defineStyleAlias,\n  styleHandlers,\n};\nexport * from './createStyle';\nexport {\n  normalizeHandlerDefinition,\n  registerHandler,\n  resetHandlers,\n  validateHandlerResult,\n} from './predefined';\n"],"mappings":";;;AAEA,MAAM,EAAE,mBAAmB,mBAAmB,qBAAqB,WAAW"}

package/dist/styles/inset.d.ts

@@ -1,30 +1,4 @@
 //#region src/styles/inset.d.ts
-/**
- * Inset style handler.
- *
- * IMPORTANT: This handler uses individual CSS properties (top, right, bottom, left)
- * when only individual direction props are specified. This allows CSS cascade to work
- * correctly when modifiers override only some directions.
- *
- * Example problem with using `inset` shorthand everywhere:
- *   styles: {
- *     top: { '': 0, 'side=bottom': 'initial' },
- *     right: { '': 0, 'side=left': 'initial' },
- *     bottom: { '': 0, 'side=top': 'initial' },
- *     left: { '': 0, 'side=right': 'initial' },
- *   }
- *
- * If we output `inset` for both cases:
- *   - Default: inset: 0 0 0 0
- *   - side=bottom: inset: initial auto auto auto  ← WRONG! Overrides all 4 directions
- *
- * With individual properties:
- *   - Default: top: 0; right: 0; bottom: 0; left: 0
- *   - side=bottom: top: initial  ← CORRECT! Only overrides top
- *
- * The `inset` shorthand is only used when the base `inset` prop is specified
- * OR when `insetBlock`/`insetInline` are used (which imply setting pairs).
- */
 declare function insetStyle({
   inset,
   insetBlock,
@@ -41,9 +15,7 @@ declare function insetStyle({
   right?: string | number | boolean;
   bottom?: string | number | boolean;
   left?: string | number | boolean;
-}): Record<string, string> | {
-  inset: string;
-};
+}): Record<string, string> | null;
 declare namespace insetStyle {
   var __lookupStyles: string[];
 }