meno-core 1.0.53 → 1.1.0

package/lib/shared/cssGeneration.test.ts

@@ -1,256 +1,382 @@
 import { describe, expect, test } from 'bun:test';
-import { generateRuleForClass, generateUtilityCSS, generateSingleClassCSS, extractUtilityClassesFromHTML, generateInteractiveCSS, applyContainerPattern } from './cssGeneration';
+import {
+  generateRuleForClass,
+  generateUtilityCSS,
+  generateSingleClassCSS,
+  extractUtilityClassesFromHTML,
+  generateInteractiveCSS,
+  applyContainerPattern,
+  styleObjectToCSS,
+} from './cssGeneration';
 import { DEFAULT_BREAKPOINTS } from './breakpoints';
 import type { ResponsiveScales } from './responsiveScaling';
 import type { InteractiveStyles } from './types/styles';
 import { registerStyleValue, clearRegistry } from './styleValueRegistry';
 
 describe('extractUtilityClassesFromHTML', () => {
-  test('extracts ins- classes', () => {
-    const html = '<div class="ins-0 ins-auto ins-auto-0-0"></div>';
+  test('extracts inset classes', () => {
+    const html = '<div class="inset-[0] inset-auto inset-[auto_0_0]"></div>';
     const classes = extractUtilityClassesFromHTML(html);
-    expect(classes.has('ins-0')).toBe(true);
-    expect(classes.has('ins-auto')).toBe(true);
-    expect(classes.has('ins-auto-0-0')).toBe(true);
+    expect(classes.has('inset-[0]')).toBe(true);
+    expect(classes.has('inset-auto')).toBe(true);
+    expect(classes.has('inset-[auto_0_0]')).toBe(true);
   });
 
-  test('extracts bgi- classes', () => {
-    const html = '<div class="bgi-url(/image.jpg) bgi-linear-gradient(#000,-#fff)"></div>';
+  test('extracts background-image classes', () => {
+    const html = '<div class="bg-[url(/image.jpg)] bg-[linear-gradient(#000,_#fff)]"></div>';
     const classes = extractUtilityClassesFromHTML(html);
-    expect(classes.has('bgi-url(/image.jpg)')).toBe(true);
-    expect(classes.has('bgi-linear-gradient(#000,-#fff)')).toBe(true);
+    expect(classes.has('bg-[url(/image.jpg)]')).toBe(true);
+    expect(classes.has('bg-[linear-gradient(#000,_#fff)]')).toBe(true);
   });
 
-  test('extracts ins- and bgi- alongside other classes', () => {
-    const html = '<div class="w-100p h-30p bgi-linear-gradient(#0000,-#0f1442-94p) pos-absolute bo-0 ins-auto-0-0 z-2"></div>';
+  test('extracts a mix of utility class forms alongside each other', () => {
+    const html =
+      '<div class="w-full h-[30%] bg-[linear-gradient(#0000,_#0f1442_94%)] absolute bottom-[0] inset-[auto_0_0] z-2"></div>';
     const classes = extractUtilityClassesFromHTML(html);
-    expect(classes.has('w-100p')).toBe(true);
-    expect(classes.has('h-30p')).toBe(true);
-    expect(classes.has('bgi-linear-gradient(#0000,-#0f1442-94p)')).toBe(true);
-    expect(classes.has('pos-absolute')).toBe(true);
-    expect(classes.has('bo-0')).toBe(true);
-    expect(classes.has('ins-auto-0-0')).toBe(true);
+    expect(classes.has('w-full')).toBe(true);
+    expect(classes.has('h-[30%]')).toBe(true);
+    expect(classes.has('bg-[linear-gradient(#0000,_#0f1442_94%)]')).toBe(true);
+    expect(classes.has('absolute')).toBe(true);
+    expect(classes.has('bottom-[0]')).toBe(true);
+    expect(classes.has('inset-[auto_0_0]')).toBe(true);
     expect(classes.has('z-2')).toBe(true);
   });
 
-  test('extracts ins- classes with % character', () => {
-    const html = '<div class="ins-auto-0%-0%"></div>';
+  test('extracts responsive variant classes', () => {
+    const html = '<div class="p-[40px] tablet:p-[24px] mobile:hidden"></div>';
     const classes = extractUtilityClassesFromHTML(html);
-    expect(classes.has('ins-auto-0%-0%')).toBe(true);
+    expect(classes.has('p-[40px]')).toBe(true);
+    expect(classes.has('tablet:p-[24px]')).toBe(true);
+    expect(classes.has('mobile:hidden')).toBe(true);
   });
 
-  test('extracts bgi- classes with % character', () => {
-    const html = '<div class="bgi-linear-gradient(#0000,-#0f1442-94%)"></div>';
+  test('extracts arbitrary-property classes', () => {
+    const html = '<div class="[text-overflow:ellipsis]"></div>';
     const classes = extractUtilityClassesFromHTML(html);
-    expect(classes.has('bgi-linear-gradient(#0000,-#0f1442-94%)')).toBe(true);
+    expect(classes.has('[text-overflow:ellipsis]')).toBe(true);
   });
 
-  test('extracts l- (left) classes correctly without treating as responsive prefix', () => {
-    const html = '<div class="l-10px l-auto l-0"></div>';
+  test('does not extract non-utility authored classes', () => {
+    const html = '<div class="nav-open text-wrapper c_hero_title m_label_1abc"></div>';
     const classes = extractUtilityClassesFromHTML(html);
-    expect(classes.has('l-10px')).toBe(true);
-    expect(classes.has('l-auto')).toBe(true);
-    expect(classes.has('l-0')).toBe(true);
+    expect(classes.size).toBe(0);
   });
 });
 
 describe('generateUtilityCSS end-to-end', () => {
-  test('generates CSS for ins- classes from HTML', () => {
-    const html = '<div class="ins-auto-0-0"></div>';
+  test('generates CSS for inset classes from HTML', () => {
+    const html = '<div class="inset-[auto_0_0]"></div>';
     const classes = extractUtilityClassesFromHTML(html);
     const css = generateUtilityCSS(classes);
     expect(css).toContain('inset: auto 0 0');
   });
 
-  test('generates CSS for bgi- classes from HTML', () => {
-    const html = '<div class="bgi-linear-gradient(#000,-#fff)"></div>';
+  test('generates CSS for background-image classes from HTML', () => {
+    const html = '<div class="bg-[linear-gradient(#000,_#fff)]"></div>';
     const classes = extractUtilityClassesFromHTML(html);
     const css = generateUtilityCSS(classes);
     expect(css).toContain('background-image: linear-gradient(#000, #fff)');
   });
 
-  test('generates CSS for l- (left) classes from HTML', () => {
-    const html = '<div class="l-10px l-auto l-0"></div>';
+  test('generates CSS for left classes from HTML', () => {
+    const html = '<div class="left-[10px] left-auto left-[0]"></div>';
     const classes = extractUtilityClassesFromHTML(html);
     const css = generateUtilityCSS(classes);
     expect(css).toContain('left: 10px');
     expect(css).toContain('left: auto');
     expect(css).toContain('left: 0');
   });
+
+  test('generates @media rules for responsive variant classes', () => {
+    const css = generateUtilityCSS(new Set(['p-[40px]', 'tablet:p-[24px]', 'mobile:p-[12px]']));
+    expect(css).toContain('.p-\\[40px\\] { padding: 40px; }');
+    expect(css).toContain('@media (max-width: 1024px)');
+    expect(css).toContain('.tablet\\:p-\\[24px\\] { padding: 24px; }');
+    expect(css).toContain('@media (max-width: 540px)');
+    expect(css).toContain('.mobile\\:p-\\[12px\\] { padding: 12px; }');
+  });
+
+  test('auto-responsive @media keeps shorthand BEFORE longhand so margin-bottom survives', () => {
+    // A centered heading: margin:auto (centering) + marginBottom (spacing). The classes can
+    // arrive in either order; the longhand must win in EVERY breakpoint block (equal
+    // specificity ⇒ source order), so margin:auto can't reset margin-bottom on tablet.
+    const scales: ResponsiveScales = {
+      enabled: true,
+      mode: 'breakpoints',
+      baseReference: 16,
+      margin: { tablet: 0.7, mobile: 0.45 },
+    };
+    // Insertion order with the longhand FIRST — the bug only manifests when the shorthand
+    // would otherwise be emitted after it inside @media.
+    const css = generateUtilityCSS(new Set(['mb-[24px]', 'm-auto']), DEFAULT_BREAKPOINTS, scales);
+    const tabletStart = css.indexOf('@media (max-width: 1024px)');
+    const tabletBlock = css.slice(tabletStart, css.indexOf('}\n}', tabletStart) + 3);
+    const posShorthand = tabletBlock.indexOf('.m-auto');
+    const posLonghand = tabletBlock.indexOf('.mb-\\[24px\\]');
+    expect(posShorthand).toBeGreaterThanOrEqual(0);
+    expect(posLonghand).toBeGreaterThan(posShorthand); // shorthand precedes longhand → mb wins
+  });
 });
 
 describe('cssGeneration', () => {
   describe('generateRuleForClass', () => {
-    test('border-top generates only width and style (no color)', () => {
-      const rule = generateRuleForClass('bt-1px-solid');
+    test('border-top generates width and style longhands', () => {
+      const rule = generateRuleForClass('border-t-[1px_solid]');
       expect(rule).toBe('border-top-width: 1px; border-top-style: solid;');
     });
 
-    test('border-bottom generates only width and style (no color)', () => {
-      const rule = generateRuleForClass('bb-2px-dashed');
+    test('border-bottom generates width and style longhands', () => {
+      const rule = generateRuleForClass('border-b-[2px_dashed]');
       expect(rule).toBe('border-bottom-width: 2px; border-bottom-style: dashed;');
     });
 
-    test('border-left generates only width and style (no color)', () => {
-      const rule = generateRuleForClass('bl-1px-dotted');
+    test('border-left generates width and style longhands', () => {
+      const rule = generateRuleForClass('border-l-[1px_dotted]');
       expect(rule).toBe('border-left-width: 1px; border-left-style: dotted;');
     });
 
-    test('border-right generates only width and style (no color)', () => {
-      const rule = generateRuleForClass('border-r-3px-solid');
+    test('border-right generates width and style longhands', () => {
+      const rule = generateRuleForClass('border-r-[3px_solid]');
       expect(rule).toBe('border-right-width: 3px; border-right-style: solid;');
     });
 
-    test('border (full) still includes color', () => {
-      const rule = generateRuleForClass('b-1px-solid-primary');
+    test('border side with color emits color as a longhand too', () => {
+      const rule = generateRuleForClass('border-t-[1px_solid_red]');
+      expect(rule).toBe('border-top-width: 1px; border-top-style: solid; border-top-color: red;');
+    });
+
+    test('border (full shorthand) still includes color', () => {
+      const rule = generateRuleForClass('border-[1px_solid_var(--primary)]');
       expect(rule).toBe('border: 1px solid var(--primary);');
     });
 
     test('border-color with named CSS color outputs directly', () => {
-      const rule = generateRuleForClass('bc-red');
+      const rule = generateRuleForClass('border-[red]');
       expect(rule).toBe('border-color: red;');
     });
 
     test('border-color with variable uses var()', () => {
-      const rule = generateRuleForClass('bc-primary');
+      const rule = generateRuleForClass('border-(--primary)');
       expect(rule).toBe('border-color: var(--primary);');
     });
+
+    test('border-color with a SPACED color function stays a longhand (not the border shorthand)', () => {
+      // Regression: `rgba(0, 0, 0, 0)` carries spaces INSIDE the parens. The old guard
+      // (`!value.includes(' ')`) misread it as a `border` shorthand, so a transparent
+      // badge border collapsed into `border: rgba(...)` and stopped overriding the
+      // `border: 1px solid` width/style — a dark currentColor border leaked through.
+      expect(generateRuleForClass('border-[rgba(0,_0,_0,_0)]')).toBe('border-color: rgba(0, 0, 0, 0);');
+      expect(generateRuleForClass('border-[rgb(0_0_0_/_50%)]')).toBe('border-color: rgb(0 0 0 / 50%);');
+    });
+
+    test('transparent border-color sorts AFTER the border shorthand so it always wins', () => {
+      // The two classes target distinct properties (border vs border-color), so the longhand
+      // must follow the shorthand in source order regardless of which was collected first.
+      const css = generateUtilityCSS(
+        new Set(['border-[rgba(0,_0,_0,_0)]', 'border-[1px_solid]']),
+        DEFAULT_BREAKPOINTS,
+        { enabled: false } as ResponsiveScales,
+      );
+      const posShorthand = css.indexOf('border: 1px solid;');
+      const posColor = css.indexOf('border-color: rgba(0, 0, 0, 0);');
+      expect(posShorthand).toBeGreaterThanOrEqual(0);
+      expect(posColor).toBeGreaterThan(posShorthand);
+    });
   });
 
   describe('CSS named colors vs variables', () => {
     test('color with named color outputs directly', () => {
-      expect(generateRuleForClass('c-red')).toBe('color: red;');
-      expect(generateRuleForClass('c-blue')).toBe('color: blue;');
-      expect(generateRuleForClass('c-transparent')).toBe('color: transparent;');
+      expect(generateRuleForClass('text-[red]')).toBe('color: red;');
+      expect(generateRuleForClass('text-[blue]')).toBe('color: blue;');
+      expect(generateRuleForClass('text-transparent')).toBe('color: transparent;');
     });
 
     test('background-color with named color outputs directly', () => {
-      expect(generateRuleForClass('bgc-green')).toBe('background-color: green;');
-      expect(generateRuleForClass('bgc-white')).toBe('background-color: white;');
+      expect(generateRuleForClass('bg-[green]')).toBe('background-color: green;');
+      expect(generateRuleForClass('bg-[white]')).toBe('background-color: white;');
+    });
+
+    test('color with variable shorthand uses var()', () => {
+      expect(generateRuleForClass('text-(--primary)')).toBe('color: var(--primary);');
+      expect(generateRuleForClass('text-(--text)')).toBe('color: var(--text);');
+      expect(generateRuleForClass('bg-(--background)')).toBe('background-color: var(--background);');
     });
 
-    test('color with variable name still uses var()', () => {
-      expect(generateRuleForClass('c-primary')).toBe('color: var(--primary);');
-      expect(generateRuleForClass('c-text')).toBe('color: var(--text);');
-      expect(generateRuleForClass('bgc-background')).toBe('background-color: var(--background);');
+    test('font-size variable with length hint', () => {
+      expect(generateRuleForClass('text-(length:--font-size-lg)')).toBe('font-size: var(--font-size-lg);');
     });
   });
 
-  describe('display (d-) prefix for non-special values', () => {
-    test('d-contents generates display: contents', () => {
-      expect(generateRuleForClass('d-contents')).toBe('display: contents;');
+  describe('display static utilities', () => {
+    test('flex generates display: flex', () => {
+      expect(generateRuleForClass('flex')).toBe('display: flex;');
+    });
+
+    test('hidden generates display: none', () => {
+      expect(generateRuleForClass('hidden')).toBe('display: none;');
+    });
+
+    test('contents generates display: contents', () => {
+      expect(generateRuleForClass('contents')).toBe('display: contents;');
     });
 
-    test('d-flow-root generates display: flow-root', () => {
-      expect(generateRuleForClass('d-flow-root')).toBe('display: flow-root;');
+    test('flow-root generates display: flow-root', () => {
+      expect(generateRuleForClass('flow-root')).toBe('display: flow-root;');
     });
 
-    test('d-table generates display: table', () => {
-      expect(generateRuleForClass('d-table')).toBe('display: table;');
+    test('table generates display: table', () => {
+      expect(generateRuleForClass('table')).toBe('display: table;');
     });
   });
 
-  describe('bc- and bt- combination', () => {
-    test('bc- controls color independently from bt-', () => {
-      // bt- should NOT set color, allowing bc- to control it
-      const btRule = generateRuleForClass('bt-1px-solid');
-      const bcRule = generateRuleForClass('bc-primary');
+  describe('border-color and border-side combination', () => {
+    test('border color class controls color independently from side class', () => {
+      // border-t- should NOT set color when absent, allowing border-(--x) to control it
+      const sideRule = generateRuleForClass('border-t-[1px_solid]');
+      const colorRule = generateRuleForClass('border-(--primary)');
 
-      // bt- should only have width and style
-      expect(btRule).not.toContain('color');
-      expect(btRule).toContain('border-top-width');
-      expect(btRule).toContain('border-top-style');
+      expect(sideRule).not.toContain('color');
+      expect(sideRule).toContain('border-top-width');
+      expect(sideRule).toContain('border-top-style');
 
-      // bc- should set the color
-      expect(bcRule).toContain('border-color');
+      expect(colorRule).toContain('border-color');
     });
   });
 
-  describe('inset (ins) prefix', () => {
-    test('ins-0 generates correct CSS', () => {
-      expect(generateRuleForClass('ins-0')).toBe('inset: 0;');
+  describe('inset root', () => {
+    test('inset-[0] generates correct CSS', () => {
+      expect(generateRuleForClass('inset-[0]')).toBe('inset: 0;');
     });
 
-    test('ins-auto generates correct CSS', () => {
-      expect(generateRuleForClass('ins-auto')).toBe('inset: auto;');
+    test('inset-auto generates correct CSS', () => {
+      expect(generateRuleForClass('inset-auto')).toBe('inset: auto;');
     });
 
-    test('ins-auto-0-0 generates correct CSS with space-separated values', () => {
-      expect(generateRuleForClass('ins-auto-0-0')).toBe('inset: auto 0 0;');
+    test('inset-[auto_0_0] generates correct CSS with space-separated values', () => {
+      expect(generateRuleForClass('inset-[auto_0_0]')).toBe('inset: auto 0 0;');
     });
 
-    test('ins-0-0-auto-0 generates correct CSS', () => {
-      expect(generateRuleForClass('ins-0-0-auto-0')).toBe('inset: 0 0 auto 0;');
+    test('inset-[0_0_auto_0] generates correct CSS', () => {
+      expect(generateRuleForClass('inset-[0_0_auto_0]')).toBe('inset: 0 0 auto 0;');
     });
   });
 
-  describe('backgroundImage (bgi) prefix', () => {
-    test('bgi-linear-gradient generates correct CSS', () => {
-      // Simple gradient: linear-gradient(#000, #fff)
-      // Encoded as: bgi-linear-gradient(#000,-#fff)
-      expect(generateRuleForClass('bgi-linear-gradient(#000,-#fff)')).toBe('background-image: linear-gradient(#000, #fff);');
+  describe('background-image via bg root', () => {
+    test('bg-[linear-gradient(…)] generates background-image', () => {
+      expect(generateRuleForClass('bg-[linear-gradient(#000,_#fff)]')).toBe(
+        'background-image: linear-gradient(#000, #fff);',
+      );
+    });
+
+    test('bg-[linear-gradient(…)] with color stop generates background-image', () => {
+      expect(generateRuleForClass('bg-[linear-gradient(#0000,_#0f1442_94%)]')).toBe(
+        'background-image: linear-gradient(#0000, #0f1442 94%);',
+      );
     });
 
-    test('bgi-linear-gradient with color stop generates correct CSS', () => {
-      // Gradient with stop: linear-gradient(#0000, #0f1442 94%)
-      // Encoded as: bgi-linear-gradient(#0000,-#0f1442-94p)
-      expect(generateRuleForClass('bgi-linear-gradient(#0000,-#0f1442-94p)')).toBe('background-image: linear-gradient(#0000, #0f1442 94%);');
+    test('bg-[url(…)] generates background-image and preserves the url', () => {
+      expect(generateRuleForClass('bg-[url(/image.jpg)]')).toBe('background-image: url(/image.jpg);');
     });
 
-    test('bgi-url generates correct CSS', () => {
-      expect(generateRuleForClass('bgi-url(/image.jpg)')).toBe('background-image: url(/image.jpg);');
+    test('underscores inside url() are preserved', () => {
+      expect(generateRuleForClass('bg-[url(/images/hero_bg.png)]')).toBe('background-image: url(/images/hero_bg.png);');
+    });
+  });
+
+  describe('multi-property axis roots', () => {
+    test('px-[16px] generates left and right padding', () => {
+      expect(generateRuleForClass('px-[16px]')).toBe('padding-left: 16px; padding-right: 16px;');
+    });
+
+    test('my-[8px] generates top and bottom margin', () => {
+      expect(generateRuleForClass('my-[8px]')).toBe('margin-top: 8px; margin-bottom: 8px;');
+    });
+
+    test('mx-auto centers horizontally', () => {
+      expect(generateRuleForClass('mx-auto')).toBe('margin-left: auto; margin-right: auto;');
     });
   });
 
   describe('escapeCSSClassName', () => {
-    test('class names with slash are escaped in CSS selectors', () => {
-      // If a class with / somehow gets through, it should be escaped in the CSS output
-      const classes = new Set(['ar-1/1']);
+    test('bracket/slash/colon characters are escaped in CSS selectors', () => {
+      const classes = new Set(['aspect-[1/1]', 'tablet:w-[50%]']);
       const css = generateUtilityCSS(classes);
-      expect(css).toContain('ar-1\\/1');
-      expect(css).not.toContain('.ar-1/1 ');
+      expect(css).toContain('.aspect-\\[1\\/1\\]');
+      expect(css).toContain('.tablet\\:w-\\[50\\%\\]');
+      expect(css).not.toContain('.aspect-[1/1] ');
     });
   });
 
   describe('style presets', () => {
     test('shadow presets generate correct CSS', () => {
-      expect(generateRuleForClass('sh-0')).toBe('box-shadow: none;');
-      expect(generateRuleForClass('sh-1')).toBe('box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);');
-      expect(generateRuleForClass('sh-2')).toBe('box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);');
-      expect(generateRuleForClass('sh-3')).toBe('box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);');
-      expect(generateRuleForClass('sh-4')).toBe('box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);');
+      expect(generateRuleForClass('shadow-0')).toBe('box-shadow: none;');
+      expect(generateRuleForClass('shadow-1')).toBe('box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);');
+      expect(generateRuleForClass('shadow-2')).toBe('box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);');
+      expect(generateRuleForClass('shadow-3')).toBe('box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);');
+      expect(generateRuleForClass('shadow-4')).toBe('box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);');
     });
 
     test('gradient presets generate correct CSS', () => {
-      expect(generateRuleForClass('gr-1')).toBe('background: linear-gradient(90deg, rgba(10,22,40,0.85) 0%, rgba(10,22,40,0.2) 100%);');
-      expect(generateRuleForClass('gr-2')).toBe('background: linear-gradient(0deg, #a9e8fd, #00aee8 25%, #0f1335 72%);');
+      expect(generateRuleForClass('bg-gradient-1')).toBe(
+        'background: linear-gradient(90deg, rgba(10,22,40,0.85) 0%, rgba(10,22,40,0.2) 100%);',
+      );
+      expect(generateRuleForClass('bg-gradient-2')).toBe(
+        'background: linear-gradient(0deg, #a9e8fd, #00aee8 25%, #0f1335 72%);',
+      );
     });
 
     test('border presets generate correct CSS', () => {
-      expect(generateRuleForClass('bd-0')).toBe('border: 1px solid var(--border);');
-      expect(generateRuleForClass('bd-1')).toBe('border: 1px solid var(--border-light);');
+      expect(generateRuleForClass('border-preset-0')).toBe('border: 1px solid var(--border);');
+      expect(generateRuleForClass('border-preset-1')).toBe('border: 1px solid var(--border-light);');
+    });
+  });
+
+  describe('Tailwind-style keyword and numeric utilities', () => {
+    test('size keywords', () => {
+      expect(generateRuleForClass('w-full')).toBe('width: 100%;');
+      expect(generateRuleForClass('h-screen')).toBe('height: 100vh;');
+      expect(generateRuleForClass('max-w-full')).toBe('max-width: 100%;');
+      expect(generateRuleForClass('rounded-full')).toBe('border-radius: 9999px;');
+    });
+
+    test('bare numeric utilities', () => {
+      expect(generateRuleForClass('z-10')).toBe('z-index: 10;');
+      expect(generateRuleForClass('order-2')).toBe('order: 2;');
+      expect(generateRuleForClass('opacity-50')).toBe('opacity: 0.5;');
+    });
+
+    test('static flexbox utilities', () => {
+      expect(generateRuleForClass('justify-center')).toBe('justify-content: center;');
+      expect(generateRuleForClass('items-center')).toBe('align-items: center;');
+      expect(generateRuleForClass('flex-col')).toBe('flex-direction: column;');
+      expect(generateRuleForClass('grow')).toBe('flex-grow: 1;');
+    });
+
+    test('arbitrary-property classes', () => {
+      expect(generateRuleForClass('[text-overflow:ellipsis]')).toBe('text-overflow: ellipsis;');
+      expect(generateRuleForClass('[clip-path:circle(50%)]')).toBe('clip-path: circle(50%);');
     });
   });
 });
 
 describe('generateSingleClassCSS - responsive classes', () => {
   test('generates correct media query for tablet-prefixed class', () => {
-    const css = generateSingleClassCSS('t-fs-132px', DEFAULT_BREAKPOINTS);
+    const css = generateSingleClassCSS('tablet:text-[132px]', DEFAULT_BREAKPOINTS);
     expect(css).toContain('@media (max-width: 1024px)');
     expect(css).toContain('font-size: 132px');
-    expect(css).toContain('.t-fs-132px');
+    expect(css).toContain('.tablet\\:text-\\[132px\\]');
   });
 
   test('generates correct media query for mobile-prefixed class', () => {
-    const css = generateSingleClassCSS('mob-fs-24px', DEFAULT_BREAKPOINTS);
+    const css = generateSingleClassCSS('mobile:text-[24px]', DEFAULT_BREAKPOINTS);
     expect(css).toContain('@media (max-width: 540px)');
     expect(css).toContain('font-size: 24px');
-    expect(css).toContain('.mob-fs-24px');
+    expect(css).toContain('.mobile\\:text-\\[24px\\]');
   });
 
   test('generates base rule for non-prefixed class', () => {
-    const css = generateSingleClassCSS('fs-48px', DEFAULT_BREAKPOINTS);
-    expect(css).toContain('.fs-48px');
+    const css = generateSingleClassCSS('text-[48px]', DEFAULT_BREAKPOINTS);
+    expect(css).toContain('.text-\\[48px\\]');
     expect(css).toContain('font-size: 48px');
     expect(css).not.toContain('@media');
   });
@@ -265,9 +391,7 @@ describe('generateInteractiveCSS — auto-responsive scaling', () => {
   };
 
   test('flat interactive style gets scaled @media overrides', () => {
-    const styles: InteractiveStyles = [
-      { prefix: '', postfix: ':hover', style: { fontSize: '100px' } },
-    ];
+    const styles: InteractiveStyles = [{ prefix: '', postfix: ':hover', style: { fontSize: '100px' } }];
     const css = generateInteractiveCSS('c_heading_text', styles, DEFAULT_BREAKPOINTS, undefined, scalesEnabled);
     expect(css).toContain('.c_heading_text:hover { font-size: 100px; }');
     // tablet: 100 + (100-16)*(0.88-1) = 89.92 → 90
@@ -299,9 +423,7 @@ describe('generateInteractiveCSS — auto-responsive scaling', () => {
   });
 
   test('scaling disabled is a no-op', () => {
-    const styles: InteractiveStyles = [
-      { prefix: '', postfix: ':hover', style: { fontSize: '100px' } },
-    ];
+    const styles: InteractiveStyles = [{ prefix: '', postfix: ':hover', style: { fontSize: '100px' } }];
     const cssNoScales = generateInteractiveCSS('c_heading', styles, DEFAULT_BREAKPOINTS);
     const cssDisabled = generateInteractiveCSS('c_heading', styles, DEFAULT_BREAKPOINTS, undefined, {
       ...scalesEnabled,
@@ -323,11 +445,11 @@ describe('fluid mode — clamp() emission', () => {
   };
 
   test('generateUtilityCSS emits a single clamp() rule with no @media for auto-responsive class', () => {
-    const classes = new Set(['fs-32px']);
+    const classes = new Set(['text-[32px]']);
     const css = generateUtilityCSS(classes, DEFAULT_BREAKPOINTS, fluidScales);
     // mobile.breakpoint=540 is the smallest in DEFAULT_BREAKPOINTS, mobile scale=0.75
     // so MIN = 32 + (32-16)*(0.75-1) = 32 - 4 = 28; MAX = 32
-    expect(css).toContain('.fs-32px');
+    expect(css).toContain('.text-\\[32px\\]');
     expect(css).toContain('clamp(28px,');
     expect(css).toContain(', 32px)');
     expect(css).not.toContain('@media');
@@ -341,7 +463,7 @@ describe('fluid mode — clamp() emission', () => {
   });
 
   test('generateSingleClassCSS emits clamp() in fluid mode', () => {
-    const css = generateSingleClassCSS('p-40px', DEFAULT_BREAKPOINTS, fluidScales);
+    const css = generateSingleClassCSS('p-[40px]', DEFAULT_BREAKPOINTS, fluidScales);
     // mobile padding scale=0.5 → MIN = 40 + (40-16)*(0.5-1) = 40 - 12 = 28
     expect(css).toContain('clamp(28px,');
     expect(css).toContain(', 40px)');
@@ -350,7 +472,7 @@ describe('fluid mode — clamp() emission', () => {
 
   test('breakpoints mode (default when mode is undefined) keeps existing @media behavior', () => {
     const breakpointScales: ResponsiveScales = { ...fluidScales, mode: undefined };
-    const classes = new Set(['fs-32px']);
+    const classes = new Set(['text-[32px]']);
     const css = generateUtilityCSS(classes, DEFAULT_BREAKPOINTS, breakpointScales);
     expect(css).toContain('@media (max-width: 1024px)');
     expect(css).toContain('@media (max-width: 540px)');
@@ -358,9 +480,7 @@ describe('fluid mode — clamp() emission', () => {
   });
 
   test('generateInteractiveCSS encodes scaling as clamp() on base rule, no @media', () => {
-    const styles: InteractiveStyles = [
-      { prefix: '', postfix: ':hover', style: { fontSize: '100px' } },
-    ];
+    const styles: InteractiveStyles = [{ prefix: '', postfix: ':hover', style: { fontSize: '100px' } }];
     const css = generateInteractiveCSS('c_heading', styles, DEFAULT_BREAKPOINTS, undefined, fluidScales);
     // mobile fontSize scale=0.75 → MIN = 100 + (100-16)*(0.75-1) = 79
     expect(css).toContain('clamp(79px,');
@@ -373,7 +493,7 @@ describe('fluid mode — clamp() emission', () => {
       ...fluidScales,
       size: { tablet: 0.9, mobile: 0.75 },
     };
-    const classes = new Set(['mw-1200px']);
+    const classes = new Set(['max-w-[1200px]']);
     const css = generateUtilityCSS(classes, DEFAULT_BREAKPOINTS, fluidWithSize);
     // mobile size scale=0.75 → MIN = 1200 + (1200-16)*(0.75-1) = 1200 - 296 = 904
     expect(css).toContain('clamp(904px,');
@@ -399,27 +519,26 @@ describe('fluid mode — clamp() emission', () => {
     expect(css).toMatch(/@media \(max-width: 540px\) \{[^}]*font-size:\s*60px/);
   });
 
-  // Hash-fallback utility classes (e.g. `fs-h1glej9a` for `222.3px` — the `.`
-  // is illegal in CSS selectors, so utilityClassMapper generates a hashed name
+  // Hash-fallback utility classes (e.g. `text-h1glej9a` for a value that can't
+  // be encoded in a class name — utilityClassMapper generates a hashed name
   // and stores the real value in styleValueRegistry). The scaling pipeline
-  // previously bailed on these because extractPropertyAndValue returns null
-  // for hashed classes. resolveScalablePropertyValue now consults the registry.
+  // resolves them through the registry via resolveScalablePropertyValue.
   describe('hash-fallback classes', () => {
-    test('fluid mode: hashed fs- class with px value gets clamp()', () => {
+    test('fluid mode: hashed text- class with px value gets clamp()', () => {
       clearRegistry();
-      registerStyleValue('fs-h1glej9a', '222.3px');
-      const css = generateUtilityCSS(new Set(['fs-h1glej9a']), DEFAULT_BREAKPOINTS, fluidScales);
+      registerStyleValue('text-h1glej9a', '222.3px');
+      const css = generateUtilityCSS(new Set(['text-h1glej9a']), DEFAULT_BREAKPOINTS, fluidScales);
       // mobile fontSize scale=0.75, baseRef=16
       // MIN = 222.3 + (222.3 - 16)*(0.75 - 1) = 222.3 - 51.575 = 170.725 → round 171
-      expect(css).toMatch(/\.fs-h1glej9a\s*\{\s*font-size:\s*clamp\(171px,/);
+      expect(css).toMatch(/\.text-h1glej9a\s*\{\s*font-size:\s*clamp\(171px,/);
       expect(css).toContain(', 222.3px)');
       expect(css).not.toContain('@media');
     });
 
     test('fluid mode: hashed class at baseReference renders plain (MIN===MAX, no clamp)', () => {
       clearRegistry();
-      registerStyleValue('fs-hatref', '16px');
-      const css = generateUtilityCSS(new Set(['fs-hatref']), DEFAULT_BREAKPOINTS, fluidScales);
+      registerStyleValue('text-hatref', '16px');
+      const css = generateUtilityCSS(new Set(['text-hatref']), DEFAULT_BREAKPOINTS, fluidScales);
       // 16 === baseReference → calculateResponsiveValue returns 16 → MIN===MAX → no clamp
       expect(css).toContain('font-size: 16px');
       expect(css).not.toContain('clamp(');
@@ -427,8 +546,8 @@ describe('fluid mode — clamp() emission', () => {
 
     test('fluid mode: hashed class with fractional px value above baseReference clamps with rounded MIN', () => {
       clearRegistry();
-      registerStyleValue('fs-hfrac', '14.4px');
-      const css = generateUtilityCSS(new Set(['fs-hfrac']), DEFAULT_BREAKPOINTS, fluidScales);
+      registerStyleValue('text-hfrac', '14.4px');
+      const css = generateUtilityCSS(new Set(['text-hfrac']), DEFAULT_BREAKPOINTS, fluidScales);
       // 14.4 < baseRef (16) → calculateResponsiveValue floors to round(14.4) = 14
       // MIN=14, MAX=14.4 → small clamp emitted
       expect(css).toMatch(/font-size:\s*clamp\(14px,/);
@@ -460,8 +579,8 @@ describe('fluid mode — clamp() emission', () => {
 
     test('generateSingleClassCSS handles hashed class in fluid mode', () => {
       clearRegistry();
-      registerStyleValue('fs-htest1', '100px');
-      const css = generateSingleClassCSS('fs-htest1', DEFAULT_BREAKPOINTS, fluidScales);
+      registerStyleValue('text-htest1', '100px');
+      const css = generateSingleClassCSS('text-htest1', DEFAULT_BREAKPOINTS, fluidScales);
       // mobile fontSize 0.75 → MIN = 100 + (100-16)*(0.75-1) = 79
       expect(css).toContain('clamp(79px,');
       expect(css).toContain(', 100px)');
@@ -512,7 +631,7 @@ describe('applyContainerPattern', () => {
   test('explicit marginLeft is overwritten with auto (per spec)', () => {
     const result = applyContainerPattern(
       { width: '1200px', maxWidth: '1200px', marginLeft: '0', marginRight: '12px' },
-      true
+      true,
     );
     expect(result.marginLeft).toBe('auto');
     expect(result.marginRight).toBe('auto');
@@ -521,7 +640,7 @@ describe('applyContainerPattern', () => {
   test('preserves unrelated properties (padding, font-size)', () => {
     const result = applyContainerPattern(
       { width: '1200px', maxWidth: '1200px', padding: '20px', fontSize: '16px' },
-      true
+      true,
     );
     expect(result.padding).toBe('20px');
     expect(result.fontSize).toBe('16px');
@@ -562,3 +681,25 @@ describe('generateInteractiveCSS — container pattern integration', () => {
     expect(css).toContain('max-width: 1200px');
   });
 });
+
+describe('styleObjectToCSS', () => {
+  test('kebab-cases properties and joins declarations', () => {
+    expect(styleObjectToCSS({ paddingTop: '10px', fontSize: 16 })).toBe('padding-top: 10px; font-size: 16');
+  });
+
+  test('wraps bare color tokens in var(); leaves hex/rgb/var/functions intact', () => {
+    expect(styleObjectToCSS({ backgroundColor: 'primary' })).toBe('background-color: var(--primary)');
+    expect(styleObjectToCSS({ color: '#fff' })).toBe('color: #fff');
+    expect(styleObjectToCSS({ borderColor: 'var(--accent)' })).toBe('border-color: var(--accent)');
+    expect(styleObjectToCSS({ color: 'rgb(0,0,0)' })).toBe('color: rgb(0,0,0)');
+  });
+
+  test('skips _mapping (binding) values — bound props yield empty/partial output', () => {
+    expect(styleObjectToCSS({ color: { _mapping: { prop: 'x' } } as never })).toBe('');
+    expect(styleObjectToCSS({ color: { _mapping: { prop: 'x' } } as never, padding: '4px' })).toBe('padding: 4px');
+  });
+
+  test('empty object yields an empty string', () => {
+    expect(styleObjectToCSS({})).toBe('');
+  });
+});