meno-core 1.1.4 → 1.1.5

package/lib/shared/utilityClassMapper.test.ts

@@ -178,8 +178,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 +285,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' });

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;
+      }
     }
   }
 

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.5",
   "type": "module",
   "bin": {
     "meno": "./dist/bin/cli.js"