meno-core 1.1.4 → 1.1.6

package/lib/shared/utilityClassMapper.test.ts

@@ -7,6 +7,9 @@ import {
   splitStyleByClassability,
   isClassableStyleValue,
   styleHasMapping,
+  classMergeKey,
+  mergeInstanceClasses,
+  stripClassOverriddenStyleProps,
 } from './utilityClassMapper';
 import { getStyleValue, clearRegistry } from './styleValueRegistry';
 import { defaultTailwindThemeVariables } from './tailwindThemeScale';
@@ -178,8 +181,10 @@ describe('utilityClassMapper', () => {
     });
 
     test('handles properties without a Tailwind root via arbitrary properties', () => {
-      const classes = stylesToClasses({ textOverflow: 'ellipsis' });
-      expect(classes).toContain('[text-overflow:ellipsis]');
+      // textOverflow graduated to the `text-ellipsis` static; clip-path still has no root.
+      const classes = stylesToClasses({ clipPath: 'circle(50%)' });
+      expect(classes).toContain('[clip-path:circle(50%)]');
+      expect(stylesToClasses({ textOverflow: 'ellipsis' })).toContain('text-ellipsis');
     });
 
     test('align-items stretch maps to a distinct class from flex-start', () => {
@@ -283,6 +288,122 @@ describe('utilityClassMapper', () => {
       expect(classToStyle('translate-y-4')).toEqual({ prop: 'translate', value: '0 16px' });
     });
 
+    test('filter functions wrap the value in their function', () => {
+      expect(classToStyle('blur-[70px]')).toEqual({ prop: 'filter', value: 'blur(70px)' });
+      expect(classToStyle('backdrop-blur-[8px]')).toEqual({ prop: 'backdropFilter', value: 'blur(8px)' });
+      expect(classToStyle('blur-(--glow)')).toEqual({ prop: 'filter', value: 'blur(var(--glow))' });
+      expect(classToStyle('drop-shadow-[0_4px_6px_#0003]')).toEqual({
+        prop: 'filter',
+        value: 'drop-shadow(0 4px 6px #0003)',
+      });
+      // Length/shadow named scales are deliberately not absorbed (no baked theme values).
+      expect(classToStyle('blur-sm')).toBeNull();
+      expect(classToStyle('drop-shadow-md')).toBeNull();
+    });
+
+    test('filter numeric steps follow Tailwind per-function scales', () => {
+      expect(classToStyle('brightness-50')).toEqual({ prop: 'filter', value: 'brightness(0.5)' });
+      expect(classToStyle('contrast-125')).toEqual({ prop: 'filter', value: 'contrast(1.25)' });
+      expect(classToStyle('saturate-150')).toEqual({ prop: 'filter', value: 'saturate(1.5)' });
+      expect(classToStyle('grayscale-50')).toEqual({ prop: 'filter', value: 'grayscale(50%)' });
+      expect(classToStyle('invert-25')).toEqual({ prop: 'filter', value: 'invert(25%)' });
+      expect(classToStyle('hue-rotate-90')).toEqual({ prop: 'filter', value: 'hue-rotate(90deg)' });
+      expect(classToStyle('backdrop-opacity-50')).toEqual({ prop: 'backdropFilter', value: 'opacity(0.5)' });
+      // Bare 100% switches are statics.
+      expect(classToStyle('grayscale')).toEqual({ prop: 'filter', value: 'grayscale(100%)' });
+      expect(classToStyle('invert')).toEqual({ prop: 'filter', value: 'invert(100%)' });
+      expect(classToStyle('backdrop-sepia')).toEqual({ prop: 'backdropFilter', value: 'sepia(100%)' });
+      expect(classToStyle('filter-none')).toEqual({ prop: 'filter', value: 'none' });
+    });
+
+    test('single filter-function values emit the compact class and round-trip', () => {
+      expect(stylesToClasses({ filter: 'blur(70px)' })).toEqual(['blur-[70px]']);
+      expect(stylesToClasses({ filter: 'brightness(0.5)' })).toEqual(['brightness-50']);
+      expect(stylesToClasses({ filter: 'grayscale(100%)' })).toEqual(['grayscale']);
+      expect(stylesToClasses({ filter: 'grayscale(50%)' })).toEqual(['grayscale-50']);
+      expect(stylesToClasses({ filter: 'hue-rotate(90deg)' })).toEqual(['hue-rotate-90']);
+      expect(stylesToClasses({ filter: 'drop-shadow(0 4px 6px #0003)' })).toEqual(['drop-shadow-[0_4px_6px_#0003]']);
+      expect(stylesToClasses({ filter: 'saturate(var(--sat))' })).toEqual(['saturate-(--sat)']);
+      expect(stylesToClasses({ backdropFilter: 'blur(8px)' })).toEqual(['backdrop-blur-[8px]']);
+      expect(stylesToClasses({ backdropFilter: 'opacity(0.5)' })).toEqual(['backdrop-opacity-50']);
+      // Multi-function values have no compact spelling → arbitrary form on the filter root.
+      expect(stylesToClasses({ filter: 'blur(4px) brightness(0.5)' })).toEqual(['filter-[blur(4px)_brightness(0.5)]']);
+      expect(classesToStyles(['blur-[70px]'])).toEqual({ base: { filter: 'blur(70px)' } });
+      expect(classesToStyles(['brightness-50'])).toEqual({ base: { filter: 'brightness(0.5)' } });
+    });
+
+    test('per-axis skew and scale compose into transform/scale', () => {
+      expect(classToStyle('skew-x-[10deg]')).toEqual({ prop: 'transform', value: 'skewX(10deg)' });
+      expect(classToStyle('skew-y-3')).toEqual({ prop: 'transform', value: 'skewY(3deg)' });
+      expect(classToStyle('scale-x-[1.2]')).toEqual({ prop: 'scale', value: '1.2 1' });
+      expect(classToStyle('scale-y-95')).toEqual({ prop: 'scale', value: '1 0.95' });
+    });
+
+    test('side border-radius restores both corners on round-trip', () => {
+      expect(classesToStyles(['rounded-t-lg'])).toEqual({
+        base: { borderTopLeftRadius: 'var(--radius-lg)', borderTopRightRadius: 'var(--radius-lg)' },
+      });
+      expect(classesToStyles(['rounded-l-[8px]'])).toEqual({
+        base: { borderTopLeftRadius: '8px', borderBottomLeftRadius: '8px' },
+      });
+      expect(classesToStyles(['rounded-b-full'])).toEqual({
+        base: { borderBottomLeftRadius: '9999px', borderBottomRightRadius: '9999px' },
+      });
+      // Corner forms are unaffected (single corner, no mirror).
+      expect(classesToStyles(['rounded-tl-[8px]'])).toEqual({ base: { borderTopLeftRadius: '8px' } });
+    });
+
+    test('long-tail Tailwind vocabulary (backgrounds, decoration, SVG, logical inset, scroll)', () => {
+      expect(classToStyle('bg-cover')).toEqual({ prop: 'backgroundSize', value: 'cover' });
+      expect(classToStyle('bg-clip-text')).toEqual({ prop: 'backgroundClip', value: 'text' });
+      expect(classToStyle('float-left')).toEqual({ prop: 'float', value: 'left' });
+      expect(classToStyle('text-ellipsis')).toEqual({ prop: 'textOverflow', value: 'ellipsis' });
+      expect(classToStyle('text-balance')).toEqual({ prop: 'textWrap', value: 'balance' });
+      // Shared `decoration` root disambiguates by value type; `stroke` likewise.
+      expect(classToStyle('decoration-2')).toEqual({ prop: 'textDecorationThickness', value: '2px' });
+      expect(classToStyle('decoration-[#f00]')).toEqual({ prop: 'textDecorationColor', value: '#f00' });
+      expect(classToStyle('decoration-wavy')).toEqual({ prop: 'textDecorationStyle', value: 'wavy' });
+      expect(classToStyle('underline-offset-2')).toEqual({ prop: 'textUnderlineOffset', value: '2px' });
+      expect(classToStyle('outline-1')).toEqual({ prop: 'outlineWidth', value: '1px' });
+      expect(classToStyle('outline-dashed')).toEqual({ prop: 'outlineStyle', value: 'dashed' });
+      expect(classToStyle('stroke-2')).toEqual({ prop: 'strokeWidth', value: '2' });
+      expect(classToStyle('stroke-[#f00]')).toEqual({ prop: 'stroke', value: '#f00' });
+      expect(classToStyle('fill-current')).toEqual({ prop: 'fill', value: 'currentColor' });
+      expect(classToStyle('caret-[#f00]')).toEqual({ prop: 'caretColor', value: '#f00' });
+      expect(classToStyle('start-0')).toEqual({ prop: 'insetInlineStart', value: '0px' });
+      expect(classToStyle('end-4')).toEqual({ prop: 'insetInlineEnd', value: '16px' });
+      expect(classToStyle('indent-4')).toEqual({ prop: 'textIndent', value: '16px' });
+      expect(classToStyle('border-spacing-2')).toEqual({ prop: 'borderSpacing', value: '8px' });
+      expect(classToStyle('scroll-mt-2')).toEqual({ prop: 'scrollMarginTop', value: '8px' });
+      expect(classToStyle('touch-pan-x')).toEqual({ prop: 'touchAction', value: 'pan-x' });
+      expect(classToStyle('overscroll-contain')).toEqual({ prop: 'overscrollBehavior', value: 'contain' });
+      expect(classToStyle('break-inside-avoid')).toEqual({ prop: 'breakInside', value: 'avoid' });
+      expect(classToStyle('auto-cols-fr')).toEqual({ prop: 'gridAutoColumns', value: 'minmax(0, 1fr)' });
+      expect(classToStyle('rounded-tr-xl')).toEqual({ prop: 'borderTopRightRadius', value: 'var(--radius-xl)' });
+      expect(classToStyle('caption-top')).toEqual({ prop: 'captionSide', value: 'top' });
+      expect(classToStyle('transform-gpu')).toEqual({ prop: 'transform', value: 'translateZ(0)' });
+      expect(classToStyle('animate-none')).toEqual({ prop: 'animation', value: 'none' });
+    });
+
+    test('static/keyword additions parse and forward-map', () => {
+      expect(classToStyle('italic')).toEqual({ prop: 'fontStyle', value: 'italic' });
+      expect(classToStyle('isolate')).toEqual({ prop: 'isolation', value: 'isolate' });
+      expect(classToStyle('border-collapse')).toEqual({ prop: 'borderCollapse', value: 'collapse' });
+      expect(classToStyle('tabular-nums')).toEqual({ prop: 'fontVariantNumeric', value: 'tabular-nums' });
+      expect(classToStyle('snap-x')).toEqual({ prop: 'scrollSnapType', value: 'x mandatory' });
+      expect(classToStyle('mix-blend-multiply')).toEqual({ prop: 'mixBlendMode', value: 'multiply' });
+      expect(classToStyle('will-change-scroll')).toEqual({ prop: 'willChange', value: 'scroll-position' });
+      expect(classToStyle('columns-3')).toEqual({ prop: 'columns', value: '3' });
+      expect(classToStyle('h-dvh')).toEqual({ prop: 'height', value: '100dvh' });
+      // Read-side aliases resolve to the canonical value; forward keeps the canonical class.
+      expect(classToStyle('text-nowrap')).toEqual({ prop: 'whiteSpace', value: 'nowrap' });
+      expect(classToStyle('break-words')).toEqual({ prop: 'overflowWrap', value: 'break-word' });
+      expect(stylesToClasses({ whiteSpace: 'nowrap' })).toEqual(['whitespace-nowrap']);
+      expect(stylesToClasses({ mixBlendMode: 'multiply' })).toEqual(['mix-blend-multiply']);
+      expect(stylesToClasses({ columns: '3' })).toEqual(['columns-3']);
+      expect(stylesToClasses({ height: '100dvh' })).toEqual(['h-dvh']);
+    });
+
     test('transition longhands compose; duration/ease override the shorthand', () => {
       expect(classToStyle('duration-300')).toEqual({ prop: 'transitionDuration', value: '300ms' });
       expect(classToStyle('delay-150')).toEqual({ prop: 'transitionDelay', value: '150ms' });
@@ -868,4 +989,81 @@ describe('utilityClassMapper', () => {
       expect(styleHasMapping(undefined)).toBe(false);
     });
   });
+
+  describe('classMergeKey', () => {
+    test('same (breakpoint, property) → same key across value forms', () => {
+      expect(classMergeKey('max-w-full')).toBe(classMergeKey('max-w-[283px]'));
+      expect(classMergeKey('p-4')).toBe(classMergeKey('p-[13px]'));
+    });
+
+    test('breakpoint forms normalize to one key (max-lg / legacy tablet / bare lg)', () => {
+      const key = classMergeKey('max-lg:p-4');
+      expect(classMergeKey('tablet:p-[10px]')).toBe(key);
+      expect(classMergeKey('lg:p-2.5')).toBe(key);
+      expect(classMergeKey('p-4')).not.toBe(key); // base ≠ tablet
+    });
+
+    test('bare color-token class recovers the property from its root', () => {
+      expect(classMergeKey('bg-accent')).toBe(classMergeKey('bg-[var(--gray-200)]'));
+      expect(classMergeKey('text-muted')).toBe(classMergeKey('text-[#ff0000]'));
+    });
+
+    test('unrecognized classes (element hashes, foreign) yield null', () => {
+      expect(classMergeKey('m_hero_ab12cd')).toBeNull();
+      expect(classMergeKey('js-toggle')).toBeNull();
+    });
+  });
+
+  describe('mergeInstanceClasses', () => {
+    test('instance class drops the root class for the same property', () => {
+      expect(mergeInstanceClasses(['max-w-full', 'flex'], 'max-w-[283px]')).toEqual(['flex', 'max-w-[283px]']);
+    });
+
+    test('conflicts are per-breakpoint — root tablet override survives a base instance class', () => {
+      expect(mergeInstanceClasses(['max-w-full', 'max-lg:max-w-[90%]'], 'max-w-[283px]')).toEqual([
+        'max-lg:max-w-[90%]',
+        'max-w-[283px]',
+      ]);
+    });
+
+    test('null-key classes on either side are always kept', () => {
+      expect(mergeInstanceClasses(['m_hero_ab12cd', 'p-4'], 'p-[24px] js-x')).toEqual([
+        'm_hero_ab12cd',
+        'p-[24px]',
+        'js-x',
+      ]);
+    });
+
+    test('empty instance string is a no-op', () => {
+      expect(mergeInstanceClasses(['p-4'], '')).toEqual(['p-4']);
+    });
+  });
+
+  describe('stripClassOverriddenStyleProps', () => {
+    test('drops the flat style property an instance class overrides', () => {
+      expect(stripClassOverriddenStyleProps({ maxWidth: '100%', display: 'flex' }, 'max-w-[283px]')).toEqual({
+        display: 'flex',
+      });
+    });
+
+    test('drops per-breakpoint: base class strips base only, tablet override survives', () => {
+      expect(
+        stripClassOverriddenStyleProps({ base: { maxWidth: '100%' }, tablet: { maxWidth: '90%' } }, 'max-w-[283px]'),
+      ).toEqual({ tablet: { maxWidth: '90%' } });
+    });
+
+    test('unresolved bindings are stripped by property key too', () => {
+      const mapping = { _mapping: true as const, prop: 'maxWidth', values: { narrow: '283px' } };
+      expect(stripClassOverriddenStyleProps({ maxWidth: mapping, color: 'red' }, 'max-w-[283px]')).toEqual({
+        color: 'red',
+      });
+    });
+
+    test('returns the same object when nothing conflicts, null when nothing remains', () => {
+      const style = { maxWidth: '100%' };
+      expect(stripClassOverriddenStyleProps(style, 'p-[24px]')).toBe(style);
+      expect(stripClassOverriddenStyleProps(style, 'max-w-[283px]')).toBeNull();
+      expect(stripClassOverriddenStyleProps(null, 'max-w-[283px]')).toBeNull();
+    });
+  });
 });

package/lib/shared/utilityClassMapper.ts

@@ -21,6 +21,10 @@ import {
   borderPresets,
   SPACING_SCALE_ROOTS,
   SPACING_SCALE_REVERSE,
+  FILTER_FN_ROOTS,
+  FILTER_ROOT_BY_PROP_FN,
+  filterArgToStep,
+  ROUNDED_SIDE_CORNERS,
 } from './utilityClassConfig';
 import {
   camelToKebab,
@@ -168,6 +172,32 @@ function propertyValueToClass(prop: string, value: string | number): string | nu
 
   let className: string | null = null;
 
+  // Tailwind filter functions: a filter/backdrop-filter value that is a SINGLE function call
+  // emits the compact functional class — `blur(70px)` → `blur-[70px]`, `brightness(0.5)` →
+  // `brightness-50`, `saturate(var(--x))` → `saturate-(--x)` — mirroring the parser's filter
+  // branch so hand-authored filter classes survive a style round-trip. Multi-function values
+  // (`blur(4px) brightness(.5)`) and nested-paren args have no compact spelling → arbitrary form.
+  // (The exact 100% switches — `grayscale(100%)` → bare `grayscale` — hit the static table above.)
+  if (prop === 'filter' || prop === 'backdropFilter') {
+    const property = camelToKebab(prop);
+    const varForm = stringValue.match(/^([a-z-]+)\(\s*var\((--[\w-]+)\)\s*\)$/);
+    const plainForm = varForm ? null : stringValue.match(/^([a-z-]+)\(([^()]+)\)$/);
+    const fnRoot = FILTER_ROOT_BY_PROP_FN.get(`${property}|${(varForm ?? plainForm)?.[1]}`);
+    if (fnRoot && varForm) {
+      className = `${fnRoot}-(${varForm[2]})`;
+    } else if (fnRoot && plainForm) {
+      const arg = (plainForm[2] ?? '').trim();
+      const scale = FILTER_FN_ROOTS[fnRoot]?.scale;
+      const step = scale ? filterArgToStep(scale, arg) : null;
+      if (step != null) {
+        className = `${fnRoot}-${step}`;
+      } else {
+        const encoded = encodeArbitraryValue(arg);
+        if (encoded) className = `${fnRoot}-[${encoded}]`;
+      }
+    }
+  }
+
   // Named keyword values: width: 100% → w-full, margin: auto → m-auto
   const kwTable = keywordValues[root];
   if (kwTable) {
@@ -554,6 +584,13 @@ export function classesToStyles(classes: string[], knownTokens?: ReadonlySet<str
       if (cleanClass.startsWith('size-') && styleEntry.prop === 'width') {
         styles[breakpoint]!.height = styleEntry.value;
       }
+      // Side border-radius (`rounded-t-*`) covers TWO corners with no CSS shorthand — classToStyle
+      // returns the first corner; mirror the value onto the second (same pattern as `size-*`).
+      const sideRoot = cleanClass.match(/^(rounded-[trbl])-/)?.[1];
+      const corners = sideRoot ? ROUNDED_SIDE_CORNERS[sideRoot] : undefined;
+      if (corners) {
+        styles[breakpoint]![cssPropertyToCamel(corners[1] ?? '')] = styleEntry.value;
+      }
     }
   }
 
@@ -571,6 +608,122 @@ export function classesToStyles(classes: string[], knownTokens?: ReadonlySet<str
   return hasAny ? styles : null;
 }
 
+/**
+ * Color class root → its camelCase CSS property (the color half of `COLOR_TOKEN_ROOTS`).
+ * A bare color-token class (`bg-accent`, `text-muted`) can't be resolved by `classToStyle`
+ * without the project token set, but its PROPERTY is unambiguous from the root — enough to
+ * detect a conflict with another class targeting the same property.
+ */
+const COLOR_ROOT_TO_PROP: Record<string, string> = {
+  text: 'color',
+  bg: 'backgroundColor',
+  border: 'borderColor',
+  accent: 'accentColor',
+  outline: 'outlineColor',
+  decoration: 'textDecorationColor',
+  caret: 'caretColor',
+  fill: 'fill',
+  stroke: 'stroke',
+};
+
+/**
+ * Merge key for one utility class: normalized breakpoint + the camelCase CSS property the
+ * class decodes to. Two classes with the same key style the same thing — only one should
+ * survive a merge. `null` when the class isn't a recognized utility (element `m_…` hash
+ * classes, foreign classes) — those never participate in conflict detection and are kept.
+ * Mirror of the meno-astro runtime's `classMergeKey` (runtime/style.ts), which is inlined
+ * there to keep the published runtime off new meno-core exports.
+ */
+export function classMergeKey(className: string): string | null {
+  const { breakpoint, base } = splitVariantPrefix(className);
+  // Every breakpoint form shares a key — an instance's `max-lg:p-4` must override a root's
+  // `max-tablet:p-4` or legacy `tablet:p-4`. Normalize strips `max-` and folds the Tailwind
+  // alias under it; fold the bare alias too so `lg:`/`sm:` (unprefixed) also land on identity.
+  let bp = normalizeBreakpointVariant(breakpoint) ?? '';
+  if (bp === 'lg') bp = 'tablet';
+  else if (bp === 'sm') bp = 'mobile';
+  const entry = classToStyle(className);
+  if (entry) return `${bp}|${entry.prop}`;
+  // Bare color-token class — recover the property from the root so an instance's
+  // `bg-[var(--gray-200)]` still conflicts with a root's `bg-accent`.
+  const dash = base.indexOf('-');
+  if (dash > 0) {
+    const prop = COLOR_ROOT_TO_PROP[base.slice(0, dash)];
+    if (prop && /^[a-zA-Z][\w-]*$/.test(base.slice(dash + 1))) return `${bp}|${prop}`;
+  }
+  return null;
+}
+
+/**
+ * Merge a component instance's class string over the root element's own classes.
+ * Instance wins per (breakpoint, CSS property): a root class whose merge key collides with
+ * an instance class is dropped, everything else (element classes, foreign classes) is kept.
+ * Both classes have equal specificity in the generated stylesheet, so without this the
+ * WINNER would be stylesheet order — i.e. class collection order, not the instance.
+ * Mirror of the meno-astro runtime's `mergeInstanceClasses`, so Meno Select agrees with a
+ * real Astro build on which value applies.
+ */
+export function mergeInstanceClasses(own: string[], instanceClass: string): string[] {
+  const instance = instanceClass.split(/\s+/).filter(Boolean);
+  if (instance.length === 0) return own;
+  const overridden = new Set(instance.map(classMergeKey).filter((k): k is string => k !== null));
+  const kept = own.filter((cls) => {
+    const key = classMergeKey(cls);
+    return key === null || !overridden.has(key);
+  });
+  return [...kept, ...instance];
+}
+
+/**
+ * Drop from a root's style object every (breakpoint, property) an instance class string
+ * overrides. A prop-bound root style (`maxWidth: {_mapping}` → resolved `100%`) becomes a
+ * utility class (`max-w-full`) at render time — the class channel can't see it, so an
+ * instance's `max-w-[283px]` would fight it on stylesheet order. Stripping the property
+ * before class generation is the style-object half of `mergeInstanceClasses` (the astro
+ * runtime's `inlineStyle()` does the same drop for its prop-bound inline declarations).
+ * Pure: returns the input object untouched when nothing conflicts, a new object otherwise,
+ * `null` when nothing remains.
+ */
+export function stripClassOverriddenStyleProps(
+  style: StyleValue | null | undefined,
+  instanceClass: string,
+): StyleValue | null {
+  if (!style || typeof style !== 'object') return null;
+  const overridden = new Set(
+    instanceClass
+      .split(/\s+/)
+      .filter(Boolean)
+      .map(classMergeKey)
+      .filter((k): k is string => k !== null),
+  );
+  if (overridden.size === 0) return style;
+
+  const stripBucket = (bucket: StyleObject, bp: string): StyleObject => {
+    const out: StyleObject = {};
+    for (const [prop, value] of Object.entries(bucket)) {
+      if (!overridden.has(`${bp}|${prop}`)) out[prop] = value as StyleObject[string];
+    }
+    return out;
+  };
+
+  if (isResponsiveStyle(style)) {
+    const out: ResponsiveStyleObject = {};
+    let changed = false;
+    for (const [bpName, bucket] of Object.entries(style)) {
+      if (!bucket || typeof bucket !== 'object') continue;
+      const stripped = stripBucket(bucket as StyleObject, bpName === 'base' ? '' : bpName);
+      if (Object.keys(stripped).length !== Object.keys(bucket).length) changed = true;
+      if (Object.keys(stripped).length > 0) out[bpName] = stripped;
+    }
+    if (!changed) return style;
+    return Object.keys(out).length > 0 ? out : null;
+  }
+
+  const flat = stripBucket(style as StyleObject, '');
+  if (Object.keys(flat).length === Object.keys(style as StyleObject).length) return style;
+  return Object.keys(flat).length > 0 ? flat : null;
+}
+
 /**
  * Whether a single style value can be stored as a STATIC utility class. Static strings (no
  * `{{template}}`) and numbers can; template-bearing strings and `_mapping` objects cannot — a

package/lib/shared/utilityClassNames.ts

@@ -31,6 +31,8 @@ import {
   EASE_TIMING,
   TRANSITION_PROPERTY_VALUES,
   TRANSITION_DEFAULT_TIMING,
+  FILTER_FN_ROOTS,
+  filterStepToArg,
 } from './utilityClassConfig';
 import { isCssNamedColor } from './cssNamedColors';
 import { THEME_SCALE_BY_CLASS, themeScaleValue } from './tailwindThemeScale';
@@ -252,6 +254,10 @@ export function resolveRootProperty(root: string, value: string): string {
       if (isLengthValue(value)) return 'outline-width';
       return 'outline';
     }
+    case 'decoration':
+      return isLengthValue(value) || value === 'from-font' ? 'text-decoration-thickness' : 'text-decoration-color';
+    case 'stroke':
+      return isColorValue(value) ? 'stroke' : 'stroke-width';
     default:
       return prefixToCSSProperty[root] ?? root;
   }
@@ -521,6 +527,62 @@ export function parseUtilityClass(className: string, knownTokens?: ReadonlySet<s
 }
 
 function parseRootValue(root: string, rest: string, knownTokens?: ReadonlySet<string>): ParsedUtilityClass | null {
+  // Tailwind filter functions: the class value is an ARGUMENT to the function, not the property
+  // value itself — `blur-[70px]` → filter: blur(70px), `brightness-50` → filter: brightness(0.5),
+  // `backdrop-saturate-(--x)` → backdrop-filter: saturate(var(--x)). Must run before the generic
+  // arbitrary/var branches, which would assign the bare argument to filter (invalid CSS). Numeric
+  // steps follow Tailwind's per-function scale (see FILTER_FN_ROOTS); the length/shadow named
+  // scales (`blur-sm`, `drop-shadow-md`) are deliberately not absorbed — use the arbitrary form.
+  const filterFn = FILTER_FN_ROOTS[root];
+  if (filterFn) {
+    const { property, fn, scale } = filterFn;
+    if (rest.startsWith('[') && rest.endsWith(']') && rest.length > 2) {
+      const arg = decodeArbitraryValue(rest.slice(1, -1));
+      return { property, value: `${fn}(${arg})`, root, kind: 'arbitrary' };
+    }
+    const varArg = rest.match(/^\((--[\w-]+)\)$/);
+    if (varArg) {
+      return { property, value: `${fn}(var(${varArg[1]}))`, root, kind: 'var' };
+    }
+    if (scale && /^\d+(\.\d+)?$/.test(rest)) {
+      return { property, value: `${fn}(${filterStepToArg(scale, rest)})`, root, kind: 'numeric' };
+    }
+    return null;
+  }
+
+  // Per-axis skew (`skew-x-[10deg]`, `skew-y-3`): CSS has no individual skew property, so the
+  // value is wrapped into transform's skewX()/skewY(). Like Tailwind's numeric scale, a bare
+  // number is degrees. NB two skew classes on one element clobber each other (last `transform`
+  // wins) — same single-property limitation as translate-x/translate-y above.
+  if (root === 'skew-x' || root === 'skew-y') {
+    const fn = root === 'skew-x' ? 'skewX' : 'skewY';
+    if (rest.startsWith('[') && rest.endsWith(']') && rest.length > 2) {
+      return {
+        property: 'transform',
+        value: `${fn}(${decodeArbitraryValue(rest.slice(1, -1))})`,
+        root,
+        kind: 'arbitrary',
+      };
+    }
+    if (/^\d+(\.\d+)?$/.test(rest)) {
+      return { property: 'transform', value: `${fn}(${rest}deg)`, root, kind: 'numeric' };
+    }
+    return null;
+  }
+
+  // Per-axis scale (`scale-x-[1.2]`, `scale-y-95`): composed into the two-value `scale`
+  // property with the other axis at 1. Numeric steps are Tailwind's percentage-of-100.
+  if (root === 'scale-x' || root === 'scale-y') {
+    const pair = (v: string) => (root === 'scale-x' ? `${v} 1` : `1 ${v}`);
+    if (rest.startsWith('[') && rest.endsWith(']') && rest.length > 2) {
+      return { property: 'scale', value: pair(decodeArbitraryValue(rest.slice(1, -1))), root, kind: 'arbitrary' };
+    }
+    if (/^\d+$/.test(rest)) {
+      return { property: 'scale', value: pair(String(Number(rest) / 100)), root, kind: 'numeric' };
+    }
+    return null;
+  }
+
   // Arbitrary value: root-[value]
   if (rest.startsWith('[') && rest.endsWith(']') && rest.length > 2) {
     const value = decodeArbitraryValue(rest.slice(1, -1));
@@ -546,6 +608,22 @@ function parseRootValue(root: string, rest: string, knownTokens?: ReadonlySet<st
     return { property, value, root, kind: 'var' };
   }
 
+  // Side/corner border-radius NAMED forms (`rounded-t-lg`, `rounded-tr-xl`, `rounded-l-full`):
+  // resolve the value exactly like the plain `rounded` root — theme scale → var(--radius-lg),
+  // keywords → px. Bracket/var forms are already handled by the generic branches above (the
+  // prefix map carries the property); the CSS generator expands side roots to both corners.
+  if (root.startsWith('rounded-') && prefixToCSSProperty[root]) {
+    const themed = THEME_SCALE_BY_CLASS.get(`rounded-${rest}`);
+    if (themed) {
+      return { property: prefixToCSSProperty[root] ?? root, value: themeScaleValue(themed), root, kind: 'var' };
+    }
+    const kw = keywordValues[root]?.[rest] ?? keywordValues.rounded?.[rest];
+    if (kw !== undefined) {
+      return { property: prefixToCSSProperty[root] ?? root, value: kw, root, kind: 'keyword' };
+    }
+    return null;
+  }
+
   // Border width/style family (`border-2`, `border-b`, `border-t-4`, `border-solid`, …).
   // Placed after the arbitrary `[..]` and var `(--x)` escapes so those win; colors
   // (`border-primary`) return null here and fall through to the color-token branch below.
@@ -614,6 +692,18 @@ function parseRootValue(root: string, rest: string, knownTokens?: ReadonlySet<st
   if ((root === 'duration' || root === 'delay') && /^\d+$/.test(rest)) {
     return { property: prefixToCSSProperty[root] ?? root, value: `${rest}ms`, root, kind: 'numeric' };
   }
+  // Numeric px widths/offsets: `outline-1` → outline-width 1px, `underline-offset-2` → 2px,
+  // `decoration-2` → text-decoration-thickness 2px. (`stroke-2` stays unitless — SVG stroke-width.)
+  if ((root === 'outline' || root === 'outline-offset' || root === 'underline-offset') && /^\d+$/.test(rest)) {
+    const property = root === 'outline' ? 'outline-width' : (prefixToCSSProperty[root] ?? root);
+    return { property, value: `${rest}px`, root, kind: 'numeric' };
+  }
+  if (root === 'decoration' && /^\d+$/.test(rest)) {
+    return { property: 'text-decoration-thickness', value: `${rest}px`, root, kind: 'numeric' };
+  }
+  if (root === 'stroke' && /^\d+$/.test(rest)) {
+    return { property: 'stroke-width', value: rest, root, kind: 'numeric' };
+  }
   // `ease-in-out` → transition-timing-function: cubic-bezier(…).
   if (root === 'ease') {
     const timing = EASE_TIMING[rest];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meno-core",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "type": "module",
   "bin": {
     "meno": "./dist/bin/cli.js"