@tenphi/tasty 0.5.1 → 0.5.3

package/README.md

@@ -27,7 +27,7 @@ On top of that foundation, Tasty gives you a concise, CSS-like DSL with design t
 - **AI-friendly by design** — Style definitions are declarative, self-contained, and structurally consistent. AI tools can read, understand, and refactor even advanced state bindings as confidently as a human — because there's no hidden cascade logic or implicit ordering to second-guess.
 - **DSL that feels like CSS** — Property names you already know (`padding`, `color`, `display`) with syntax sugar that removes boilerplate. Learn the DSL in minutes, not days.
 - **Design-system native** — Color tokens (`#primary`), spacing units (`2x`), typography presets (`h1`, `t2`), border radius (`1r`), and recipes are first-class primitives, not afterthoughts.
-- **Full modern CSS coverage** — Media queries, container queries, `@supports`, `:has()`, `@starting-style`, `@property`, keyframes, boolean state logic with `&`, `|`, `!` operators. If CSS can do it, Tasty can express it — concisely.
+- **Near-complete modern CSS coverage** — Media queries, container queries, `@supports`, `:has()`, `@starting-style`, `@property`, `@keyframes`, etc. Some features that don't fit Tasty's component model (such as `@layer` and `!important`) are intentionally omitted, but real-world use cases are covered almost completely.
 - **Runtime or zero-runtime — your call** — Use `tasty()` for dynamic React components with runtime injection, or `tastyStatic()` with the Babel plugin for zero-runtime CSS extraction. Same DSL, same tokens, same output.
 - **Only generate what is used** — In runtime mode, Tasty injects CSS on demand for mounted components/variants, so your app avoids shipping style rules for UI states that are never rendered.
 - **Runtime performance that holds at scale** — The runtime path is tested against enterprise-scale applications and tuned with multi-level caching, chunk-level style reuse, style garbage collection, and a dedicated injector.
@@ -134,9 +134,13 @@ Predefined states turn complex selector logic into single tokens. Use `@mobile`
 
 This is the core idea that makes everything else possible.
 
-Traditional CSS uses the cascade to resolve conflicts: when multiple selectors match, the one with the highest specificity wins, or — if specificity is equal — the last one in source order wins. This makes styles inherently fragile. Reordering imports, adding a new media query, or composing components from different libraries can silently break styling.
+Traditional CSS has two structural problems.
 
-Tasty takes a fundamentally different approach: **every state mapping compiles into selectors that are guaranteed to never overlap.**
+First, the **cascade** resolves conflicts by specificity and source order: when multiple selectors match, the one with the highest specificity wins, or — if specificity is equal — the last one in source order wins. That makes styles inherently fragile. Reordering imports, adding a media query, or composing components from different libraries can silently break styling.
+
+Second, **authoring selectors that capture real-world state logic is fundamentally hard.** A single state like "dark mode" may depend on a root attribute, an OS preference, or both — each branch needing its own selector, proper negation of competing branches, and correct `@media` nesting. The example below shows the CSS you'd write by hand for just *one* property with *one* state. Scale that across dozens of properties, then add breakpoints and container queries, and the selector logic quickly becomes unmanageable.
+
+Tasty solves both problems at once: **every state mapping compiles into mutually exclusive selectors.**
 
 ```tsx
 const Text = tasty({
@@ -181,7 +185,9 @@ If `@dark` expands to `@root(schema=dark) | (!@root(schema) & @media(prefers-col
 }
 ```
 
-Every rule is guarded by the negation of all higher-priority rules. No two rules can ever match simultaneously. No specificity arithmetic. No source-order dependence. Components compose and extend without ever colliding.
+Every rule is guarded by the negation of higher-priority rules. No two rules can match at the same time. No specificity arithmetic. No source-order dependence. Components compose and extend without collisions.
+
+By absorbing selector complexity, Tasty makes advanced CSS patterns practical again — nested container queries, multi-condition `@supports` gates, and combined root-state/media branches. You stay in pure CSS instead of relying on JavaScript workarounds, so the browser can optimize layout, painting, and transitions natively. Tasty doesn't limit CSS; it unlocks its full potential by removing the complexity that held teams back.
 
 ## Capabilities
 
@@ -413,11 +419,12 @@ If you choose the runtime approach, performance is usually a non-issue in practi
 
 | Import | Description | Platform |
 |--------|-------------|----------|
-| `@tenphi/tasty` | Runtime style engine | Browser |
-| `@tenphi/tasty/static` | Zero-runtime static styles | Browser |
-| `@tenphi/tasty/babel-plugin` | Babel plugin for CSS extraction | Node |
+| `@tenphi/tasty` | Runtime style engine (`tasty`, hooks, `configure`) | Browser |
+| `@tenphi/tasty/static` | Zero-runtime static styles (`tastyStatic`) | Browser |
+| `@tenphi/tasty/core` | Lower-level internals (config, parser, pipeline, injector, style handlers) for tooling and advanced use | Browser / Node |
+| `@tenphi/tasty/babel-plugin` | Babel plugin for zero-runtime CSS extraction | Node |
 | `@tenphi/tasty/zero` | Programmatic extraction API | Node |
-| `@tenphi/tasty/next` | Next.js integration | Node |
+| `@tenphi/tasty/next` | Next.js integration wrapper | Node |
 
 ## Ecosystem
 
@@ -456,13 +463,18 @@ const tokens = theme.tasty(); // Ready-to-use Tasty tokens
 
 Syntax highlighting for Tasty styles in TypeScript, TSX, JavaScript, and JSX. Highlights color tokens, custom units, state keys, presets, and style properties inside `tasty()`, `tastyStatic()`, and related APIs.
 
+<p align="center">
+  <img src="assets/tasty-vscode-highlight.png" width="512" alt="Tasty VS Code syntax highlighting example">
+</p>
+
 ### [Cube UI Kit](https://github.com/cube-js/cube-ui-kit)
 
 Open-source React UI kit built on Tasty + React Aria. 100+ production components proving Tasty works at design-system scale. A reference implementation and a ready-to-use component library.
 
 ## Documentation
 
-- **[Runtime API (tasty)](docs/tasty.md)** — Full runtime styling documentation: component creation, state mappings, sub-elements, variants, hooks, configuration, and style property reference
+- **[Runtime API (tasty)](docs/tasty.md)** — Full runtime styling documentation: component creation, state mappings, sub-elements, variants, hooks, and configuration
+- **[Style Properties](docs/styles.md)** — Complete reference for all enhanced style properties: syntax, values, modifiers, and recommendations
 - **[Zero Runtime (tastyStatic)](docs/tasty-static.md)** — Build-time static styling: Babel plugin setup, Next.js integration, and static style patterns
 - **[Style Injector](docs/injector.md)** — Internal CSS injection engine: `inject()`, `injectGlobal()`, `injectRawCSS()`, `keyframes()`, deduplication, reference counting, cleanup, SSR support, and Shadow DOM
 - **[Debug Utilities](docs/debug.md)** — Runtime CSS inspection via `tastyDebug`: CSS extraction, element inspection, cache metrics, chunk breakdown, and performance monitoring

package/dist/index.d.ts

@@ -37,4 +37,12 @@ import { TypographyPreset } from "./tokens/typography.js";
 import { generateTypographyTokens } from "./utils/typography.js";
 import { tastyDebug } from "./debug.js";
 import "./core/index.js";
-export { type AllBaseProps, type AllBasePropsWithMods, AtRuleContext, BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, type BaseProps, type BasePropsWithoutChildren, BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, Bucket, CHUNK_NAMES, COLOR_STYLES, COMPUTE_FUNC_MAP, CONTAINER_STYLES, CSSMap, CSSProperties, CUSTOM_UNITS, CacheMetrics, ChunkInfo, ChunkName, ColorStyleProps, ComputeModel, ConditionNode, ContainerStyleProps, DIMENSION_STYLES, DIRECTIONS, DimensionStyleProps, DisposeFunction, Element, type ElementsDefinition, FLOW_STYLES, FlowStyleProps, GlobalStyledProps, INNER_STYLES, InjectResult, InnerStyleProps, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, ModValue, Mods, NoType, NotSelector, OUTER_STYLES, OuterStyleProps, POSITION_STYLES, ParseStateKeyOptions, ParsedAdvancedState, ParsedColor, ParserOptions, PositionStyleProps, ProcessedStyle, PropertyDefinition, PropertyOptions, Props, RawCSSResult, RawStyleHandler, RecipeStyles, RenderResult, RootRegistry, RuleInfo, STATE_OPERATORS, STATE_OPERATOR_LIST, STYLE_TO_CHUNK, Selector, SheetInfo, SheetManager, ShortGridStyles, StateParserContext, StyleDetails, StyleDetailsPart, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleInjector, StyleInjectorConfig, StyleMap, StyleParser, StylePropValue, StyleResult, StyleRule, StyleStateData, StyleStateDataList, StyleStateDataListMap, StyleStateMap, StyleValue, StyleValueStateMap, Styles, StylesInterface, StylesWithoutSelectors, type SubElementDefinition, type SubElementProps, SuffixForSelector, TEXT_STYLES, TagName, TastyConfig, type TastyElementOptions, type TastyElementProps, TastyExtensionConfig, TastyNamedColors, TastyPlugin, TastyPluginFactory, TastyPresetNames, type TastyProps, TastyThemeNames, TextStyleProps, TokenValue, Tokens, TypographyPreset, UnitHandler, type UsePropertyOptions, type UseStylesOptions, type UseStylesResult, type VariantMap, type WithVariant, allocateClassName, buildAtRuleContext, categorizeStyleKeys, cleanup, color, computeState, configure, createInjector, createStateParserContext, customFunc, deprecationWarning, destroy, dotize, extendStyles, extractStyles, filterBaseProps, filterMods, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getModSelector, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isAdvancedStateToken, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateKey, parseStateNotation, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, stringifyTokens, styleHandlers, styleStateMapToStyleStateDataList, tasty, tastyDebug, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };
+import { CSSProperties as CSSProperties$1 } from "react";
+
+//#region src/index.d.ts
+declare module './utils/css-types' {
+  interface CSSProperties extends CSSProperties$1 {}
+}
+//#endregion
+export { type AllBaseProps, type AllBasePropsWithMods, AtRuleContext, BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, type BaseProps, type BasePropsWithoutChildren, BaseStyleProps, BlockInnerStyleProps, BlockOuterStyleProps, BlockStyleProps, Bucket, CHUNK_NAMES, COLOR_STYLES, COMPUTE_FUNC_MAP, CONTAINER_STYLES, CSSMap, CSSProperties, CUSTOM_UNITS, CacheMetrics, ChunkInfo, ChunkName, ColorStyleProps, ComputeModel, ConditionNode, ContainerStyleProps, DIMENSION_STYLES, DIRECTIONS, DimensionStyleProps, DisposeFunction, Element, type ElementsDefinition, FLOW_STYLES, FlowStyleProps, GlobalStyledProps, INNER_STYLES, InjectResult, InnerStyleProps, KeyframesCacheEntry, KeyframesInfo, KeyframesResult, KeyframesSteps, ModValue, Mods, NoType, NotSelector, OUTER_STYLES, OuterStyleProps, POSITION_STYLES, ParseStateKeyOptions, ParsedAdvancedState, ParsedColor, ParserOptions, PositionStyleProps, ProcessedStyle, PropertyDefinition, PropertyOptions, Props, RawCSSResult, RawStyleHandler, RecipeStyles, RenderResult, RootRegistry, RuleInfo, STATE_OPERATORS, STATE_OPERATOR_LIST, STYLE_TO_CHUNK, Selector, SheetInfo, SheetManager, ShortGridStyles, StateParserContext, StyleDetails, StyleDetailsPart, StyleHandler, StyleHandlerDefinition, StyleHandlerResult, StyleInjector, StyleInjectorConfig, StyleMap, StyleParser, StylePropValue, StyleResult, StyleRule, StyleStateData, StyleStateDataList, StyleStateDataListMap, StyleStateMap, StyleValue, StyleValueStateMap, Styles, StylesInterface, StylesWithoutSelectors, type SubElementDefinition, type SubElementProps, SuffixForSelector, TEXT_STYLES, TagName, TastyConfig, type TastyElementOptions, type TastyElementProps, TastyExtensionConfig, TastyNamedColors, TastyPlugin, TastyPluginFactory, TastyPresetNames, type TastyProps, TastyThemeNames, TextStyleProps, TokenValue, Tokens, TypographyPreset, UnitHandler, type UsePropertyOptions, type UseStylesOptions, type UseStylesResult, type VariantMap, type WithVariant, allocateClassName, buildAtRuleContext, categorizeStyleKeys, cleanup, color, computeState, configure, createInjector, createStateParserContext, customFunc, deprecationWarning, destroy, dotize, extendStyles, extractStyles, filterBaseProps, filterMods, generateTypographyTokens, getConfig, getCssText, getCssTextForNode, getDisplayName, getGlobalFuncs, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getIsTestEnvironment, getModSelector, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isAdvancedStateToken, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunc, okhslPlugin, parseColor, parseStateKey, parseStateNotation, parseStyle, processTokens, property, renderStyles, resetConfig, resetGlobalPredefinedTokens, resolveRecipes, setGlobalPredefinedStates, setGlobalPredefinedTokens, strToRgb, stringifyStyles, stringifyTokens, styleHandlers, styleStateMapToStyleStateDataList, tasty, tastyDebug, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles, warn };
+//# sourceMappingURL=index.d.ts.map

package/dist/styles/inset.d.ts

@@ -41,7 +41,9 @@ declare function insetStyle({
   right?: string | number | boolean;
   bottom?: string | number | boolean;
   left?: string | number | boolean;
-}): Record<string, string>;
+}): Record<string, string> | {
+  inset: string;
+};
 declare namespace insetStyle {
   var __lookupStyles: string[];
 }

package/dist/styles/inset.js

@@ -12,25 +12,39 @@ function parseInsetValue(value) {
 	return values[0] || "0";
 }
 /**
-* Parse inset value with optional directions (like "1x top" or "2x left right")
+* Extract values and directions from a single parsed group.
 */
-function parseDirectionalInset(value) {
-	if (typeof value === "number") return {
-		values: [`${value}px`],
-		directions: []
-	};
-	if (!value) return {
-		values: [],
-		directions: []
-	};
-	if (value === true) value = "0";
-	const { values = [], mods = [] } = parseStyle(value).groups[0] ?? {};
+function extractGroupData(group) {
+	const { values = [], mods = [] } = group;
 	return {
 		values: values.length ? values : ["0"],
 		directions: filterMods(mods, DIRECTIONS)
 	};
 }
 /**
+* Apply a single group's values and directions onto a direction map.
+*/
+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];
+	});
+}
+/**
+* Optimize inset output shorthand.
+*/
+function optimizeInset(dirs) {
+	const { top, right, bottom, left } = dirs;
+	if (top === right && right === bottom && bottom === left) return { inset: top };
+	if (top === bottom && left === right) return { inset: `${top} ${left}` };
+	return { inset: `${top} ${right} ${bottom} ${left}` };
+}
+/**
 * Inset style handler.
 *
 * IMPORTANT: This handler uses individual CSS properties (top, right, bottom, left)
@@ -78,54 +92,48 @@ function insetStyle({ inset, insetBlock, insetInline, top, right, bottom, left }
 		}
 		return result;
 	}
-	let [topVal, rightVal, bottomVal, leftVal] = [
-		"auto",
-		"auto",
-		"auto",
-		"auto"
-	];
+	const dirs = {
+		top: "auto",
+		right: "auto",
+		bottom: "auto",
+		left: "auto"
+	};
 	if (inset != null) {
-		const { values, directions } = parseDirectionalInset(inset);
-		if (values.length) if (directions.length === 0) {
-			topVal = values[0];
-			rightVal = values[1] || values[0];
-			bottomVal = values[2] || values[0];
-			leftVal = values[3] || values[1] || values[0];
-		} else directions.forEach((dir, i) => {
-			const val = values[i] ?? values[0];
-			if (dir === "top") topVal = val;
-			else if (dir === "right") rightVal = val;
-			else if (dir === "bottom") bottomVal = val;
-			else if (dir === "left") leftVal = val;
-		});
+		if (typeof inset === "number") dirs.top = dirs.right = dirs.bottom = dirs.left = `${inset}px`;
+		else if (inset === true) inset = "0";
+		if (typeof inset === "string" && inset) {
+			const groups = parseStyle(inset).groups ?? [];
+			for (const group of groups) {
+				const { values, directions } = extractGroupData(group);
+				applyGroup(dirs, values, directions);
+			}
+		}
 	}
 	if (insetBlock != null) {
 		const val = parseInsetValue(insetBlock);
-		if (val) topVal = bottomVal = val;
+		if (val) dirs.top = dirs.bottom = val;
 	}
 	if (insetInline != null) {
 		const val = parseInsetValue(insetInline);
-		if (val) leftVal = rightVal = val;
+		if (val) dirs.left = dirs.right = val;
 	}
 	if (top != null) {
 		const val = parseInsetValue(top);
-		if (val) topVal = val;
+		if (val) dirs.top = val;
 	}
 	if (right != null) {
 		const val = parseInsetValue(right);
-		if (val) rightVal = val;
+		if (val) dirs.right = val;
 	}
 	if (bottom != null) {
 		const val = parseInsetValue(bottom);
-		if (val) bottomVal = val;
+		if (val) dirs.bottom = val;
 	}
 	if (left != null) {
 		const val = parseInsetValue(left);
-		if (val) leftVal = val;
+		if (val) dirs.left = val;
 	}
-	if (topVal === rightVal && rightVal === bottomVal && bottomVal === leftVal) return { inset: topVal };
-	if (topVal === bottomVal && leftVal === rightVal) return { inset: `${topVal} ${leftVal}` };
-	return { inset: `${topVal} ${rightVal} ${bottomVal} ${leftVal}` };
+	return optimizeInset(dirs);
 }
 insetStyle.__lookupStyles = [
 	"inset",

package/dist/styles/inset.js.map

@@ -1 +1 @@
-{"version":3,"file":"inset.js","names":[],"sources":["../../src/styles/inset.ts"],"sourcesContent":["import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\n\n/**\n * Parse an inset value and return the first processed value\n */\nfunction parseInsetValue(value: string | number | boolean): string | null {\n  if (typeof value === 'number') return `${value}px`;\n  if (!value) return null;\n  if (value === true) value = '0';\n\n  const { values } = parseStyle(value).groups[0] ?? { values: [] };\n\n  return values[0] || '0';\n}\n\n/**\n * Parse inset value with optional directions (like \"1x top\" or \"2x left right\")\n */\nfunction parseDirectionalInset(value: string | number | boolean): {\n  values: string[];\n  directions: string[];\n} {\n  if (typeof value === 'number') {\n    return { values: [`${value}px`], directions: [] };\n  }\n  if (!value) return { values: [], directions: [] };\n  if (value === true) value = '0';\n\n  const { values = [], mods = [] } = parseStyle(value).groups[0] ?? {};\n\n  return {\n    values: values.length ? values : ['0'],\n    directions: filterMods(mods, DIRECTIONS),\n  };\n}\n\n/**\n * Inset style handler.\n *\n * IMPORTANT: This handler uses individual CSS properties (top, right, bottom, left)\n * when only individual direction props are specified. This allows CSS cascade to work\n * correctly when modifiers override only some directions.\n *\n * Example problem with using `inset` shorthand everywhere:\n *   styles: {\n *     top: { '': 0, 'side=bottom': 'initial' },\n *     right: { '': 0, 'side=left': 'initial' },\n *     bottom: { '': 0, 'side=top': 'initial' },\n *     left: { '': 0, 'side=right': 'initial' },\n *   }\n *\n * If we output `inset` for both cases:\n *   - Default: inset: 0 0 0 0\n *   - side=bottom: inset: initial auto auto auto  ← WRONG! Overrides all 4 directions\n *\n * With individual properties:\n *   - Default: top: 0; right: 0; bottom: 0; left: 0\n *   - side=bottom: top: initial  ← CORRECT! Only overrides top\n *\n * The `inset` shorthand is only used when the base `inset` prop is specified\n * OR when `insetBlock`/`insetInline` are used (which imply setting pairs).\n */\nexport function insetStyle({\n  inset,\n  insetBlock,\n  insetInline,\n  top,\n  right,\n  bottom,\n  left,\n}: {\n  inset?: string | number | boolean;\n  insetBlock?: string | number | boolean;\n  insetInline?: 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  // If no props are defined, return empty object\n  if (\n    inset == null &&\n    insetBlock == null &&\n    insetInline == null &&\n    top == null &&\n    right == null &&\n    bottom == null &&\n    left == null\n  ) {\n    return {};\n  }\n\n  // When only individual direction props are used (no inset, insetBlock, insetInline),\n  // output individual CSS properties to allow proper CSS cascade with modifiers\n  const onlyIndividualProps =\n    inset == null && insetBlock == null && insetInline == null;\n\n  if (onlyIndividualProps) {\n    const result: Record<string, string> = {};\n\n    if (top != null) {\n      const val = parseInsetValue(top);\n      if (val) result['top'] = val;\n    }\n    if (right != null) {\n      const val = parseInsetValue(right);\n      if (val) result['right'] = val;\n    }\n    if (bottom != null) {\n      const val = parseInsetValue(bottom);\n      if (val) result['bottom'] = val;\n    }\n    if (left != null) {\n      const val = parseInsetValue(left);\n      if (val) result['left'] = val;\n    }\n\n    return result;\n  }\n\n  // When inset, insetBlock, or insetInline is used, use the shorthand approach\n  // Initialize all directions to auto\n  let [topVal, rightVal, bottomVal, leftVal] = ['auto', 'auto', 'auto', 'auto'];\n\n  // Priority 1 (lowest): inset\n  if (inset != null) {\n    const { values, directions } = parseDirectionalInset(inset);\n\n    if (values.length) {\n      if (directions.length === 0) {\n        topVal = values[0];\n        rightVal = values[1] || values[0];\n        bottomVal = values[2] || values[0];\n        leftVal = values[3] || values[1] || values[0];\n      } else {\n        // Assign values to directions in the order they appear\n        // e.g., 'right 1x top 0' → right: 1x, top: 0\n        directions.forEach((dir, i) => {\n          const val = values[i] ?? values[0];\n          if (dir === 'top') topVal = val;\n          else if (dir === 'right') rightVal = val;\n          else if (dir === 'bottom') bottomVal = val;\n          else if (dir === 'left') leftVal = val;\n        });\n      }\n    }\n  }\n\n  // Priority 2 (medium): insetBlock/insetInline\n  if (insetBlock != null) {\n    const val = parseInsetValue(insetBlock);\n    if (val) topVal = bottomVal = val;\n  }\n  if (insetInline != null) {\n    const val = parseInsetValue(insetInline);\n    if (val) leftVal = rightVal = val;\n  }\n\n  // Priority 3 (highest): individual directions\n  if (top != null) {\n    const val = parseInsetValue(top);\n    if (val) topVal = val;\n  }\n  if (right != null) {\n    const val = parseInsetValue(right);\n    if (val) rightVal = val;\n  }\n  if (bottom != null) {\n    const val = parseInsetValue(bottom);\n    if (val) bottomVal = val;\n  }\n  if (left != null) {\n    const val = parseInsetValue(left);\n    if (val) leftVal = val;\n  }\n\n  // Optimize output: 1 value if all same, 2 values if top==bottom && left==right\n  if (topVal === rightVal && rightVal === bottomVal && bottomVal === leftVal) {\n    return { inset: topVal };\n  }\n  if (topVal === bottomVal && leftVal === rightVal) {\n    return { inset: `${topVal} ${leftVal}` };\n  }\n\n  return { inset: `${topVal} ${rightVal} ${bottomVal} ${leftVal}` };\n}\n\ninsetStyle.__lookupStyles = [\n  'inset',\n  'insetBlock',\n  'insetInline',\n  'top',\n  'right',\n  'bottom',\n  'left',\n];\n"],"mappings":"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"}
+{"version":3,"file":"inset.js","names":[],"sources":["../../src/styles/inset.ts"],"sourcesContent":["import type { StyleDetails } from '../parser/types';\nimport { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\n\ntype Direction = (typeof DIRECTIONS)[number];\n\n/**\n * Parse an inset value and return the first processed value\n */\nfunction parseInsetValue(value: string | number | boolean): string | null {\n  if (typeof value === 'number') return `${value}px`;\n  if (!value) return null;\n  if (value === true) value = '0';\n\n  const { values } = parseStyle(value).groups[0] ?? { values: [] };\n\n  return values[0] || '0';\n}\n\n/**\n * Extract values and directions from a single parsed group.\n */\nfunction extractGroupData(group: StyleDetails): {\n  values: string[];\n  directions: Direction[];\n} {\n  const { values = [], mods = [] } = group;\n  return {\n    values: values.length ? values : ['0'],\n    directions: filterMods(mods, DIRECTIONS) as Direction[],\n  };\n}\n\n/**\n * Apply a single group's values and directions onto a direction map.\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\n/**\n * Optimize inset output shorthand.\n */\nfunction optimizeInset(dirs: Record<Direction, string>): { inset: string } {\n  const { top, right, bottom, left } = dirs;\n  if (top === right && right === bottom && bottom === left) {\n    return { inset: top };\n  }\n  if (top === bottom && left === right) {\n    return { inset: `${top} ${left}` };\n  }\n  return { inset: `${top} ${right} ${bottom} ${left}` };\n}\n\n/**\n * Inset style handler.\n *\n * IMPORTANT: This handler uses individual CSS properties (top, right, bottom, left)\n * when only individual direction props are specified. This allows CSS cascade to work\n * correctly when modifiers override only some directions.\n *\n * Example problem with using `inset` shorthand everywhere:\n *   styles: {\n *     top: { '': 0, 'side=bottom': 'initial' },\n *     right: { '': 0, 'side=left': 'initial' },\n *     bottom: { '': 0, 'side=top': 'initial' },\n *     left: { '': 0, 'side=right': 'initial' },\n *   }\n *\n * If we output `inset` for both cases:\n *   - Default: inset: 0 0 0 0\n *   - side=bottom: inset: initial auto auto auto  ← WRONG! Overrides all 4 directions\n *\n * With individual properties:\n *   - Default: top: 0; right: 0; bottom: 0; left: 0\n *   - side=bottom: top: initial  ← CORRECT! Only overrides top\n *\n * The `inset` shorthand is only used when the base `inset` prop is specified\n * OR when `insetBlock`/`insetInline` are used (which imply setting pairs).\n */\nexport function insetStyle({\n  inset,\n  insetBlock,\n  insetInline,\n  top,\n  right,\n  bottom,\n  left,\n}: {\n  inset?: string | number | boolean;\n  insetBlock?: string | number | boolean;\n  insetInline?: 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  if (\n    inset == null &&\n    insetBlock == null &&\n    insetInline == null &&\n    top == null &&\n    right == null &&\n    bottom == null &&\n    left == null\n  ) {\n    return {};\n  }\n\n  // When only individual direction props are used (no inset, insetBlock, insetInline),\n  // output individual CSS properties to allow proper CSS cascade with modifiers\n  const onlyIndividualProps =\n    inset == null && insetBlock == null && insetInline == null;\n\n  if (onlyIndividualProps) {\n    const result: Record<string, string> = {};\n\n    if (top != null) {\n      const val = parseInsetValue(top);\n      if (val) result['top'] = val;\n    }\n    if (right != null) {\n      const val = parseInsetValue(right);\n      if (val) result['right'] = val;\n    }\n    if (bottom != null) {\n      const val = parseInsetValue(bottom);\n      if (val) result['bottom'] = val;\n    }\n    if (left != null) {\n      const val = parseInsetValue(left);\n      if (val) result['left'] = val;\n    }\n\n    return result;\n  }\n\n  const dirs: Record<Direction, string> = {\n    top: 'auto',\n    right: 'auto',\n    bottom: 'auto',\n    left: 'auto',\n  };\n\n  // Priority 1 (lowest): inset\n  if (inset != null) {\n    if (typeof inset === 'number') {\n      const v = `${inset}px`;\n      dirs.top = dirs.right = dirs.bottom = dirs.left = v;\n    } else if (inset === true) {\n      inset = '0';\n    }\n\n    if (typeof inset === 'string' && inset) {\n      const processed = parseStyle(inset);\n      const groups = processed.groups ?? [];\n\n      for (const group of groups) {\n        const { values, directions } = extractGroupData(group);\n        applyGroup(dirs, values, directions);\n      }\n    }\n  }\n\n  // Priority 2 (medium): insetBlock/insetInline\n  if (insetBlock != null) {\n    const val = parseInsetValue(insetBlock);\n    if (val) dirs.top = dirs.bottom = val;\n  }\n  if (insetInline != null) {\n    const val = parseInsetValue(insetInline);\n    if (val) dirs.left = dirs.right = val;\n  }\n\n  // Priority 3 (highest): individual directions\n  if (top != null) {\n    const val = parseInsetValue(top);\n    if (val) dirs.top = val;\n  }\n  if (right != null) {\n    const val = parseInsetValue(right);\n    if (val) dirs.right = val;\n  }\n  if (bottom != null) {\n    const val = parseInsetValue(bottom);\n    if (val) dirs.bottom = val;\n  }\n  if (left != null) {\n    const val = parseInsetValue(left);\n    if (val) dirs.left = val;\n  }\n\n  return optimizeInset(dirs);\n}\n\ninsetStyle.__lookupStyles = [\n  'inset',\n  'insetBlock',\n  'insetInline',\n  'top',\n  'right',\n  'bottom',\n  'left',\n];\n"],"mappings":"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"}

package/dist/styles/margin.d.ts

@@ -15,11 +15,7 @@ declare function marginStyle({
   marginRight?: string | number | boolean;
   marginBottom?: string | number | boolean;
   marginLeft?: string | number | boolean;
-}): {
-  margin?: undefined;
-} | {
-  margin: string;
-};
+}): {};
 declare namespace marginStyle {
   var __lookupStyles: string[];
 }

package/dist/styles/margin.js

@@ -12,74 +12,82 @@ function parseMarginValue(value) {
 	return values[0] || "var(--gap)";
 }
 /**
-* Parse margin value with optional directions (like "1x top" or "2x left right")
+* Extract values and directions from a single parsed group.
 */
-function parseDirectionalMargin(value) {
-	if (typeof value === "number") return {
-		values: [`${value}px`],
-		directions: []
-	};
-	if (!value) return {
-		values: [],
-		directions: []
-	};
-	if (value === true) value = "1x";
-	const { values = [], mods = [] } = parseStyle(value).groups[0] ?? {};
+function extractGroupData(group) {
+	const { values = [], mods = [] } = group;
 	return {
 		values: values.length ? values : ["var(--gap)"],
 		directions: filterMods(mods, DIRECTIONS)
 	};
 }
+/**
+* Apply a single group's values and directions onto a direction map.
+*/
+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];
+	});
+}
+/**
+* Optimize margin output shorthand.
+*/
+function optimizeMargin(dirs) {
+	const { top, right, bottom, left } = dirs;
+	if (top === right && right === bottom && bottom === left) return { margin: top };
+	if (top === bottom && left === right) return { margin: `${top} ${left}` };
+	return { margin: `${top} ${right} ${bottom} ${left}` };
+}
 function marginStyle({ margin, marginBlock, marginInline, marginTop, marginRight, marginBottom, marginLeft }) {
 	if (margin == null && marginBlock == null && marginInline == null && marginTop == null && marginRight == null && marginBottom == null && marginLeft == null) return {};
-	let [top, right, bottom, left] = [
-		"0",
-		"0",
-		"0",
-		"0"
-	];
+	const dirs = {
+		top: "0",
+		right: "0",
+		bottom: "0",
+		left: "0"
+	};
 	if (margin != null) {
-		const { values, directions } = parseDirectionalMargin(margin);
-		if (values.length) if (directions.length === 0) {
-			top = values[0];
-			right = values[1] || values[0];
-			bottom = values[2] || values[0];
-			left = values[3] || values[1] || values[0];
-		} else directions.forEach((dir, i) => {
-			const val = values[i] ?? values[0];
-			if (dir === "top") top = val;
-			else if (dir === "right") right = val;
-			else if (dir === "bottom") bottom = val;
-			else if (dir === "left") left = val;
-		});
+		if (typeof margin === "number") dirs.top = dirs.right = dirs.bottom = dirs.left = `${margin}px`;
+		else if (margin === true) margin = "1x";
+		if (typeof margin === "string" && margin) {
+			const groups = parseStyle(margin).groups ?? [];
+			for (const group of groups) {
+				const { values, directions } = extractGroupData(group);
+				applyGroup(dirs, values, directions);
+			}
+		}
 	}
 	if (marginBlock != null) {
 		const val = parseMarginValue(marginBlock);
-		if (val) top = bottom = val;
+		if (val) dirs.top = dirs.bottom = val;
 	}
 	if (marginInline != null) {
 		const val = parseMarginValue(marginInline);
-		if (val) left = right = val;
+		if (val) dirs.left = dirs.right = val;
 	}
 	if (marginTop != null) {
 		const val = parseMarginValue(marginTop);
-		if (val) top = val;
+		if (val) dirs.top = val;
 	}
 	if (marginRight != null) {
 		const val = parseMarginValue(marginRight);
-		if (val) right = val;
+		if (val) dirs.right = val;
 	}
 	if (marginBottom != null) {
 		const val = parseMarginValue(marginBottom);
-		if (val) bottom = val;
+		if (val) dirs.bottom = val;
 	}
 	if (marginLeft != null) {
 		const val = parseMarginValue(marginLeft);
-		if (val) left = val;
+		if (val) dirs.left = val;
 	}
-	if (top === right && right === bottom && bottom === left) return { margin: top };
-	if (top === bottom && left === right) return { margin: `${top} ${left}` };
-	return { margin: `${top} ${right} ${bottom} ${left}` };
+	return optimizeMargin(dirs);
 }
 marginStyle.__lookupStyles = [
 	"margin",

package/dist/styles/margin.js.map

@@ -1 +1 @@
-{"version":3,"file":"margin.js","names":[],"sources":["../../src/styles/margin.ts"],"sourcesContent":["import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\n\n/**\n * Parse a margin value and return the first processed value\n */\nfunction parseMarginValue(value: string | number | boolean): string | null {\n  if (typeof value === 'number') return `${value}px`;\n  if (!value) return null;\n  if (value === true) value = '1x';\n\n  const { values } = parseStyle(value).groups[0] ?? { values: [] };\n\n  return values[0] || 'var(--gap)';\n}\n\n/**\n * Parse margin value with optional directions (like \"1x top\" or \"2x left right\")\n */\nfunction parseDirectionalMargin(value: string | number | boolean): {\n  values: string[];\n  directions: string[];\n} {\n  if (typeof value === 'number') {\n    return { values: [`${value}px`], directions: [] };\n  }\n  if (!value) return { values: [], directions: [] };\n  if (value === true) value = '1x';\n\n  const { values = [], mods = [] } = parseStyle(value).groups[0] ?? {};\n\n  return {\n    values: values.length ? values : ['var(--gap)'],\n    directions: filterMods(mods, DIRECTIONS),\n  };\n}\n\nexport function marginStyle({\n  margin,\n  marginBlock,\n  marginInline,\n  marginTop,\n  marginRight,\n  marginBottom,\n  marginLeft,\n}: {\n  margin?: string | number | boolean;\n  marginBlock?: string | number | boolean;\n  marginInline?: string | number | boolean;\n  marginTop?: string | number | boolean;\n  marginRight?: string | number | boolean;\n  marginBottom?: string | number | boolean;\n  marginLeft?: string | number | boolean;\n}) {\n  // If no margin is defined, return empty object\n  if (\n    margin == null &&\n    marginBlock == null &&\n    marginInline == null &&\n    marginTop == null &&\n    marginRight == null &&\n    marginBottom == null &&\n    marginLeft == null\n  ) {\n    return {};\n  }\n\n  // Initialize all directions to 0\n  let [top, right, bottom, left] = ['0', '0', '0', '0'];\n\n  // Priority 1 (lowest): margin\n  if (margin != null) {\n    const { values, directions } = parseDirectionalMargin(margin);\n\n    if (values.length) {\n      if (directions.length === 0) {\n        top = values[0];\n        right = values[1] || values[0];\n        bottom = values[2] || values[0];\n        left = values[3] || values[1] || values[0];\n      } else {\n        // Assign values to directions in the order they appear\n        // e.g., 'right 1x top 2x' → right: 1x, top: 2x\n        directions.forEach((dir, i) => {\n          const val = values[i] ?? values[0];\n          if (dir === 'top') top = val;\n          else if (dir === 'right') right = val;\n          else if (dir === 'bottom') bottom = val;\n          else if (dir === 'left') left = val;\n        });\n      }\n    }\n  }\n\n  // Priority 2 (medium): marginBlock/marginInline\n  if (marginBlock != null) {\n    const val = parseMarginValue(marginBlock);\n    if (val) top = bottom = val;\n  }\n  if (marginInline != null) {\n    const val = parseMarginValue(marginInline);\n    if (val) left = right = val;\n  }\n\n  // Priority 3 (highest): individual directions\n  if (marginTop != null) {\n    const val = parseMarginValue(marginTop);\n    if (val) top = val;\n  }\n  if (marginRight != null) {\n    const val = parseMarginValue(marginRight);\n    if (val) right = val;\n  }\n  if (marginBottom != null) {\n    const val = parseMarginValue(marginBottom);\n    if (val) bottom = val;\n  }\n  if (marginLeft != null) {\n    const val = parseMarginValue(marginLeft);\n    if (val) left = val;\n  }\n\n  // Optimize output: 1 value if all same, 2 values if top==bottom && left==right\n  if (top === right && right === bottom && bottom === left) {\n    return { margin: top };\n  }\n  if (top === bottom && left === right) {\n    return { margin: `${top} ${left}` };\n  }\n\n  return { margin: `${top} ${right} ${bottom} ${left}` };\n}\n\nmarginStyle.__lookupStyles = [\n  'margin',\n  'marginTop',\n  'marginRight',\n  'marginBottom',\n  'marginLeft',\n  'marginBlock',\n  'marginInline',\n];\n"],"mappings":";;;;;;AAKA,SAAS,iBAAiB,OAAiD;AACzE,KAAI,OAAO,UAAU,SAAU,QAAO,GAAG,MAAM;AAC/C,KAAI,CAAC,MAAO,QAAO;AACnB,KAAI,UAAU,KAAM,SAAQ;CAE5B,MAAM,EAAE,WAAW,WAAW,MAAM,CAAC,OAAO,MAAM,EAAE,QAAQ,EAAE,EAAE;AAEhE,QAAO,OAAO,MAAM;;;;;AAMtB,SAAS,uBAAuB,OAG9B;AACA,KAAI,OAAO,UAAU,SACnB,QAAO;EAAE,QAAQ,CAAC,GAAG,MAAM,IAAI;EAAE,YAAY,EAAE;EAAE;AAEnD,KAAI,CAAC,MAAO,QAAO;EAAE,QAAQ,EAAE;EAAE,YAAY,EAAE;EAAE;AACjD,KAAI,UAAU,KAAM,SAAQ;CAE5B,MAAM,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,WAAW,MAAM,CAAC,OAAO,MAAM,EAAE;AAEpE,QAAO;EACL,QAAQ,OAAO,SAAS,SAAS,CAAC,aAAa;EAC/C,YAAY,WAAW,MAAM,WAAW;EACzC;;AAGH,SAAgB,YAAY,EAC1B,QACA,aACA,cACA,WACA,aACA,cACA,cASC;AAED,KACE,UAAU,QACV,eAAe,QACf,gBAAgB,QAChB,aAAa,QACb,eAAe,QACf,gBAAgB,QAChB,cAAc,KAEd,QAAO,EAAE;CAIX,IAAI,CAAC,KAAK,OAAO,QAAQ,QAAQ;EAAC;EAAK;EAAK;EAAK;EAAI;AAGrD,KAAI,UAAU,MAAM;EAClB,MAAM,EAAE,QAAQ,eAAe,uBAAuB,OAAO;AAE7D,MAAI,OAAO,OACT,KAAI,WAAW,WAAW,GAAG;AAC3B,SAAM,OAAO;AACb,WAAQ,OAAO,MAAM,OAAO;AAC5B,YAAS,OAAO,MAAM,OAAO;AAC7B,UAAO,OAAO,MAAM,OAAO,MAAM,OAAO;QAIxC,YAAW,SAAS,KAAK,MAAM;GAC7B,MAAM,MAAM,OAAO,MAAM,OAAO;AAChC,OAAI,QAAQ,MAAO,OAAM;YAChB,QAAQ,QAAS,SAAQ;YACzB,QAAQ,SAAU,UAAS;YAC3B,QAAQ,OAAQ,QAAO;IAChC;;AAMR,KAAI,eAAe,MAAM;EACvB,MAAM,MAAM,iBAAiB,YAAY;AACzC,MAAI,IAAK,OAAM,SAAS;;AAE1B,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,iBAAiB,aAAa;AAC1C,MAAI,IAAK,QAAO,QAAQ;;AAI1B,KAAI,aAAa,MAAM;EACrB,MAAM,MAAM,iBAAiB,UAAU;AACvC,MAAI,IAAK,OAAM;;AAEjB,KAAI,eAAe,MAAM;EACvB,MAAM,MAAM,iBAAiB,YAAY;AACzC,MAAI,IAAK,SAAQ;;AAEnB,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,iBAAiB,aAAa;AAC1C,MAAI,IAAK,UAAS;;AAEpB,KAAI,cAAc,MAAM;EACtB,MAAM,MAAM,iBAAiB,WAAW;AACxC,MAAI,IAAK,QAAO;;AAIlB,KAAI,QAAQ,SAAS,UAAU,UAAU,WAAW,KAClD,QAAO,EAAE,QAAQ,KAAK;AAExB,KAAI,QAAQ,UAAU,SAAS,MAC7B,QAAO,EAAE,QAAQ,GAAG,IAAI,GAAG,QAAQ;AAGrC,QAAO,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ;;AAGxD,YAAY,iBAAiB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}
+{"version":3,"file":"margin.js","names":[],"sources":["../../src/styles/margin.ts"],"sourcesContent":["import type { StyleDetails } from '../parser/types';\nimport { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\n\ntype Direction = (typeof DIRECTIONS)[number];\n\n/**\n * Parse a margin value and return the first processed value\n */\nfunction parseMarginValue(value: string | number | boolean): string | null {\n  if (typeof value === 'number') return `${value}px`;\n  if (!value) return null;\n  if (value === true) value = '1x';\n\n  const { values } = parseStyle(value).groups[0] ?? { values: [] };\n\n  return values[0] || 'var(--gap)';\n}\n\n/**\n * Extract values and directions from a single parsed group.\n */\nfunction extractGroupData(group: StyleDetails): {\n  values: string[];\n  directions: Direction[];\n} {\n  const { values = [], mods = [] } = group;\n  return {\n    values: values.length ? values : ['var(--gap)'],\n    directions: filterMods(mods, DIRECTIONS) as Direction[],\n  };\n}\n\n/**\n * Apply a single group's values and directions onto a direction map.\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\n/**\n * Optimize margin output shorthand.\n */\nfunction optimizeMargin(dirs: Record<Direction, string>): {\n  margin: string;\n} {\n  const { top, right, bottom, left } = dirs;\n  if (top === right && right === bottom && bottom === left) {\n    return { margin: top };\n  }\n  if (top === bottom && left === right) {\n    return { margin: `${top} ${left}` };\n  }\n  return { margin: `${top} ${right} ${bottom} ${left}` };\n}\n\nexport function marginStyle({\n  margin,\n  marginBlock,\n  marginInline,\n  marginTop,\n  marginRight,\n  marginBottom,\n  marginLeft,\n}: {\n  margin?: string | number | boolean;\n  marginBlock?: string | number | boolean;\n  marginInline?: string | number | boolean;\n  marginTop?: string | number | boolean;\n  marginRight?: string | number | boolean;\n  marginBottom?: string | number | boolean;\n  marginLeft?: string | number | boolean;\n}) {\n  if (\n    margin == null &&\n    marginBlock == null &&\n    marginInline == null &&\n    marginTop == null &&\n    marginRight == null &&\n    marginBottom == null &&\n    marginLeft == null\n  ) {\n    return {};\n  }\n\n  const dirs: Record<Direction, string> = {\n    top: '0',\n    right: '0',\n    bottom: '0',\n    left: '0',\n  };\n\n  // Priority 1 (lowest): margin\n  if (margin != null) {\n    if (typeof margin === 'number') {\n      const v = `${margin}px`;\n      dirs.top = dirs.right = dirs.bottom = dirs.left = v;\n    } else if (margin === true) {\n      margin = '1x';\n    }\n\n    if (typeof margin === 'string' && margin) {\n      const processed = parseStyle(margin);\n      const groups = processed.groups ?? [];\n\n      for (const group of groups) {\n        const { values, directions } = extractGroupData(group);\n        applyGroup(dirs, values, directions);\n      }\n    }\n  }\n\n  // Priority 2 (medium): marginBlock/marginInline\n  if (marginBlock != null) {\n    const val = parseMarginValue(marginBlock);\n    if (val) dirs.top = dirs.bottom = val;\n  }\n  if (marginInline != null) {\n    const val = parseMarginValue(marginInline);\n    if (val) dirs.left = dirs.right = val;\n  }\n\n  // Priority 3 (highest): individual directions\n  if (marginTop != null) {\n    const val = parseMarginValue(marginTop);\n    if (val) dirs.top = val;\n  }\n  if (marginRight != null) {\n    const val = parseMarginValue(marginRight);\n    if (val) dirs.right = val;\n  }\n  if (marginBottom != null) {\n    const val = parseMarginValue(marginBottom);\n    if (val) dirs.bottom = val;\n  }\n  if (marginLeft != null) {\n    const val = parseMarginValue(marginLeft);\n    if (val) dirs.left = val;\n  }\n\n  return optimizeMargin(dirs);\n}\n\nmarginStyle.__lookupStyles = [\n  'margin',\n  'marginTop',\n  'marginRight',\n  'marginBottom',\n  'marginLeft',\n  'marginBlock',\n  'marginInline',\n];\n"],"mappings":";;;;;;AAQA,SAAS,iBAAiB,OAAiD;AACzE,KAAI,OAAO,UAAU,SAAU,QAAO,GAAG,MAAM;AAC/C,KAAI,CAAC,MAAO,QAAO;AACnB,KAAI,UAAU,KAAM,SAAQ;CAE5B,MAAM,EAAE,WAAW,WAAW,MAAM,CAAC,OAAO,MAAM,EAAE,QAAQ,EAAE,EAAE;AAEhE,QAAO,OAAO,MAAM;;;;;AAMtB,SAAS,iBAAiB,OAGxB;CACA,MAAM,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK;AACnC,QAAO;EACL,QAAQ,OAAO,SAAS,SAAS,CAAC,aAAa;EAC/C,YAAY,WAAW,MAAM,WAAW;EACzC;;;;;AAMH,SAAS,WACP,MACA,QACA,YACM;AACN,KAAI,CAAC,OAAO,OAAQ;AAEpB,KAAI,WAAW,WAAW,GAAG;AAC3B,OAAK,MAAM,OAAO;AAClB,OAAK,QAAQ,OAAO,MAAM,OAAO;AACjC,OAAK,SAAS,OAAO,MAAM,OAAO;AAClC,OAAK,OAAO,OAAO,MAAM,OAAO,MAAM,OAAO;OAE7C,YAAW,SAAS,KAAK,MAAM;AAC7B,OAAK,OAAO,OAAO,MAAM,OAAO;GAChC;;;;;AAON,SAAS,eAAe,MAEtB;CACA,MAAM,EAAE,KAAK,OAAO,QAAQ,SAAS;AACrC,KAAI,QAAQ,SAAS,UAAU,UAAU,WAAW,KAClD,QAAO,EAAE,QAAQ,KAAK;AAExB,KAAI,QAAQ,UAAU,SAAS,MAC7B,QAAO,EAAE,QAAQ,GAAG,IAAI,GAAG,QAAQ;AAErC,QAAO,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ;;AAGxD,SAAgB,YAAY,EAC1B,QACA,aACA,cACA,WACA,aACA,cACA,cASC;AACD,KACE,UAAU,QACV,eAAe,QACf,gBAAgB,QAChB,aAAa,QACb,eAAe,QACf,gBAAgB,QAChB,cAAc,KAEd,QAAO,EAAE;CAGX,MAAM,OAAkC;EACtC,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACP;AAGD,KAAI,UAAU,MAAM;AAClB,MAAI,OAAO,WAAW,SAEpB,MAAK,MAAM,KAAK,QAAQ,KAAK,SAAS,KAAK,OADjC,GAAG,OAAO;WAEX,WAAW,KACpB,UAAS;AAGX,MAAI,OAAO,WAAW,YAAY,QAAQ;GAExC,MAAM,SADY,WAAW,OAAO,CACX,UAAU,EAAE;AAErC,QAAK,MAAM,SAAS,QAAQ;IAC1B,MAAM,EAAE,QAAQ,eAAe,iBAAiB,MAAM;AACtD,eAAW,MAAM,QAAQ,WAAW;;;;AAM1C,KAAI,eAAe,MAAM;EACvB,MAAM,MAAM,iBAAiB,YAAY;AACzC,MAAI,IAAK,MAAK,MAAM,KAAK,SAAS;;AAEpC,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,iBAAiB,aAAa;AAC1C,MAAI,IAAK,MAAK,OAAO,KAAK,QAAQ;;AAIpC,KAAI,aAAa,MAAM;EACrB,MAAM,MAAM,iBAAiB,UAAU;AACvC,MAAI,IAAK,MAAK,MAAM;;AAEtB,KAAI,eAAe,MAAM;EACvB,MAAM,MAAM,iBAAiB,YAAY;AACzC,MAAI,IAAK,MAAK,QAAQ;;AAExB,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,iBAAiB,aAAa;AAC1C,MAAI,IAAK,MAAK,SAAS;;AAEzB,KAAI,cAAc,MAAM;EACtB,MAAM,MAAM,iBAAiB,WAAW;AACxC,MAAI,IAAK,MAAK,OAAO;;AAGvB,QAAO,eAAe,KAAK;;AAG7B,YAAY,iBAAiB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}

package/dist/styles/padding.d.ts

@@ -15,11 +15,7 @@ declare function paddingStyle({
   paddingRight?: string | number | boolean;
   paddingBottom?: string | number | boolean;
   paddingLeft?: string | number | boolean;
-}): {
-  padding?: undefined;
-} | {
-  padding: string;
-};
+}): {};
 declare namespace paddingStyle {
   var __lookupStyles: string[];
 }

package/dist/styles/padding.js

@@ -12,74 +12,82 @@ function parsePaddingValue(value) {
 	return values[0] || "var(--gap)";
 }
 /**
-* Parse padding value with optional directions (like "1x top" or "2x left right")
+* Extract values and directions from a single parsed group.
 */
-function parseDirectionalPadding(value) {
-	if (typeof value === "number") return {
-		values: [`${value}px`],
-		directions: []
-	};
-	if (!value) return {
-		values: [],
-		directions: []
-	};
-	if (value === true) value = "1x";
-	const { values = [], mods = [] } = parseStyle(value).groups[0] ?? {};
+function extractGroupData(group) {
+	const { values = [], mods = [] } = group;
 	return {
 		values: values.length ? values : ["var(--gap)"],
 		directions: filterMods(mods, DIRECTIONS)
 	};
 }
+/**
+* Apply a single group's values and directions onto a direction map.
+*/
+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];
+	});
+}
+/**
+* Optimize padding output shorthand.
+*/
+function optimizePadding(dirs) {
+	const { top, right, bottom, left } = dirs;
+	if (top === right && right === bottom && bottom === left) return { padding: top };
+	if (top === bottom && left === right) return { padding: `${top} ${left}` };
+	return { padding: `${top} ${right} ${bottom} ${left}` };
+}
 function paddingStyle({ padding, paddingBlock, paddingInline, paddingTop, paddingRight, paddingBottom, paddingLeft }) {
 	if (padding == null && paddingBlock == null && paddingInline == null && paddingTop == null && paddingRight == null && paddingBottom == null && paddingLeft == null) return {};
-	let [top, right, bottom, left] = [
-		"0",
-		"0",
-		"0",
-		"0"
-	];
+	const dirs = {
+		top: "0",
+		right: "0",
+		bottom: "0",
+		left: "0"
+	};
 	if (padding != null) {
-		const { values, directions } = parseDirectionalPadding(padding);
-		if (values.length) if (directions.length === 0) {
-			top = values[0];
-			right = values[1] || values[0];
-			bottom = values[2] || values[0];
-			left = values[3] || values[1] || values[0];
-		} else directions.forEach((dir, i) => {
-			const val = values[i] ?? values[0];
-			if (dir === "top") top = val;
-			else if (dir === "right") right = val;
-			else if (dir === "bottom") bottom = val;
-			else if (dir === "left") left = val;
-		});
+		if (typeof padding === "number") dirs.top = dirs.right = dirs.bottom = dirs.left = `${padding}px`;
+		else if (padding === true) padding = "1x";
+		if (typeof padding === "string" && padding) {
+			const groups = parseStyle(padding).groups ?? [];
+			for (const group of groups) {
+				const { values, directions } = extractGroupData(group);
+				applyGroup(dirs, values, directions);
+			}
+		}
 	}
 	if (paddingBlock != null) {
 		const val = parsePaddingValue(paddingBlock);
-		if (val) top = bottom = val;
+		if (val) dirs.top = dirs.bottom = val;
 	}
 	if (paddingInline != null) {
 		const val = parsePaddingValue(paddingInline);
-		if (val) left = right = val;
+		if (val) dirs.left = dirs.right = val;
 	}
 	if (paddingTop != null) {
 		const val = parsePaddingValue(paddingTop);
-		if (val) top = val;
+		if (val) dirs.top = val;
 	}
 	if (paddingRight != null) {
 		const val = parsePaddingValue(paddingRight);
-		if (val) right = val;
+		if (val) dirs.right = val;
 	}
 	if (paddingBottom != null) {
 		const val = parsePaddingValue(paddingBottom);
-		if (val) bottom = val;
+		if (val) dirs.bottom = val;
 	}
 	if (paddingLeft != null) {
 		const val = parsePaddingValue(paddingLeft);
-		if (val) left = val;
+		if (val) dirs.left = val;
 	}
-	if (top === right && right === bottom && bottom === left) return { padding: top };
-	if (top === bottom && left === right) return { padding: `${top} ${left}` };
-	return { padding: `${top} ${right} ${bottom} ${left}` };
+	return optimizePadding(dirs);
 }
 paddingStyle.__lookupStyles = [
 	"padding",

package/dist/styles/padding.js.map

@@ -1 +1 @@
-{"version":3,"file":"padding.js","names":[],"sources":["../../src/styles/padding.ts"],"sourcesContent":["import { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\n\n/**\n * Parse a padding value and return the first processed value\n */\nfunction parsePaddingValue(value: string | number | boolean): string | null {\n  if (typeof value === 'number') return `${value}px`;\n  if (!value) return null;\n  if (value === true) value = '1x';\n\n  const { values } = parseStyle(value).groups[0] ?? { values: [] };\n\n  return values[0] || 'var(--gap)';\n}\n\n/**\n * Parse padding value with optional directions (like \"1x top\" or \"2x left right\")\n */\nfunction parseDirectionalPadding(value: string | number | boolean): {\n  values: string[];\n  directions: string[];\n} {\n  if (typeof value === 'number') {\n    return { values: [`${value}px`], directions: [] };\n  }\n  if (!value) return { values: [], directions: [] };\n  if (value === true) value = '1x';\n\n  const { values = [], mods = [] } = parseStyle(value).groups[0] ?? {};\n\n  return {\n    values: values.length ? values : ['var(--gap)'],\n    directions: filterMods(mods, DIRECTIONS),\n  };\n}\n\nexport function paddingStyle({\n  padding,\n  paddingBlock,\n  paddingInline,\n  paddingTop,\n  paddingRight,\n  paddingBottom,\n  paddingLeft,\n}: {\n  padding?: string | number | boolean;\n  paddingBlock?: string | number | boolean;\n  paddingInline?: string | number | boolean;\n  paddingTop?: string | number | boolean;\n  paddingRight?: string | number | boolean;\n  paddingBottom?: string | number | boolean;\n  paddingLeft?: string | number | boolean;\n}) {\n  // If no padding is defined, return empty object\n  if (\n    padding == null &&\n    paddingBlock == null &&\n    paddingInline == null &&\n    paddingTop == null &&\n    paddingRight == null &&\n    paddingBottom == null &&\n    paddingLeft == null\n  ) {\n    return {};\n  }\n\n  // Initialize all directions to 0\n  let [top, right, bottom, left] = ['0', '0', '0', '0'];\n\n  // Priority 1 (lowest): padding\n  if (padding != null) {\n    const { values, directions } = parseDirectionalPadding(padding);\n\n    if (values.length) {\n      if (directions.length === 0) {\n        top = values[0];\n        right = values[1] || values[0];\n        bottom = values[2] || values[0];\n        left = values[3] || values[1] || values[0];\n      } else {\n        // Assign values to directions in the order they appear\n        // e.g., 'right 1x top 2x' → right: 1x, top: 2x\n        directions.forEach((dir, i) => {\n          const val = values[i] ?? values[0];\n          if (dir === 'top') top = val;\n          else if (dir === 'right') right = val;\n          else if (dir === 'bottom') bottom = val;\n          else if (dir === 'left') left = val;\n        });\n      }\n    }\n  }\n\n  // Priority 2 (medium): paddingBlock/paddingInline\n  if (paddingBlock != null) {\n    const val = parsePaddingValue(paddingBlock);\n    if (val) top = bottom = val;\n  }\n  if (paddingInline != null) {\n    const val = parsePaddingValue(paddingInline);\n    if (val) left = right = val;\n  }\n\n  // Priority 3 (highest): individual directions\n  if (paddingTop != null) {\n    const val = parsePaddingValue(paddingTop);\n    if (val) top = val;\n  }\n  if (paddingRight != null) {\n    const val = parsePaddingValue(paddingRight);\n    if (val) right = val;\n  }\n  if (paddingBottom != null) {\n    const val = parsePaddingValue(paddingBottom);\n    if (val) bottom = val;\n  }\n  if (paddingLeft != null) {\n    const val = parsePaddingValue(paddingLeft);\n    if (val) left = val;\n  }\n\n  // Optimize output: 1 value if all same, 2 values if top==bottom && left==right\n  if (top === right && right === bottom && bottom === left) {\n    return { padding: top };\n  }\n  if (top === bottom && left === right) {\n    return { padding: `${top} ${left}` };\n  }\n\n  return { padding: `${top} ${right} ${bottom} ${left}` };\n}\n\npaddingStyle.__lookupStyles = [\n  'padding',\n  'paddingTop',\n  'paddingRight',\n  'paddingBottom',\n  'paddingLeft',\n  'paddingBlock',\n  'paddingInline',\n];\n"],"mappings":";;;;;;AAKA,SAAS,kBAAkB,OAAiD;AAC1E,KAAI,OAAO,UAAU,SAAU,QAAO,GAAG,MAAM;AAC/C,KAAI,CAAC,MAAO,QAAO;AACnB,KAAI,UAAU,KAAM,SAAQ;CAE5B,MAAM,EAAE,WAAW,WAAW,MAAM,CAAC,OAAO,MAAM,EAAE,QAAQ,EAAE,EAAE;AAEhE,QAAO,OAAO,MAAM;;;;;AAMtB,SAAS,wBAAwB,OAG/B;AACA,KAAI,OAAO,UAAU,SACnB,QAAO;EAAE,QAAQ,CAAC,GAAG,MAAM,IAAI;EAAE,YAAY,EAAE;EAAE;AAEnD,KAAI,CAAC,MAAO,QAAO;EAAE,QAAQ,EAAE;EAAE,YAAY,EAAE;EAAE;AACjD,KAAI,UAAU,KAAM,SAAQ;CAE5B,MAAM,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,WAAW,MAAM,CAAC,OAAO,MAAM,EAAE;AAEpE,QAAO;EACL,QAAQ,OAAO,SAAS,SAAS,CAAC,aAAa;EAC/C,YAAY,WAAW,MAAM,WAAW;EACzC;;AAGH,SAAgB,aAAa,EAC3B,SACA,cACA,eACA,YACA,cACA,eACA,eASC;AAED,KACE,WAAW,QACX,gBAAgB,QAChB,iBAAiB,QACjB,cAAc,QACd,gBAAgB,QAChB,iBAAiB,QACjB,eAAe,KAEf,QAAO,EAAE;CAIX,IAAI,CAAC,KAAK,OAAO,QAAQ,QAAQ;EAAC;EAAK;EAAK;EAAK;EAAI;AAGrD,KAAI,WAAW,MAAM;EACnB,MAAM,EAAE,QAAQ,eAAe,wBAAwB,QAAQ;AAE/D,MAAI,OAAO,OACT,KAAI,WAAW,WAAW,GAAG;AAC3B,SAAM,OAAO;AACb,WAAQ,OAAO,MAAM,OAAO;AAC5B,YAAS,OAAO,MAAM,OAAO;AAC7B,UAAO,OAAO,MAAM,OAAO,MAAM,OAAO;QAIxC,YAAW,SAAS,KAAK,MAAM;GAC7B,MAAM,MAAM,OAAO,MAAM,OAAO;AAChC,OAAI,QAAQ,MAAO,OAAM;YAChB,QAAQ,QAAS,SAAQ;YACzB,QAAQ,SAAU,UAAS;YAC3B,QAAQ,OAAQ,QAAO;IAChC;;AAMR,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,kBAAkB,aAAa;AAC3C,MAAI,IAAK,OAAM,SAAS;;AAE1B,KAAI,iBAAiB,MAAM;EACzB,MAAM,MAAM,kBAAkB,cAAc;AAC5C,MAAI,IAAK,QAAO,QAAQ;;AAI1B,KAAI,cAAc,MAAM;EACtB,MAAM,MAAM,kBAAkB,WAAW;AACzC,MAAI,IAAK,OAAM;;AAEjB,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,kBAAkB,aAAa;AAC3C,MAAI,IAAK,SAAQ;;AAEnB,KAAI,iBAAiB,MAAM;EACzB,MAAM,MAAM,kBAAkB,cAAc;AAC5C,MAAI,IAAK,UAAS;;AAEpB,KAAI,eAAe,MAAM;EACvB,MAAM,MAAM,kBAAkB,YAAY;AAC1C,MAAI,IAAK,QAAO;;AAIlB,KAAI,QAAQ,SAAS,UAAU,UAAU,WAAW,KAClD,QAAO,EAAE,SAAS,KAAK;AAEzB,KAAI,QAAQ,UAAU,SAAS,MAC7B,QAAO,EAAE,SAAS,GAAG,IAAI,GAAG,QAAQ;AAGtC,QAAO,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ;;AAGzD,aAAa,iBAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}
+{"version":3,"file":"padding.js","names":[],"sources":["../../src/styles/padding.ts"],"sourcesContent":["import type { StyleDetails } from '../parser/types';\nimport { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\n\ntype Direction = (typeof DIRECTIONS)[number];\n\n/**\n * Parse a padding value and return the first processed value\n */\nfunction parsePaddingValue(value: string | number | boolean): string | null {\n  if (typeof value === 'number') return `${value}px`;\n  if (!value) return null;\n  if (value === true) value = '1x';\n\n  const { values } = parseStyle(value).groups[0] ?? { values: [] };\n\n  return values[0] || 'var(--gap)';\n}\n\n/**\n * Extract values and directions from a single parsed group.\n */\nfunction extractGroupData(group: StyleDetails): {\n  values: string[];\n  directions: Direction[];\n} {\n  const { values = [], mods = [] } = group;\n  return {\n    values: values.length ? values : ['var(--gap)'],\n    directions: filterMods(mods, DIRECTIONS) as Direction[],\n  };\n}\n\n/**\n * Apply a single group's values and directions onto a direction map.\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\n/**\n * Optimize padding output shorthand.\n */\nfunction optimizePadding(dirs: Record<Direction, string>): {\n  padding: string;\n} {\n  const { top, right, bottom, left } = dirs;\n  if (top === right && right === bottom && bottom === left) {\n    return { padding: top };\n  }\n  if (top === bottom && left === right) {\n    return { padding: `${top} ${left}` };\n  }\n  return { padding: `${top} ${right} ${bottom} ${left}` };\n}\n\nexport function paddingStyle({\n  padding,\n  paddingBlock,\n  paddingInline,\n  paddingTop,\n  paddingRight,\n  paddingBottom,\n  paddingLeft,\n}: {\n  padding?: string | number | boolean;\n  paddingBlock?: string | number | boolean;\n  paddingInline?: string | number | boolean;\n  paddingTop?: string | number | boolean;\n  paddingRight?: string | number | boolean;\n  paddingBottom?: string | number | boolean;\n  paddingLeft?: string | number | boolean;\n}) {\n  if (\n    padding == null &&\n    paddingBlock == null &&\n    paddingInline == null &&\n    paddingTop == null &&\n    paddingRight == null &&\n    paddingBottom == null &&\n    paddingLeft == null\n  ) {\n    return {};\n  }\n\n  const dirs: Record<Direction, string> = {\n    top: '0',\n    right: '0',\n    bottom: '0',\n    left: '0',\n  };\n\n  // Priority 1 (lowest): padding\n  if (padding != null) {\n    if (typeof padding === 'number') {\n      const v = `${padding}px`;\n      dirs.top = dirs.right = dirs.bottom = dirs.left = v;\n    } else if (padding === true) {\n      padding = '1x';\n    }\n\n    if (typeof padding === 'string' && padding) {\n      const processed = parseStyle(padding);\n      const groups = processed.groups ?? [];\n\n      for (const group of groups) {\n        const { values, directions } = extractGroupData(group);\n        applyGroup(dirs, values, directions);\n      }\n    }\n  }\n\n  // Priority 2 (medium): paddingBlock/paddingInline\n  if (paddingBlock != null) {\n    const val = parsePaddingValue(paddingBlock);\n    if (val) dirs.top = dirs.bottom = val;\n  }\n  if (paddingInline != null) {\n    const val = parsePaddingValue(paddingInline);\n    if (val) dirs.left = dirs.right = val;\n  }\n\n  // Priority 3 (highest): individual directions\n  if (paddingTop != null) {\n    const val = parsePaddingValue(paddingTop);\n    if (val) dirs.top = val;\n  }\n  if (paddingRight != null) {\n    const val = parsePaddingValue(paddingRight);\n    if (val) dirs.right = val;\n  }\n  if (paddingBottom != null) {\n    const val = parsePaddingValue(paddingBottom);\n    if (val) dirs.bottom = val;\n  }\n  if (paddingLeft != null) {\n    const val = parsePaddingValue(paddingLeft);\n    if (val) dirs.left = val;\n  }\n\n  return optimizePadding(dirs);\n}\n\npaddingStyle.__lookupStyles = [\n  'padding',\n  'paddingTop',\n  'paddingRight',\n  'paddingBottom',\n  'paddingLeft',\n  'paddingBlock',\n  'paddingInline',\n];\n"],"mappings":";;;;;;AAQA,SAAS,kBAAkB,OAAiD;AAC1E,KAAI,OAAO,UAAU,SAAU,QAAO,GAAG,MAAM;AAC/C,KAAI,CAAC,MAAO,QAAO;AACnB,KAAI,UAAU,KAAM,SAAQ;CAE5B,MAAM,EAAE,WAAW,WAAW,MAAM,CAAC,OAAO,MAAM,EAAE,QAAQ,EAAE,EAAE;AAEhE,QAAO,OAAO,MAAM;;;;;AAMtB,SAAS,iBAAiB,OAGxB;CACA,MAAM,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK;AACnC,QAAO;EACL,QAAQ,OAAO,SAAS,SAAS,CAAC,aAAa;EAC/C,YAAY,WAAW,MAAM,WAAW;EACzC;;;;;AAMH,SAAS,WACP,MACA,QACA,YACM;AACN,KAAI,CAAC,OAAO,OAAQ;AAEpB,KAAI,WAAW,WAAW,GAAG;AAC3B,OAAK,MAAM,OAAO;AAClB,OAAK,QAAQ,OAAO,MAAM,OAAO;AACjC,OAAK,SAAS,OAAO,MAAM,OAAO;AAClC,OAAK,OAAO,OAAO,MAAM,OAAO,MAAM,OAAO;OAE7C,YAAW,SAAS,KAAK,MAAM;AAC7B,OAAK,OAAO,OAAO,MAAM,OAAO;GAChC;;;;;AAON,SAAS,gBAAgB,MAEvB;CACA,MAAM,EAAE,KAAK,OAAO,QAAQ,SAAS;AACrC,KAAI,QAAQ,SAAS,UAAU,UAAU,WAAW,KAClD,QAAO,EAAE,SAAS,KAAK;AAEzB,KAAI,QAAQ,UAAU,SAAS,MAC7B,QAAO,EAAE,SAAS,GAAG,IAAI,GAAG,QAAQ;AAEtC,QAAO,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ;;AAGzD,SAAgB,aAAa,EAC3B,SACA,cACA,eACA,YACA,cACA,eACA,eASC;AACD,KACE,WAAW,QACX,gBAAgB,QAChB,iBAAiB,QACjB,cAAc,QACd,gBAAgB,QAChB,iBAAiB,QACjB,eAAe,KAEf,QAAO,EAAE;CAGX,MAAM,OAAkC;EACtC,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACP;AAGD,KAAI,WAAW,MAAM;AACnB,MAAI,OAAO,YAAY,SAErB,MAAK,MAAM,KAAK,QAAQ,KAAK,SAAS,KAAK,OADjC,GAAG,QAAQ;WAEZ,YAAY,KACrB,WAAU;AAGZ,MAAI,OAAO,YAAY,YAAY,SAAS;GAE1C,MAAM,SADY,WAAW,QAAQ,CACZ,UAAU,EAAE;AAErC,QAAK,MAAM,SAAS,QAAQ;IAC1B,MAAM,EAAE,QAAQ,eAAe,iBAAiB,MAAM;AACtD,eAAW,MAAM,QAAQ,WAAW;;;;AAM1C,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,kBAAkB,aAAa;AAC3C,MAAI,IAAK,MAAK,MAAM,KAAK,SAAS;;AAEpC,KAAI,iBAAiB,MAAM;EACzB,MAAM,MAAM,kBAAkB,cAAc;AAC5C,MAAI,IAAK,MAAK,OAAO,KAAK,QAAQ;;AAIpC,KAAI,cAAc,MAAM;EACtB,MAAM,MAAM,kBAAkB,WAAW;AACzC,MAAI,IAAK,MAAK,MAAM;;AAEtB,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,kBAAkB,aAAa;AAC3C,MAAI,IAAK,MAAK,QAAQ;;AAExB,KAAI,iBAAiB,MAAM;EACzB,MAAM,MAAM,kBAAkB,cAAc;AAC5C,MAAI,IAAK,MAAK,SAAS;;AAEzB,KAAI,eAAe,MAAM;EACvB,MAAM,MAAM,kBAAkB,YAAY;AAC1C,MAAI,IAAK,MAAK,OAAO;;AAGvB,QAAO,gBAAgB,KAAK;;AAG9B,aAAa,iBAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}

package/dist/styles/transition.js

@@ -86,6 +86,18 @@ const MAP = {
 	]
 };
 const DEFAULT_EASING = "linear";
+const EASING_KEYWORDS = new Set([
+	"ease",
+	"ease-in",
+	"ease-out",
+	"ease-in-out",
+	"linear",
+	"step-start",
+	"step-end"
+]);
+function isEasing(token) {
+	return EASING_KEYWORDS.has(token) || token.startsWith("cubic-bezier(") || token.startsWith("steps(") || token.startsWith("linear(");
+}
 function getTiming(name) {
 	return `var(--${name}-transition, var(--transition))`;
 }
@@ -97,24 +109,32 @@ function transitionStyle({ transition }) {
 		tokens.push(...g.all);
 		if (idx < processed.groups.length - 1) tokens.push(",");
 	});
-	if (!tokens) return;
+	if (tokens.length === 0) return;
 	let tempTransition = [];
 	const transitions = [];
 	tokens.forEach((token) => {
 		if (token === ",") {
-			if (tempTransition) {
+			if (tempTransition.length) {
 				transitions.push(tempTransition);
 				tempTransition = [];
 			}
 		} else tempTransition.push(token);
 	});
-	if (tempTransition) transitions.push(tempTransition);
+	if (tempTransition.length) transitions.push(tempTransition);
 	const map = {};
 	transitions.forEach((transition) => {
 		const name = transition[0];
-		const timing = transition[1];
-		const easing = transition[2];
-		const delay = transition[3];
+		let timing;
+		let easing;
+		let delay;
+		if (transition[1] && isEasing(transition[1])) {
+			easing = transition[1];
+			delay = transition[2];
+		} else {
+			timing = transition[1];
+			easing = transition[2];
+			delay = transition[3];
+		}
 		(MAP[name] || [name]).forEach((style) => {
 			map[style] = [
 				name,

package/dist/styles/transition.js.map

@@ -1 +1 @@
-{"version":3,"file":"transition.js","names":[],"sources":["../../src/styles/transition.ts"],"sourcesContent":["import { parseStyle } from '../utils/styles';\n\nconst SECOND_FILL_COLOR_PROPERTY = '--tasty-second-fill-color';\n\nconst MAP = {\n  fade: ['mask', 'mask-composite'],\n  translate: ['transform', 'translate'],\n  rotate: ['transform', 'rotate'],\n  scale: ['transform', 'scale'],\n  fill: ['background-color', 'background-image', SECOND_FILL_COLOR_PROPERTY],\n  image: [\n    'background-image',\n    'background-position',\n    'background-size',\n    'background-repeat',\n    'background-attachment',\n    'background-origin',\n    'background-clip',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  background: [\n    'background-color',\n    'background-image',\n    'background-position',\n    'background-size',\n    'background-repeat',\n    'background-attachment',\n    'background-origin',\n    'background-clip',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  border: [\n    'border',\n    'border-top',\n    'border-right',\n    'border-bottom',\n    'border-left',\n  ],\n  filter: ['filter', 'backdrop-filter'],\n  radius: ['border-radius'],\n  shadow: ['box-shadow'],\n  outline: ['outline', 'outline-offset'],\n  preset: [\n    'font-size',\n    'line-height',\n    'letter-spacing',\n    'font-weight',\n    'font-style',\n  ],\n  text: ['font-weight', 'text-decoration-color'],\n  color: ['color'],\n  opacity: ['opacity'],\n  theme: [\n    'color',\n    'background-color',\n    'background-image',\n    'box-shadow',\n    'border',\n    'border-radius',\n    'outline',\n    'opacity',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  width: ['max-width', 'min-width', 'width'],\n  height: ['max-height', 'min-height', 'height'],\n  gap: ['gap', 'margin'],\n  zIndex: ['z-index'],\n  inset: ['inset', 'top', 'right', 'bottom', 'left'],\n};\n\nexport const DEFAULT_TIMING = 'var(--transition)';\nconst DEFAULT_EASING = 'linear';\n\nfunction getTiming(name) {\n  return `var(--${name}-transition, var(--transition))`;\n}\n\nexport function transitionStyle({ transition }) {\n  if (!transition) return;\n\n  const processed = parseStyle(transition);\n  const tokens: string[] = [];\n  processed.groups.forEach((g, idx) => {\n    tokens.push(...g.all);\n    if (idx < processed.groups.length - 1) tokens.push(',');\n  });\n\n  if (!tokens) return;\n\n  let tempTransition: string[] = [];\n  const transitions: string[][] = [];\n\n  tokens.forEach((token) => {\n    if (token === ',') {\n      if (tempTransition) {\n        transitions.push(tempTransition);\n        tempTransition = [];\n      }\n    } else {\n      tempTransition.push(token);\n    }\n  });\n\n  if (tempTransition) {\n    transitions.push(tempTransition);\n  }\n\n  const map: {\n    name?: string;\n    easing?: string;\n    timing?: string;\n    delay?: string;\n  } = {};\n\n  transitions.forEach((transition) => {\n    const name = transition[0];\n    const timing = transition[1];\n    const easing = transition[2];\n    const delay = transition[3];\n\n    const styles = MAP[name] || [name];\n\n    styles.forEach((style) => {\n      map[style] = [name, easing, timing, delay];\n    });\n  });\n\n  const result = Object.entries(map)\n    .map(([style, [name, easing, timing, delay]]) => {\n      let value = `${style} ${timing || getTiming(name)}`;\n      if (easing || delay) {\n        value += ` ${easing || DEFAULT_EASING}`;\n      }\n      if (delay) {\n        value += ` ${delay}`;\n      }\n      return value;\n    })\n    .join(', ');\n\n  return { transition: result };\n}\n\ntransitionStyle.__lookupStyles = ['transition'];\n"],"mappings":";;;AAEA,MAAM,6BAA6B;AAEnC,MAAM,MAAM;CACV,MAAM,CAAC,QAAQ,iBAAiB;CAChC,WAAW,CAAC,aAAa,YAAY;CACrC,QAAQ,CAAC,aAAa,SAAS;CAC/B,OAAO,CAAC,aAAa,QAAQ;CAC7B,MAAM;EAAC;EAAoB;EAAoB;EAA2B;CAC1E,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,YAAY;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,QAAQ;EACN;EACA;EACA;EACA;EACA;EACD;CACD,QAAQ,CAAC,UAAU,kBAAkB;CACrC,QAAQ,CAAC,gBAAgB;CACzB,QAAQ,CAAC,aAAa;CACtB,SAAS,CAAC,WAAW,iBAAiB;CACtC,QAAQ;EACN;EACA;EACA;EACA;EACA;EACD;CACD,MAAM,CAAC,eAAe,wBAAwB;CAC9C,OAAO,CAAC,QAAQ;CAChB,SAAS,CAAC,UAAU;CACpB,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,OAAO;EAAC;EAAa;EAAa;EAAQ;CAC1C,QAAQ;EAAC;EAAc;EAAc;EAAS;CAC9C,KAAK,CAAC,OAAO,SAAS;CACtB,QAAQ,CAAC,UAAU;CACnB,OAAO;EAAC;EAAS;EAAO;EAAS;EAAU;EAAO;CACnD;AAGD,MAAM,iBAAiB;AAEvB,SAAS,UAAU,MAAM;AACvB,QAAO,SAAS,KAAK;;AAGvB,SAAgB,gBAAgB,EAAE,cAAc;AAC9C,KAAI,CAAC,WAAY;CAEjB,MAAM,YAAY,WAAW,WAAW;CACxC,MAAM,SAAmB,EAAE;AAC3B,WAAU,OAAO,SAAS,GAAG,QAAQ;AACnC,SAAO,KAAK,GAAG,EAAE,IAAI;AACrB,MAAI,MAAM,UAAU,OAAO,SAAS,EAAG,QAAO,KAAK,IAAI;GACvD;AAEF,KAAI,CAAC,OAAQ;CAEb,IAAI,iBAA2B,EAAE;CACjC,MAAM,cAA0B,EAAE;AAElC,QAAO,SAAS,UAAU;AACxB,MAAI,UAAU,KACZ;OAAI,gBAAgB;AAClB,gBAAY,KAAK,eAAe;AAChC,qBAAiB,EAAE;;QAGrB,gBAAe,KAAK,MAAM;GAE5B;AAEF,KAAI,eACF,aAAY,KAAK,eAAe;CAGlC,MAAM,MAKF,EAAE;AAEN,aAAY,SAAS,eAAe;EAClC,MAAM,OAAO,WAAW;EACxB,MAAM,SAAS,WAAW;EAC1B,MAAM,SAAS,WAAW;EAC1B,MAAM,QAAQ,WAAW;AAIzB,GAFe,IAAI,SAAS,CAAC,KAAK,EAE3B,SAAS,UAAU;AACxB,OAAI,SAAS;IAAC;IAAM;IAAQ;IAAQ;IAAM;IAC1C;GACF;AAeF,QAAO,EAAE,YAbM,OAAO,QAAQ,IAAI,CAC/B,KAAK,CAAC,OAAO,CAAC,MAAM,QAAQ,QAAQ,YAAY;EAC/C,IAAI,QAAQ,GAAG,MAAM,GAAG,UAAU,UAAU,KAAK;AACjD,MAAI,UAAU,MACZ,UAAS,IAAI,UAAU;AAEzB,MAAI,MACF,UAAS,IAAI;AAEf,SAAO;GACP,CACD,KAAK,KAAK,EAEgB;;AAG/B,gBAAgB,iBAAiB,CAAC,aAAa"}
+{"version":3,"file":"transition.js","names":[],"sources":["../../src/styles/transition.ts"],"sourcesContent":["import { parseStyle } from '../utils/styles';\n\nconst SECOND_FILL_COLOR_PROPERTY = '--tasty-second-fill-color';\n\nconst MAP: Record<string, string[]> = {\n  fade: ['mask', 'mask-composite'],\n  translate: ['transform', 'translate'],\n  rotate: ['transform', 'rotate'],\n  scale: ['transform', 'scale'],\n  fill: ['background-color', 'background-image', SECOND_FILL_COLOR_PROPERTY],\n  image: [\n    'background-image',\n    'background-position',\n    'background-size',\n    'background-repeat',\n    'background-attachment',\n    'background-origin',\n    'background-clip',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  background: [\n    'background-color',\n    'background-image',\n    'background-position',\n    'background-size',\n    'background-repeat',\n    'background-attachment',\n    'background-origin',\n    'background-clip',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  border: [\n    'border',\n    'border-top',\n    'border-right',\n    'border-bottom',\n    'border-left',\n  ],\n  filter: ['filter', 'backdrop-filter'],\n  radius: ['border-radius'],\n  shadow: ['box-shadow'],\n  outline: ['outline', 'outline-offset'],\n  preset: [\n    'font-size',\n    'line-height',\n    'letter-spacing',\n    'font-weight',\n    'font-style',\n  ],\n  text: ['font-weight', 'text-decoration-color'],\n  color: ['color'],\n  opacity: ['opacity'],\n  theme: [\n    'color',\n    'background-color',\n    'background-image',\n    'box-shadow',\n    'border',\n    'border-radius',\n    'outline',\n    'opacity',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  width: ['max-width', 'min-width', 'width'],\n  height: ['max-height', 'min-height', 'height'],\n  gap: ['gap', 'margin'],\n  zIndex: ['z-index'],\n  inset: ['inset', 'top', 'right', 'bottom', 'left'],\n};\n\nexport const DEFAULT_TIMING = 'var(--transition)';\nconst DEFAULT_EASING = 'linear';\n\nconst EASING_KEYWORDS = new Set([\n  'ease',\n  'ease-in',\n  'ease-out',\n  'ease-in-out',\n  'linear',\n  'step-start',\n  'step-end',\n]);\n\nfunction isEasing(token: string): boolean {\n  return (\n    EASING_KEYWORDS.has(token) ||\n    token.startsWith('cubic-bezier(') ||\n    token.startsWith('steps(') ||\n    token.startsWith('linear(')\n  );\n}\n\nfunction getTiming(name: string): string {\n  return `var(--${name}-transition, var(--transition))`;\n}\n\ntype TransitionEntry = [\n  name: string,\n  easing: string | undefined,\n  timing: string | undefined,\n  delay: string | undefined,\n];\n\nexport function transitionStyle({ transition }) {\n  if (!transition) return;\n\n  const processed = parseStyle(transition);\n  const tokens: string[] = [];\n  processed.groups.forEach((g, idx) => {\n    tokens.push(...g.all);\n    if (idx < processed.groups.length - 1) tokens.push(',');\n  });\n\n  if (tokens.length === 0) return;\n\n  let tempTransition: string[] = [];\n  const transitions: string[][] = [];\n\n  tokens.forEach((token) => {\n    if (token === ',') {\n      if (tempTransition.length) {\n        transitions.push(tempTransition);\n        tempTransition = [];\n      }\n    } else {\n      tempTransition.push(token);\n    }\n  });\n\n  if (tempTransition.length) {\n    transitions.push(tempTransition);\n  }\n\n  const map: Record<string, TransitionEntry> = {};\n\n  transitions.forEach((transition) => {\n    const name = transition[0];\n\n    let timing: string | undefined;\n    let easing: string | undefined;\n    let delay: string | undefined;\n\n    if (transition[1] && isEasing(transition[1])) {\n      easing = transition[1];\n      delay = transition[2];\n    } else {\n      timing = transition[1];\n      easing = transition[2];\n      delay = transition[3];\n    }\n\n    const styles = MAP[name] || [name];\n\n    styles.forEach((style) => {\n      map[style] = [name, easing, timing, delay];\n    });\n  });\n\n  const result = Object.entries(map)\n    .map(([style, [name, easing, timing, delay]]) => {\n      let value = `${style} ${timing || getTiming(name)}`;\n      if (easing || delay) {\n        value += ` ${easing || DEFAULT_EASING}`;\n      }\n      if (delay) {\n        value += ` ${delay}`;\n      }\n      return value;\n    })\n    .join(', ');\n\n  return { transition: result };\n}\n\ntransitionStyle.__lookupStyles = ['transition'];\n"],"mappings":"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"}

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "./utils/css-types.js";
+import { CSSProperties as CSSProperties$1 } from "./utils/css-types.js";
 import { Styles } from "./styles/types.js";
 import { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from "./styles/list.js";
 import { AllHTMLAttributes, ComponentType } from "react";
@@ -76,7 +76,7 @@ interface BasePropsWithoutChildren<K extends TagName = TagName> extends Pick<All
   /** Plain css for the element */
   css?: string;
   /** The CSS style map */
-  style?: CSSProperties | (CSSProperties & Record<string, string | number | null | undefined>);
+  style?: CSSProperties$1 | (CSSProperties$1 & Record<string, string | number | null | undefined>);
   /** User-defined theme for the element. Mapped to `data-theme` attribute. Augment `TastyThemeNames` to register project-specific themes for autocomplete. */
   theme?: ThemeName | (string & {});
   /** CSS custom property tokens rendered as inline styles */

package/dist/utils/css-types.d.ts

@@ -1,7 +1,7 @@
 import { Properties } from "csstype";
 
 //#region src/utils/css-types.d.ts
-type CSSProperties = Properties<string | number>;
+interface CSSProperties extends Properties<string | number> {}
 //#endregion
 export { CSSProperties };
 //# sourceMappingURL=css-types.d.ts.map

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@tenphi/tasty",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "A design-system-integrated styling system and DSL for concise, state-aware UI styling",
   "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": {