meno-core 1.1.0 → 1.1.1

package/lib/shared/utilityClassMapper.test.ts

@@ -9,6 +9,7 @@ import {
   styleHasMapping,
 } from './utilityClassMapper';
 import { getStyleValue, clearRegistry } from './styleValueRegistry';
+import { defaultTailwindThemeVariables } from './tailwindThemeScale';
 import type { ResponsiveScales } from './responsiveScaling';
 
 describe('utilityClassMapper', () => {
@@ -143,6 +144,19 @@ describe('utilityClassMapper', () => {
       expect(classes).toContain('grid-cols-[repeat(3,_1fr)]');
     });
 
+    test('emits compact grid-cols-N for the canonical Tailwind track scale', () => {
+      expect(stylesToClasses({ gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' })).toContain('grid-cols-3');
+      expect(stylesToClasses({ gridTemplateRows: 'repeat(2, minmax(0, 1fr))' })).toContain('grid-rows-2');
+      expect(stylesToClasses({ gridTemplateColumns: 'none' })).toContain('grid-cols-none');
+      expect(stylesToClasses({ gridTemplateColumns: 'subgrid' })).toContain('grid-cols-subgrid');
+    });
+
+    test('keeps non-canonical grid track values as arbitrary classes', () => {
+      // No compact Tailwind spelling → stays arbitrary (preserves prior behavior).
+      expect(stylesToClasses({ gridTemplateColumns: '1fr 1fr 1fr' })).toContain('grid-cols-[1fr_1fr_1fr]');
+      expect(stylesToClasses({ gridTemplateColumns: 'repeat(3, 1fr)' })).toContain('grid-cols-[repeat(3,_1fr)]');
+    });
+
     test('handles z-index Tailwind-style bare number', () => {
       const classes = stylesToClasses({ zIndex: 10 });
       expect(classes).toContain('z-10');
@@ -181,6 +195,140 @@ describe('utilityClassMapper', () => {
       expect(evenly).not.toContain('justify-end');
       expect(classToStyle('justify-evenly')).toEqual({ prop: 'justifyContent', value: 'space-evenly' });
     });
+
+    test('parses the Tailwind numeric grid scale (read side)', () => {
+      expect(classToStyle('grid-cols-3')).toEqual({
+        prop: 'gridTemplateColumns',
+        value: 'repeat(3, minmax(0, 1fr))',
+      });
+      expect(classToStyle('grid-rows-2')).toEqual({ prop: 'gridTemplateRows', value: 'repeat(2, minmax(0, 1fr))' });
+      expect(classToStyle('grid-cols-none')).toEqual({ prop: 'gridTemplateColumns', value: 'none' });
+      // Tailwind defines no `grid-cols-0` → left unrecognized.
+      expect(classToStyle('grid-cols-0')).toBeNull();
+    });
+
+    test('a responsive AI-authored grid round-trips through the breakpoint variants', () => {
+      const styles = classesToStyles(['grid-cols-3', 'tablet:grid-cols-2', 'mobile:grid-cols-1']);
+      expect(styles).toEqual({
+        base: { gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' },
+        tablet: { gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' },
+        mobile: { gridTemplateColumns: 'repeat(1, minmax(0, 1fr))' },
+      });
+    });
+  });
+
+  describe('Tailwind layout/transform extensions', () => {
+    test('fractional sizing → percentage', () => {
+      expect(classToStyle('w-1/2')).toEqual({ prop: 'width', value: '50%' });
+      expect(classToStyle('w-1/3')).toEqual({ prop: 'width', value: '33.333333%' });
+      expect(classToStyle('basis-1/2')).toEqual({ prop: 'flexBasis', value: '50%' });
+      expect(classToStyle('left-1/2')).toEqual({ prop: 'left', value: '50%' });
+    });
+
+    test('negative spacing/position via the leading-dash form', () => {
+      expect(classToStyle('-mt-4')).toEqual({ prop: 'marginTop', value: '-16px' });
+      expect(classToStyle('-top-4')).toEqual({ prop: 'top', value: '-16px' });
+      expect(classToStyle('-translate-y-1/2')).toEqual({ prop: 'translate', value: '0 -50%' });
+      // Non-negatable root → unrecognized rather than mis-parsed.
+      expect(classToStyle('-flex')).toBeNull();
+    });
+
+    test('grid placement (span / start / end)', () => {
+      expect(classToStyle('col-span-2')).toEqual({ prop: 'gridColumn', value: 'span 2 / span 2' });
+      expect(classToStyle('col-span-full')).toEqual({ prop: 'gridColumn', value: '1 / -1' });
+      expect(classToStyle('row-span-3')).toEqual({ prop: 'gridRow', value: 'span 3 / span 3' });
+      expect(classToStyle('col-start-2')).toEqual({ prop: 'gridColumnStart', value: '2' });
+      expect(classToStyle('row-end-4')).toEqual({ prop: 'gridRowEnd', value: '4' });
+    });
+
+    test('inset axes use logical properties', () => {
+      expect(classToStyle('inset-x-0')).toEqual({ prop: 'insetInline', value: '0px' });
+      expect(classToStyle('inset-y-4')).toEqual({ prop: 'insetBlock', value: '16px' });
+      expect(classToStyle('inset-x-auto')).toEqual({ prop: 'insetInline', value: 'auto' });
+    });
+
+    test('order keywords, aspect keywords', () => {
+      expect(classToStyle('order-first')).toEqual({ prop: 'order', value: '-9999' });
+      expect(classToStyle('order-last')).toEqual({ prop: 'order', value: '9999' });
+      expect(classToStyle('aspect-video')).toEqual({ prop: 'aspectRatio', value: '16 / 9' });
+      expect(classToStyle('aspect-square')).toEqual({ prop: 'aspectRatio', value: '1 / 1' });
+    });
+
+    test('size-* sets width and height and restores both on round-trip', () => {
+      expect(classesToStyles(['size-8'])).toEqual({ base: { width: '32px', height: '32px' } });
+      expect(classesToStyles(['size-full'])).toEqual({ base: { width: '100%', height: '100%' } });
+      // a plain w-* must NOT pull in height
+      expect(classesToStyles(['w-8'])).toEqual({ base: { width: '32px' } });
+    });
+
+    test('numeric line-height on the spacing scale', () => {
+      expect(classToStyle('leading-6')).toEqual({ prop: 'lineHeight', value: '24px' });
+    });
+
+    test('individual transforms', () => {
+      expect(classToStyle('scale-105')).toEqual({ prop: 'scale', value: '1.05' });
+      expect(classToStyle('rotate-45')).toEqual({ prop: 'rotate', value: '45deg' });
+      expect(classToStyle('-rotate-3')).toEqual({ prop: 'rotate', value: '-3deg' });
+      expect(classToStyle('translate-x-2')).toEqual({ prop: 'translate', value: '8px' });
+      expect(classToStyle('translate-y-4')).toEqual({ prop: 'translate', value: '0 16px' });
+    });
+
+    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' });
+      expect(classToStyle('ease-in-out')).toEqual({
+        prop: 'transitionTimingFunction',
+        value: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      });
+      // `transition-all` carries the default timing so it animates standalone.
+      expect(classToStyle('transition-all')).toEqual({
+        prop: 'transition',
+        value: 'all 150ms cubic-bezier(0.4, 0, 0.2, 1)',
+      });
+    });
+  });
+
+  describe('Tailwind named scales → var(--token)', () => {
+    test('named scales resolve to a plain variable reference (no baked default)', () => {
+      expect(classToStyle('text-lg')).toEqual({ prop: 'fontSize', value: 'var(--text-lg)' });
+      expect(classToStyle('font-semibold')).toEqual({ prop: 'fontWeight', value: 'var(--font-weight-semibold)' });
+      expect(classToStyle('rounded-md')).toEqual({ prop: 'borderRadius', value: 'var(--radius-md)' });
+      expect(classToStyle('max-w-md')).toEqual({ prop: 'maxWidth', value: 'var(--container-md)' });
+      expect(classToStyle('leading-tight')).toEqual({ prop: 'lineHeight', value: 'var(--leading-tight)' });
+      // bare `rounded` / `shadow` (no suffix) map to the DEFAULT token.
+      expect(classToStyle('rounded')).toEqual({ prop: 'borderRadius', value: 'var(--radius)' });
+    });
+
+    test('existing static/keyword/preset meanings are preserved (not turned into vars)', () => {
+      expect(classToStyle('text-center')).toEqual({ prop: 'textAlign', value: 'center' });
+      expect(classToStyle('font-bold')).toEqual({ prop: 'fontWeight', value: 'bold' });
+      expect(classToStyle('rounded-full')).toEqual({ prop: 'borderRadius', value: '9999px' });
+      expect(classToStyle('shadow-none')).toEqual({ prop: 'boxShadow', value: 'none' });
+    });
+
+    test('round-trips to the compact class; legacy fallback form still recognized', () => {
+      expect(stylesToClasses({ fontSize: 'var(--text-lg)' })).toEqual(['text-lg']);
+      expect(stylesToClasses({ boxShadow: 'var(--shadow-lg)' })).toEqual(['shadow-lg']);
+      // A legacy `var(--token, fallback)` value (e.g. authored by hand) still collapses to the class.
+      expect(stylesToClasses({ fontSize: 'var(--text-lg, 1.125rem)' })).toEqual(['text-lg']);
+      // A var() the table doesn't know stays a normal var-shorthand class, not a theme token.
+      expect(stylesToClasses({ fontSize: 'var(--my-custom)' })).toEqual(['text-(length:--my-custom)']);
+    });
+
+    test('seed-variable generator yields unique, grouped CSSVariables', () => {
+      const vars = defaultTailwindThemeVariables();
+      expect(vars.length).toBeGreaterThan(40);
+      const cssVars = vars.map((v) => v.cssVar);
+      expect(new Set(cssVars).size).toBe(cssVars.length); // no duplicate cssVars
+      expect(vars.find((v) => v.cssVar === '--text-lg')).toEqual({
+        name: 'Text LG',
+        cssVar: '--text-lg',
+        value: '1.125rem',
+        type: 'fontSize',
+        group: 'font-size',
+      });
+      expect(vars.find((v) => v.cssVar === '--font-weight-semibold')?.name).toBe('Font Weight Semibold');
+    });
   });
 
   describe('responsiveStylesToClasses', () => {

package/lib/shared/utilityClassMapper.ts

@@ -35,6 +35,7 @@ import {
   isBareColorTokenName,
 } from './utilityClassNames';
 import { registerStyleValue, registerDynamicStyle, getStyleValue, getDynamicStyle } from './styleValueRegistry';
+import { THEME_SCALE_BY_CSSVAR } from './tailwindThemeScale';
 import {
   SCALABLE_CSS_PROPERTIES,
   buildFluidClampWithExplicitMin,
@@ -99,6 +100,19 @@ function rootFormMisresolves(root: string, prop: string, value: string): boolean
 function propertyValueToClass(prop: string, value: string | number): string | null {
   let stringValue = String(value);
 
+  // Tailwind theme token: a `var(--token)` value (or a legacy `var(--token, …)` with fallback)
+  // whose token is a known Tailwind scale var (and whose property matches) emits the compact class —
+  // `var(--text-lg)` → `text-lg`. Runs before the fontFamily comma-split below (which would shred a
+  // multi-family `var()` fallback). The parser reconstructs the value from the class, so no registry
+  // entry is needed.
+  const varRef = stringValue.match(/^var\((--[\w-]+)(?:\s*,[\s\S]*)?\)$/);
+  if (varRef) {
+    const entry = THEME_SCALE_BY_CSSVAR.get(varRef[1] ?? '');
+    if (entry && entry.property === camelToKebab(prop)) {
+      return entry.className;
+    }
+  }
+
   // Strip outer quotes from fontFamily values (e.g. "Space Grotesk" → Space Grotesk)
   if (prop === 'fontFamily') {
     stringValue = stringValue
@@ -194,6 +208,20 @@ function propertyValueToClass(prop: string, value: string | number): string | nu
     }
   }
 
+  // Tailwind grid track scale: gridTemplateColumns "repeat(3, minmax(0, 1fr))" → grid-cols-3
+  // (and gridTemplateRows → grid-rows-N, plus the none/subgrid keywords). Keeps grid-cols-N that
+  // came in from hand/AI-authored class strings round-tripping to the compact form rather than
+  // expanding to grid-cols-[repeat(3,_minmax(0,_1fr))]. Other track values ("1fr 1fr 1fr",
+  // "repeat(3, 1fr)") have no compact Tailwind spelling and stay arbitrary.
+  if (!className && (root === 'grid-cols' || root === 'grid-rows')) {
+    const repeatMatch = stringValue.match(/^repeat\(\s*([1-9]\d*)\s*,\s*minmax\(\s*0\s*,\s*1fr\s*\)\s*\)$/);
+    if (repeatMatch) {
+      className = `${root}-${repeatMatch[1]}`;
+    } else if (stringValue === 'none' || stringValue === 'subgrid') {
+      className = `${root}-${stringValue}`;
+    }
+  }
+
   // CSS variables: var(--x) → root-(--x). The `font-*` root is shared by font-weight and
   // font-family and is disambiguated by value type — but a `var(--x)` value is ambiguous, so
   // weight/size vars carry a Tailwind data-type hint (`number:` / `length:`) the parser reads
@@ -513,6 +541,11 @@ export function classesToStyles(classes: string[], knownTokens?: ReadonlySet<str
         styles[breakpoint] = {};
       }
       styles[breakpoint]![styleEntry.prop] = styleEntry.value;
+      // `size-*` is width AND height (no CSS shorthand) — restore both so the editor doesn't
+      // drop height on the next save. classToStyle returns the width half; mirror it to height.
+      if (cleanClass.startsWith('size-') && styleEntry.prop === 'width') {
+        styles[breakpoint]!.height = styleEntry.value;
+      }
     }
   }
 

package/lib/shared/utilityClassNames.ts

@@ -26,8 +26,14 @@ import {
   SPACING_SCALE,
   SPACING_SCALE_ROOTS,
   COLOR_TOKEN_ROOTS,
+  FRACTION_ROOTS,
+  NEGATABLE_ROOTS,
+  EASE_TIMING,
+  TRANSITION_PROPERTY_VALUES,
+  TRANSITION_DEFAULT_TIMING,
 } from './utilityClassConfig';
 import { isCssNamedColor } from './cssNamedColors';
+import { THEME_SCALE_BY_CLASS, themeScaleValue } from './tailwindThemeScale';
 
 /** Class roots sorted longest-first so `border-t-…` wins over `border-…`. */
 export const SORTED_ROOTS: readonly string[] = Object.keys(prefixToCSSProperty).sort((a, b) => b.length - a.length);
@@ -341,6 +347,37 @@ export interface ParsedUtilityClass {
 
 const HASH_VALUE_RE = /^h[0-9a-z]+$/;
 
+/** Tailwind fraction → percentage (`1/2` → `50%`, `1/3` → `33.333333%`). Null when not `n/d`. */
+function resolveFraction(rest: string): string | null {
+  const m = rest.match(/^(\d+)\/(\d+)$/);
+  if (!m) return null;
+  const d = Number(m[2]);
+  if (d === 0) return null;
+  const pct = (Number(m[1]) / d) * 100;
+  return `${pct.toFixed(6).replace(/\.?0+$/, '')}%`;
+}
+
+/** Resolve a translate axis value: fraction, `full`, or a spacing-scale step. Null otherwise. */
+function resolveSpacingOrFraction(rest: string): string | null {
+  const frac = resolveFraction(rest);
+  if (frac != null) return frac;
+  if (rest === 'full') return '100%';
+  return SPACING_SCALE[rest] ?? null;
+}
+
+/**
+ * Negate a resolved value for the leading-`-` Tailwind form. Plain numeric/length/percentage
+ * tokens flip sign; `translate-y`'s `0 <y>` composite negates only the y token. Non-numeric values
+ * (keywords, var(), calc) aren't negatable → null (the class stays unrecognized).
+ */
+function negateCssValue(root: string, value: string): string | null {
+  if (root === 'translate-y') {
+    const m = value.match(/^0 (.+)$/);
+    return m ? `0 -${m[1]}` : null;
+  }
+  return /^\d/.test(value) ? `-${value}` : null;
+}
+
 /**
  * Parse a single (unprefixed) utility class name into its CSS property and
  * decoded value. Returns null for class names that aren't Meno utilities.
@@ -358,11 +395,43 @@ export function parseUtilityClass(className: string, knownTokens?: ReadonlySet<s
     return { property: camelToKebab(stat.prop), value: stat.value, root: null, kind: 'static' };
   }
 
+  // Bare `transition` enables Tailwind's default property set + 150ms ease curve.
+  if (className === 'transition') {
+    return {
+      property: 'transition',
+      value: `${TRANSITION_PROPERTY_VALUES['']} ${TRANSITION_DEFAULT_TIMING}`,
+      root: 'transition',
+      kind: 'keyword',
+    };
+  }
+
+  // Leading-`-` negative form (`-mt-4`, `-top-2`, `-translate-y-1/2`, `-rotate-3`): parse the
+  // positive class, then negate its value when the root is negatable. Not a negatable root or a
+  // non-numeric value → unrecognized (don't misread foreign `-foo` classes as utilities).
+  if (className.startsWith('-') && className.length > 1) {
+    const positive = parseUtilityClass(className.slice(1), knownTokens);
+    if (positive?.root && positive.value != null && NEGATABLE_ROOTS.has(positive.root)) {
+      const negated = negateCssValue(positive.root, positive.value);
+      if (negated != null) return { ...positive, value: negated };
+    }
+    return null;
+  }
+
   const preset = presetClassReverse[className];
   if (preset) {
     return { property: camelToKebab(preset.prop), value: preset.value, root: null, kind: 'preset' };
   }
 
+  // Tailwind named value scales (`text-lg`, `font-semibold`, `rounded-md`, `shadow-lg`, `max-w-md`,
+  // `leading-tight`, `tracking-wide`, `font-sans`, + bare `rounded`/`shadow`). These resolve to a
+  // plain `var(--token)` reference (no baked default — Meno is token-based): renders the project
+  // variable when defined, inert when not. Checked after static/preset so `text-center`,
+  // `font-bold`, `rounded-full`, `shadow-none`, `shadow-2` keep their existing meaning.
+  const themed = THEME_SCALE_BY_CLASS.get(className);
+  if (themed) {
+    return { property: themed.property, value: themeScaleValue(themed), root: themed.root, kind: 'var' };
+  }
+
   // Arbitrary property: [clip-path:circle(50%)], [background:linear-gradient(…)]
   const arbProp = className.match(/^\[([a-z-]+):(.+)\]$/);
   if (arbProp) {
@@ -422,6 +491,83 @@ function parseRootValue(root: string, rest: string, knownTokens?: ReadonlySet<st
     return { property: resolveRootProperty(root, rest), value: rest, root, kind: 'keyword' };
   }
 
+  // Tailwind grid track scale: `grid-cols-3` → `repeat(3, minmax(0, 1fr))`,
+  // `grid-rows-2` likewise, plus the `none` / `subgrid` keywords. Meno's own
+  // form is the arbitrary `grid-cols-[1fr_1fr_1fr]` (handled above); this
+  // additionally absorbs the bare Tailwind numeric scale that hand- and
+  // AI-authored class strings reach for. Tailwind only defines the positive
+  // integer scale, so `grid-cols-0` stays unrecognized.
+  if (root === 'grid-cols' || root === 'grid-rows') {
+    if (/^[1-9]\d*$/.test(rest)) {
+      const value = `repeat(${rest}, minmax(0, 1fr))`;
+      return { property: prefixToCSSProperty[root] ?? root, value, root, kind: 'numeric' };
+    }
+    if (rest === 'none' || rest === 'subgrid') {
+      return { property: prefixToCSSProperty[root] ?? root, value: rest, root, kind: 'keyword' };
+    }
+  }
+
+  // Grid placement: `col-span-2` → grid-column: span 2 / span 2; `col-span-full` → 1 / -1.
+  if (root === 'col-span' || root === 'row-span') {
+    const property = root === 'col-span' ? 'grid-column' : 'grid-row';
+    if (rest === 'full') return { property, value: '1 / -1', root, kind: 'keyword' };
+    if (/^[1-9]\d*$/.test(rest)) return { property, value: `span ${rest} / span ${rest}`, root, kind: 'numeric' };
+  }
+  // Grid line start/end: `col-start-2`, `col-end-3`, `row-start-1`, `row-end-4` (+ `auto`).
+  if (root === 'col-start' || root === 'col-end' || root === 'row-start' || root === 'row-end') {
+    const property = prefixToCSSProperty[root] ?? root;
+    if (rest === 'auto') return { property, value: 'auto', root, kind: 'keyword' };
+    if (/^-?[1-9]\d*$/.test(rest)) return { property, value: rest, root, kind: 'numeric' };
+  }
+
+  // Individual translate axis: `translate-x-4` → translate: 16px; `translate-y-1/2` → translate: 0 50%.
+  if (root === 'translate-x' || root === 'translate-y') {
+    const len = resolveSpacingOrFraction(rest);
+    if (len != null) {
+      const value = root === 'translate-x' ? len : `0 ${len}`;
+      return { property: 'translate', value, root, kind: 'numeric' };
+    }
+  }
+  // `scale-105` → scale: 1.05 (Tailwind's percentage-of-100 scale).
+  if (root === 'scale' && /^\d+$/.test(rest)) {
+    return { property: 'scale', value: String(Number(rest) / 100), root, kind: 'numeric' };
+  }
+  // `rotate-45` → rotate: 45deg (negatives via the leading-`-` form).
+  if (root === 'rotate' && /^\d+(\.\d+)?$/.test(rest)) {
+    return { property: 'rotate', value: `${rest}deg`, root, kind: 'numeric' };
+  }
+  // `duration-300` → transition-duration: 300ms; `delay-150` → transition-delay: 150ms.
+  if ((root === 'duration' || root === 'delay') && /^\d+$/.test(rest)) {
+    return { property: prefixToCSSProperty[root] ?? root, value: `${rest}ms`, root, kind: 'numeric' };
+  }
+  // `ease-in-out` → transition-timing-function: cubic-bezier(…).
+  if (root === 'ease') {
+    const timing = EASE_TIMING[rest];
+    if (timing) return { property: 'transition-timing-function', value: timing, root, kind: 'keyword' };
+  }
+  // `transition-all` / `transition-colors` / … → the `transition` shorthand (bare `transition`
+  // is handled in parseUtilityClass). A following `duration-*` / `ease-*` longhand still overrides.
+  if (root === 'transition') {
+    const props = TRANSITION_PROPERTY_VALUES[rest];
+    if (props !== undefined) {
+      return { property: 'transition', value: `${props} ${TRANSITION_DEFAULT_TIMING}`, root, kind: 'keyword' };
+    }
+  }
+
+  // Numeric line-height on the spacing scale: `leading-6` → 1.5rem (24px). Named leadings
+  // (`leading-tight`) resolve to a var() earlier; `leading-normal` stays the `normal` keyword.
+  if (root === 'leading') {
+    const scale = SPACING_SCALE[rest];
+    if (scale !== undefined) return { property: 'line-height', value: scale, root, kind: 'keyword' };
+  }
+
+  // Tailwind fractional values: `w-1/2` → 50%, `top-1/3` → 33.333333%, `basis-1/2` → 50%.
+  // (translate fractions are handled by the axis branch above.)
+  if (FRACTION_ROOTS.has(root)) {
+    const value = resolveFraction(rest);
+    if (value != null) return { property: resolveRootProperty(root, value), value, root, kind: 'numeric' };
+  }
+
   // Named spacing scale: p-4 → 16px, gap-6 → 24px (Tailwind's step table).
   if (SPACING_SCALE_ROOTS.has(root)) {
     const scaleVal = SPACING_SCALE[rest];

package/package.json

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