meno-core 1.0.53 → 1.0.54

package/lib/shared/utilityClassMapper.test.ts

@@ -5,25 +5,35 @@ import type { ResponsiveScales } from './responsiveScaling';
 
 describe('utilityClassMapper', () => {
   describe('stylesToClasses', () => {
-    test('converts padding to utility class', () => {
+    test('converts padding to arbitrary-value utility class', () => {
       const classes = stylesToClasses({ padding: '10px' });
-      expect(classes).toContain('p-10px');
+      expect(classes).toContain('p-[10px]');
     });
 
-    test('converts display flex to short form', () => {
+    test('converts display flex to Tailwind static utility', () => {
       const classes = stylesToClasses({ display: 'flex' });
-      expect(classes).toContain('f');
+      expect(classes).toContain('flex');
+    });
+
+    test('converts display none to hidden', () => {
+      const classes = stylesToClasses({ display: 'none' });
+      expect(classes).toContain('hidden');
     });
 
     test('converts multiple properties', () => {
       const classes = stylesToClasses({ padding: '10px', margin: '20px' });
-      expect(classes).toContain('p-10px');
-      expect(classes).toContain('m-20px');
+      expect(classes).toContain('p-[10px]');
+      expect(classes).toContain('m-[20px]');
     });
 
     test('handles percentage values', () => {
       const classes = stylesToClasses({ width: '50%' });
-      expect(classes).toContain('w-50p');
+      expect(classes).toContain('w-[50%]');
+    });
+
+    test('maps width 100% to w-full', () => {
+      const classes = stylesToClasses({ width: '100%' });
+      expect(classes).toContain('w-full');
     });
 
     test('handles auto values', () => {
@@ -31,9 +41,9 @@ describe('utilityClassMapper', () => {
       expect(classes).toContain('m-auto');
     });
 
-    test('handles values with spaces', () => {
+    test('handles values with spaces (underscore encoding)', () => {
       const classes = stylesToClasses({ padding: '92px 0' });
-      expect(classes).toContain('p-92px-0');
+      expect(classes).toContain('p-[92px_0]');
     });
 
     test('returns empty array for null', () => {
@@ -41,60 +51,110 @@ describe('utilityClassMapper', () => {
       expect(stylesToClasses(undefined)).toEqual([]);
     });
 
-    test('handles color variables', () => {
+    test('handles color variables (Tailwind v4 var shorthand)', () => {
       const classes = stylesToClasses({ color: 'text' });
-      expect(classes).toContain('c-text');
+      expect(classes).toContain('text-(--text)');
+    });
+
+    test('handles background color tokens', () => {
+      const classes = stylesToClasses({ backgroundColor: 'primary' });
+      expect(classes).toContain('bg-(--primary)');
     });
 
-    test('converts shadow preset to sh- class', () => {
+    test('handles font-size with explicit value', () => {
+      const classes = stylesToClasses({ fontSize: '48px' });
+      expect(classes).toContain('text-[48px]');
+    });
+
+    test('handles font-size variables with length hint', () => {
+      const classes = stylesToClasses({ fontSize: 'var(--font-size-lg)' });
+      expect(classes).toContain('text-(length:--font-size-lg)');
+    });
+
+    test('font-weight var carries a number hint (not misread as font-family)', () => {
+      // `font-*` is shared by weight/family; without the hint a var binding resolves to
+      // font-family (`font-family: 450`), so the weight never applies and the family changes.
+      expect(stylesToClasses({ fontWeight: 'var(--h-fw)' })).toContain('font-(number:--h-fw)');
+      expect(stylesToClasses({ fontFamily: 'var(--l-ff)' })).toContain('font-(--l-ff)');
+      // round-trips back to the right property
+      expect(classToStyle('font-(number:--h-fw)')).toEqual({ prop: 'fontWeight', value: 'var(--h-fw)' });
+      expect(classToStyle('font-(--l-ff)')).toEqual({ prop: 'fontFamily', value: 'var(--l-ff)' });
+    });
+
+    test('converts shadow preset to shadow- class', () => {
       const classes = stylesToClasses({ boxShadow: '2' });
-      expect(classes).toContain('sh-2');
+      expect(classes).toContain('shadow-2');
     });
 
-    test('converts gradient preset to gr- class', () => {
+    test('converts gradient preset to bg-gradient- class', () => {
       const classes = stylesToClasses({ background: '1' });
-      expect(classes).toContain('gr-1');
+      expect(classes).toContain('bg-gradient-1');
     });
 
-    test('converts border preset to bd- class', () => {
+    test('converts border preset to border-preset- class', () => {
       const classes = stylesToClasses({ border: '0' });
-      expect(classes).toContain('bd-0');
+      expect(classes).toContain('border-preset-0');
     });
 
     test('handles aspectRatio with slash value', () => {
       const classes = stylesToClasses({ aspectRatio: '1/1' });
-      expect(classes).toContain('ar-1s1');
+      expect(classes).toContain('aspect-[1/1]');
+    });
+
+    test('handles CSS function values', () => {
+      const classes = stylesToClasses({ transform: 'translateY(-50%)' });
+      expect(classes).toContain('transform-[translateY(-50%)]');
+    });
+
+    test('handles grid template repeat()', () => {
+      const classes = stylesToClasses({ gridTemplateColumns: 'repeat(3, 1fr)' });
+      expect(classes).toContain('grid-cols-[repeat(3,_1fr)]');
+    });
+
+    test('handles z-index Tailwind-style bare number', () => {
+      const classes = stylesToClasses({ zIndex: 10 });
+      expect(classes).toContain('z-10');
+    });
+
+    test('handles opacity on Tailwind 0-100 scale', () => {
+      const classes = stylesToClasses({ opacity: 0.5 });
+      expect(classes).toContain('opacity-50');
+    });
+
+    test('handles properties without a Tailwind root via arbitrary properties', () => {
+      const classes = stylesToClasses({ textOverflow: 'ellipsis' });
+      expect(classes).toContain('[text-overflow:ellipsis]');
     });
 
     test('align-items stretch maps to a distinct class from flex-start', () => {
-      // Regression: stretch used to share the `ai-s` class with flex-start,
-      // so imported `align-items: stretch` silently rendered as flex-start
-      // — exactly what made Finsweet's mobile CTA buttons line up to the
-      // left instead of stretching to full width.
+      // Regression: stretch must never share a class with flex-start,
+      // otherwise imported `align-items: stretch` silently renders as
+      // flex-start — exactly what made Finsweet's mobile CTA buttons line
+      // up to the left instead of stretching to full width.
       const stretchClasses = stylesToClasses({ alignItems: 'stretch' });
       const flexStartClasses = stylesToClasses({ alignItems: 'flex-start' });
-      expect(stretchClasses).toContain('ai-st');
-      expect(flexStartClasses).toContain('ai-s');
-      expect(stretchClasses).not.toContain('ai-s');
-      expect(classToStyle('ai-st')).toEqual({ prop: 'alignItems', value: 'stretch' });
+      expect(stretchClasses).toContain('items-stretch');
+      expect(flexStartClasses).toContain('items-start');
+      expect(stretchClasses).not.toContain('items-start');
+      expect(classToStyle('items-stretch')).toEqual({ prop: 'alignItems', value: 'stretch' });
     });
 
     test('justify-content space-evenly maps to a distinct class from flex-end', () => {
-      // Same bug shape as align-items: `space-evenly` previously aliased to
-      // `jc-e` (flex-end), silently changing layout.
+      // Same bug shape as align-items: `space-evenly` must not alias to
+      // flex-end, silently changing layout.
       const evenly = stylesToClasses({ justifyContent: 'space-evenly' });
       const end = stylesToClasses({ justifyContent: 'flex-end' });
-      expect(evenly).toContain('jc-ev');
-      expect(end).toContain('jc-e');
-      expect(evenly).not.toContain('jc-e');
-      expect(classToStyle('jc-ev')).toEqual({ prop: 'justifyContent', value: 'space-evenly' });
+      expect(evenly).toContain('justify-evenly');
+      expect(end).toContain('justify-end');
+      expect(evenly).not.toContain('justify-end');
+      expect(classToStyle('justify-evenly')).toEqual({ prop: 'justifyContent', value: 'space-evenly' });
     });
   });
 
   describe('responsiveStylesToClasses', () => {
     test('handles flat style object', () => {
       const classes = responsiveStylesToClasses({ padding: '10px' });
-      expect(classes).toContain('p-10px');
+      expect(classes).toContain('p-[10px]');
     });
 
     test('handles responsive styles with base', () => {
@@ -102,17 +162,17 @@ describe('utilityClassMapper', () => {
         base: { padding: '10px' },
         tablet: { padding: '20px' },
       });
-      expect(classes).toContain('p-10px');
-      expect(classes).toContain('t-p-20px');
+      expect(classes).toContain('p-[10px]');
+      expect(classes).toContain('tablet:p-[20px]');
     });
 
-    test('handles mobile styles with mob prefix', () => {
+    test('handles mobile styles with mobile: variant prefix', () => {
       const classes = responsiveStylesToClasses({
         base: { padding: '10px' },
         mobile: { padding: '5px' },
       });
-      expect(classes).toContain('p-10px');
-      expect(classes).toContain('mob-p-5px');
+      expect(classes).toContain('p-[10px]');
+      expect(classes).toContain('mobile:p-[5px]');
     });
 
     test('returns empty array for null', () => {
@@ -130,39 +190,39 @@ describe('utilityClassMapper', () => {
         padding: { tablet: 0.75, mobile: 0.5 },
       };
 
-      test('consumes scalable mobile override into base clamp; no mob- class emitted', () => {
+      test('consumes scalable mobile override into base clamp; no mobile: class emitted', () => {
         clearRegistry();
         const classes = responsiveStylesToClasses(
           { base: { fontSize: '150px' }, mobile: { fontSize: '94px' } },
-          { fluidActive: true, responsiveScales: fluidScales }
+          { fluidActive: true, responsiveScales: fluidScales },
         );
-        // base became a hashed class wrapping clamp(94px, ..., 150px)
-        const hashed = classes.find((c) => /^fs-h[0-9a-z]+$/.test(c));
-        expect(hashed).toBeDefined();
-        expect(getStyleValue(hashed!)).toMatch(/^clamp\(94px,/);
-        expect(getStyleValue(hashed!)).toContain(', 150px)');
-        // no .mob-fs-* emitted
-        expect(classes.some((c) => c.startsWith('mob-fs-'))).toBe(false);
+        // base became an arbitrary class wrapping clamp(94px, ..., 150px)
+        const clamped = classes.find((c) => c.startsWith('text-[clamp('));
+        expect(clamped).toBeDefined();
+        expect(String(getStyleValue(clamped!))).toMatch(/^clamp\(94px,/);
+        expect(String(getStyleValue(clamped!))).toContain(', 150px)');
+        // no mobile:text-* emitted
+        expect(classes.some((c) => c.startsWith('mobile:text-'))).toBe(false);
       });
 
-      test('mobile-only non-scalable property (display) stays as mob- class', () => {
+      test('mobile-only non-scalable property (display) stays as mobile: class', () => {
         clearRegistry();
         const classes = responsiveStylesToClasses(
           {
             base: { fontSize: '150px' },
             mobile: { fontSize: '94px', display: 'none' },
           },
-          { fluidActive: true, responsiveScales: fluidScales }
+          { fluidActive: true, responsiveScales: fluidScales },
         );
         // fontSize consumed into base clamp
-        const hashed = classes.find((c) => /^fs-h[0-9a-z]+$/.test(c));
-        expect(hashed).toBeDefined();
-        expect(getStyleValue(hashed!)).toMatch(/^clamp\(94px,/);
+        const clamped = classes.find((c) => c.startsWith('text-[clamp('));
+        expect(clamped).toBeDefined();
+        expect(String(getStyleValue(clamped!))).toMatch(/^clamp\(94px,/);
         // display:none survives on mobile
-        expect(classes).toContain('mob-h');
+        expect(classes).toContain('mobile:hidden');
       });
 
-      test('tablet override stays as .t-* class (unchanged behavior)', () => {
+      test('tablet override stays as tablet: class (unchanged behavior)', () => {
         clearRegistry();
         const classes = responsiveStylesToClasses(
           {
@@ -170,71 +230,71 @@ describe('utilityClassMapper', () => {
             tablet: { fontSize: '120px' },
             mobile: { fontSize: '94px' },
           },
-          { fluidActive: true, responsiveScales: fluidScales }
+          { fluidActive: true, responsiveScales: fluidScales },
         );
-        expect(classes).toContain('t-fs-120px');
+        expect(classes).toContain('tablet:text-[120px]');
         // mobile consumed
-        expect(classes.some((c) => c.startsWith('mob-fs-'))).toBe(false);
+        expect(classes.some((c) => c.startsWith('mobile:text-'))).toBe(false);
       });
 
       test('no mobile override → base passes through unchanged (no consumption)', () => {
         clearRegistry();
         const classes = responsiveStylesToClasses(
           { base: { fontSize: '150px' } },
-          { fluidActive: true, responsiveScales: fluidScales }
+          { fluidActive: true, responsiveScales: fluidScales },
         );
-        expect(classes).toContain('fs-150px');
-        expect(classes.some((c) => /^fs-h/.test(c))).toBe(false);
+        expect(classes).toContain('text-[150px]');
+        expect(classes.some((c) => c.startsWith('text-[clamp('))).toBe(false);
       });
 
-      test('mismatched units (rem vs px) → falls back, mob- class still emitted', () => {
+      test('mismatched units (rem vs px) → falls back, mobile: class still emitted', () => {
         clearRegistry();
         const classes = responsiveStylesToClasses(
           { base: { fontSize: '10rem' }, mobile: { fontSize: '94px' } },
-          { fluidActive: true, responsiveScales: fluidScales }
+          { fluidActive: true, responsiveScales: fluidScales },
         );
-        expect(classes).toContain('fs-10rem');
-        expect(classes).toContain('mob-fs-94px');
+        expect(classes).toContain('text-[10rem]');
+        expect(classes).toContain('mobile:text-[94px]');
       });
 
       test('non-scalable mobile override (display) is not consumed', () => {
         clearRegistry();
         const classes = responsiveStylesToClasses(
           { base: { display: 'flex' }, mobile: { display: 'block' } },
-          { fluidActive: true, responsiveScales: fluidScales }
+          { fluidActive: true, responsiveScales: fluidScales },
         );
-        expect(classes).toContain('f');
-        expect(classes).toContain('mob-b');
+        expect(classes).toContain('flex');
+        expect(classes).toContain('mobile:block');
       });
 
-      test('fluidActive off → no consumption, mob- class emitted', () => {
+      test('fluidActive off → no consumption, mobile: class emitted', () => {
         clearRegistry();
         const classes = responsiveStylesToClasses(
           { base: { fontSize: '150px' }, mobile: { fontSize: '94px' } },
-          { fluidActive: false, responsiveScales: fluidScales }
+          { fluidActive: false, responsiveScales: fluidScales },
         );
-        expect(classes).toContain('fs-150px');
-        expect(classes).toContain('mob-fs-94px');
+        expect(classes).toContain('text-[150px]');
+        expect(classes).toContain('mobile:text-[94px]');
       });
 
       test('fluidActive on but responsiveScales disabled → no consumption', () => {
         clearRegistry();
         const classes = responsiveStylesToClasses(
           { base: { fontSize: '150px' }, mobile: { fontSize: '94px' } },
-          { fluidActive: true, responsiveScales: { ...fluidScales, enabled: false } }
+          { fluidActive: true, responsiveScales: { ...fluidScales, enabled: false } },
         );
-        expect(classes).toContain('fs-150px');
-        expect(classes).toContain('mob-fs-94px');
+        expect(classes).toContain('text-[150px]');
+        expect(classes).toContain('mobile:text-[94px]');
       });
 
       test('clamp math: MIN=94px, MAX=150px, fluidRange 320–1700', () => {
         clearRegistry();
         const classes = responsiveStylesToClasses(
           { base: { fontSize: '150px' }, mobile: { fontSize: '94px' } },
-          { fluidActive: true, responsiveScales: fluidScales }
+          { fluidActive: true, responsiveScales: fluidScales },
         );
-        const hashed = classes.find((c) => /^fs-h[0-9a-z]+$/.test(c))!;
-        const value = String(getStyleValue(hashed));
+        const clamped = classes.find((c) => c.startsWith('text-[clamp('))!;
+        const value = String(getStyleValue(clamped));
         // slope = (150-94)/(1700-320) = 56/1380 ≈ 0.04058 px/px → slopeVw ≈ 4.058vw
         // intercept = 94 - 0.04058*320 = 94 - 12.9855 ≈ 81.0145px
         expect(value).toMatch(/clamp\(94px,\s*81\.0145px\s*\+\s*4\.058vw,\s*150px\)/);
@@ -244,22 +304,27 @@ describe('utilityClassMapper', () => {
 
   describe('classToStyle', () => {
     test('parses padding class', () => {
-      const style = classToStyle('p-10px');
+      const style = classToStyle('p-[10px]');
       expect(style).toEqual({ prop: 'padding', value: '10px' });
     });
 
-    test('parses special case flex', () => {
-      const style = classToStyle('f');
+    test('parses static flex utility', () => {
+      const style = classToStyle('flex');
       expect(style).toEqual({ prop: 'display', value: 'flex' });
     });
 
-    test('handles tablet prefix', () => {
-      const style = classToStyle('t-p-20px');
+    test('parses hidden utility', () => {
+      const style = classToStyle('hidden');
+      expect(style).toEqual({ prop: 'display', value: 'none' });
+    });
+
+    test('handles tablet variant prefix', () => {
+      const style = classToStyle('tablet:p-[20px]');
       expect(style).toEqual({ prop: 'padding', value: '20px' });
     });
 
-    test('handles mobile prefix', () => {
-      const style = classToStyle('mob-p-5px');
+    test('handles mobile variant prefix', () => {
+      const style = classToStyle('mobile:p-[5px]');
       expect(style).toEqual({ prop: 'padding', value: '5px' });
     });
 
@@ -268,32 +333,69 @@ describe('utilityClassMapper', () => {
       expect(classToStyle('unknown-class')).toBeNull();
     });
 
+    test('decodes underscores back to spaces', () => {
+      const style = classToStyle('p-[92px_0]');
+      expect(style).toEqual({ prop: 'padding', value: '92px 0' });
+    });
+
+    test('decodes color variables to bare tokens', () => {
+      const style = classToStyle('bg-(--primary)');
+      expect(style).toEqual({ prop: 'backgroundColor', value: 'primary' });
+    });
+
+    test('decodes non-color variables to var() values', () => {
+      const style = classToStyle('w-(--site-width)');
+      expect(style).toEqual({ prop: 'width', value: 'var(--site-width)' });
+    });
+
+    test('disambiguates text- by value: font-size vs color', () => {
+      expect(classToStyle('text-[14px]')).toEqual({ prop: 'fontSize', value: '14px' });
+      expect(classToStyle('text-[#fff]')).toEqual({ prop: 'color', value: '#fff' });
+      expect(classToStyle('text-(length:--font-size-lg)')).toEqual({
+        prop: 'fontSize',
+        value: 'var(--font-size-lg)',
+      });
+    });
+
+    test('decodes keyword utilities', () => {
+      expect(classToStyle('w-full')).toEqual({ prop: 'width', value: '100%' });
+      expect(classToStyle('h-screen')).toEqual({ prop: 'height', value: '100vh' });
+      expect(classToStyle('rounded-full')).toEqual({ prop: 'borderRadius', value: '9999px' });
+    });
+
+    test('decodes arbitrary-property classes', () => {
+      expect(classToStyle('[text-overflow:ellipsis]')).toEqual({ prop: 'textOverflow', value: 'ellipsis' });
+    });
+
     test('parses shadow preset class', () => {
-      const style = classToStyle('sh-2');
+      const style = classToStyle('shadow-2');
       expect(style).toEqual({ prop: 'boxShadow', value: '0 4px 12px rgba(0, 0, 0, 0.1)' });
     });
 
     test('parses gradient preset class', () => {
-      const style = classToStyle('gr-1');
-      expect(style).toEqual({ prop: 'background', value: 'linear-gradient(90deg, rgba(10,22,40,0.85) 0%, rgba(10,22,40,0.2) 100%)' });
+      const style = classToStyle('bg-gradient-1');
+      expect(style).toEqual({
+        prop: 'background',
+        value: 'linear-gradient(90deg, rgba(10,22,40,0.85) 0%, rgba(10,22,40,0.2) 100%)',
+      });
     });
 
     test('parses border preset class', () => {
-      const style = classToStyle('bd-0');
+      const style = classToStyle('border-preset-0');
       expect(style).toEqual({ prop: 'border', value: '1px solid var(--border)' });
     });
   });
 
   describe('classesToStyles', () => {
     test('converts base classes to style object', () => {
-      const styles = classesToStyles(['p-10px', 'm-20px']);
+      const styles = classesToStyles(['p-[10px]', 'm-[20px]']);
       expect(styles).toEqual({
         base: { padding: '10px', margin: '20px' },
       });
     });
 
     test('handles responsive classes', () => {
-      const styles = classesToStyles(['p-10px', 't-p-20px']);
+      const styles = classesToStyles(['p-[10px]', 'tablet:p-[20px]']);
       expect(styles).toEqual({
         base: { padding: '10px' },
         tablet: { padding: '20px' },
@@ -301,7 +403,7 @@ describe('utilityClassMapper', () => {
     });
 
     test('handles mobile classes', () => {
-      const styles = classesToStyles(['p-10px', 'mob-p-5px']);
+      const styles = classesToStyles(['p-[10px]', 'mobile:p-[5px]']);
       expect(styles).toEqual({
         base: { padding: '10px' },
         mobile: { padding: '5px' },
@@ -313,10 +415,19 @@ describe('utilityClassMapper', () => {
     });
 
     test('removes empty breakpoints', () => {
-      const styles = classesToStyles(['p-10px']);
+      const styles = classesToStyles(['p-[10px]']);
       expect(styles).toEqual({ base: { padding: '10px' } });
       expect(styles?.tablet).toBeUndefined();
       expect(styles?.mobile).toBeUndefined();
     });
+
+    test('round-trips styles → classes → styles', () => {
+      const original = {
+        base: { padding: '92px 0', display: 'flex', color: 'primary', width: '100%' },
+        mobile: { padding: '12px 0' },
+      };
+      const classes = responsiveStylesToClasses(original);
+      expect(classesToStyles(classes)).toEqual(original);
+    });
   });
 });