meno-core 1.1.4 → 1.1.5

package/lib/shared/utilityClassConfig.ts

@@ -259,6 +259,35 @@ export const propertyMap: Record<string, string> = {
   textShadow: 'text-shadow',
   filter: 'filter',
   backdropFilter: 'backdrop-filter',
+  mixBlendMode: 'mix-blend',
+  backgroundBlendMode: 'bg-blend',
+  willChange: 'will-change',
+  columns: 'columns',
+  overscrollBehavior: 'overscroll',
+  overscrollBehaviorX: 'overscroll-x',
+  overscrollBehaviorY: 'overscroll-y',
+  touchAction: 'touch',
+  breakAfter: 'break-after',
+  breakBefore: 'break-before',
+  breakInside: 'break-inside',
+  textUnderlineOffset: 'underline-offset',
+  textDecorationColor: 'decoration',
+  textDecorationThickness: 'decoration',
+  caretColor: 'caret',
+  fill: 'fill',
+  stroke: 'stroke',
+  strokeWidth: 'stroke',
+  borderSpacing: 'border-spacing',
+  scrollMargin: 'scroll-m',
+  scrollMarginTop: 'scroll-mt',
+  scrollMarginRight: 'scroll-mr',
+  scrollMarginBottom: 'scroll-mb',
+  scrollMarginLeft: 'scroll-ml',
+  scrollPadding: 'scroll-p',
+  scrollPaddingTop: 'scroll-pt',
+  scrollPaddingRight: 'scroll-pr',
+  scrollPaddingBottom: 'scroll-pb',
+  scrollPaddingLeft: 'scroll-pl',
 
   // Positioning
   top: 'top',
@@ -266,6 +295,8 @@ export const propertyMap: Record<string, string> = {
   bottom: 'bottom',
   left: 'left',
   inset: 'inset',
+  insetInlineStart: 'start',
+  insetInlineEnd: 'end',
   zIndex: 'z',
 
   // Grid Layout
@@ -394,6 +425,71 @@ export const prefixToCSSProperty: Record<string, string> = {
   'text-shadow': 'text-shadow',
   filter: 'filter',
   'backdrop-filter': 'backdrop-filter',
+  // Filter-function roots (value is wrapped in the function — see FILTER_FN_ROOTS +
+  // parseRootValue's filter branch). Kept here too so hash/dynamic property derivation
+  // and SORTED_ROOTS matching see them like any other root.
+  blur: 'filter',
+  brightness: 'filter',
+  contrast: 'filter',
+  saturate: 'filter',
+  grayscale: 'filter',
+  invert: 'filter',
+  sepia: 'filter',
+  'hue-rotate': 'filter',
+  'drop-shadow': 'filter',
+  'backdrop-blur': 'backdrop-filter',
+  'backdrop-brightness': 'backdrop-filter',
+  'backdrop-contrast': 'backdrop-filter',
+  'backdrop-saturate': 'backdrop-filter',
+  'backdrop-grayscale': 'backdrop-filter',
+  'backdrop-invert': 'backdrop-filter',
+  'backdrop-sepia': 'backdrop-filter',
+  'backdrop-hue-rotate': 'backdrop-filter',
+  'backdrop-opacity': 'backdrop-filter',
+  // Per-axis transforms (value composed into the axis slot — see parseRootValue)
+  'skew-x': 'transform',
+  'skew-y': 'transform',
+  'scale-x': 'scale',
+  'scale-y': 'scale',
+  // Side border-radius (two corners — expanded in generateRuleForClass / classesToStyles)
+  'rounded-t': 'border-top-left-radius',
+  'rounded-r': 'border-top-right-radius',
+  'rounded-b': 'border-bottom-left-radius',
+  'rounded-l': 'border-top-left-radius',
+  // Blend / misc keyword roots
+  'mix-blend': 'mix-blend-mode',
+  'bg-blend': 'background-blend-mode',
+  'will-change': 'will-change',
+  columns: 'columns',
+  overscroll: 'overscroll-behavior',
+  'overscroll-x': 'overscroll-behavior-x',
+  'overscroll-y': 'overscroll-behavior-y',
+  touch: 'touch-action',
+  'break-after': 'break-after',
+  'break-before': 'break-before',
+  'break-inside': 'break-inside',
+
+  // Text decoration & SVG (shared roots disambiguated by value type — see resolveRootProperty)
+  'underline-offset': 'text-underline-offset',
+  decoration: 'text-decoration-color',
+  caret: 'caret-color',
+  fill: 'fill',
+  stroke: 'stroke',
+
+  // Tables
+  'border-spacing': 'border-spacing',
+
+  // Scroll margin/padding (Tailwind spacing scale)
+  'scroll-m': 'scroll-margin',
+  'scroll-mt': 'scroll-margin-top',
+  'scroll-mr': 'scroll-margin-right',
+  'scroll-mb': 'scroll-margin-bottom',
+  'scroll-ml': 'scroll-margin-left',
+  'scroll-p': 'scroll-padding',
+  'scroll-pt': 'scroll-padding-top',
+  'scroll-pr': 'scroll-padding-right',
+  'scroll-pb': 'scroll-padding-bottom',
+  'scroll-pl': 'scroll-padding-left',
 
   // Positioning
   top: 'top',
@@ -403,6 +499,8 @@ export const prefixToCSSProperty: Record<string, string> = {
   inset: 'inset',
   'inset-x': 'inset-inline',
   'inset-y': 'inset-block',
+  start: 'inset-inline-start',
+  end: 'inset-inline-end',
   z: 'z-index',
 
   // Outline
@@ -418,6 +516,75 @@ export const prefixToCSSProperty: Record<string, string> = {
   object: 'object-position',
 };
 
+/**
+ * Tailwind filter-function utilities: the class value is an ARGUMENT to a CSS filter
+ * function, not the property value itself (`blur-[70px]` → `filter: blur(70px)`,
+ * `brightness-50` → `filter: brightness(0.5)`). `scale` describes how a bare numeric
+ * step converts to the argument (Tailwind's scale semantics): `ratio` = n/100
+ * (brightness-150 → 1.5), `percent` = n% (invert-25 → 25%), `deg` = ndeg
+ * (hue-rotate-90 → 90deg). Roots without `scale` (blur, drop-shadow) take only the
+ * arbitrary/var forms — their named steps are length/shadow theme values Meno
+ * deliberately doesn't bake in.
+ */
+export type FilterFnScale = 'ratio' | 'percent' | 'deg';
+export const FILTER_FN_ROOTS: Record<string, { property: string; fn: string; scale?: FilterFnScale }> = {
+  blur: { property: 'filter', fn: 'blur' },
+  brightness: { property: 'filter', fn: 'brightness', scale: 'ratio' },
+  contrast: { property: 'filter', fn: 'contrast', scale: 'ratio' },
+  saturate: { property: 'filter', fn: 'saturate', scale: 'ratio' },
+  grayscale: { property: 'filter', fn: 'grayscale', scale: 'percent' },
+  invert: { property: 'filter', fn: 'invert', scale: 'percent' },
+  sepia: { property: 'filter', fn: 'sepia', scale: 'percent' },
+  'hue-rotate': { property: 'filter', fn: 'hue-rotate', scale: 'deg' },
+  'drop-shadow': { property: 'filter', fn: 'drop-shadow' },
+  'backdrop-blur': { property: 'backdrop-filter', fn: 'blur' },
+  'backdrop-brightness': { property: 'backdrop-filter', fn: 'brightness', scale: 'ratio' },
+  'backdrop-contrast': { property: 'backdrop-filter', fn: 'contrast', scale: 'ratio' },
+  'backdrop-saturate': { property: 'backdrop-filter', fn: 'saturate', scale: 'ratio' },
+  'backdrop-grayscale': { property: 'backdrop-filter', fn: 'grayscale', scale: 'percent' },
+  'backdrop-invert': { property: 'backdrop-filter', fn: 'invert', scale: 'percent' },
+  'backdrop-sepia': { property: 'backdrop-filter', fn: 'sepia', scale: 'percent' },
+  'backdrop-hue-rotate': { property: 'backdrop-filter', fn: 'hue-rotate', scale: 'deg' },
+  'backdrop-opacity': { property: 'backdrop-filter', fn: 'opacity', scale: 'ratio' },
+};
+
+/** `<kebab property>|<fn>` → filter root, for the inverse mapper (`filter: brightness(0.5)` → `brightness-50`). */
+export const FILTER_ROOT_BY_PROP_FN: ReadonlyMap<string, string> = new Map(
+  Object.entries(FILTER_FN_ROOTS).map(([root, e]) => [`${e.property}|${e.fn}`, root]),
+);
+
+/** Convert a bare numeric step to the filter-function argument per the root's scale. */
+export function filterStepToArg(scale: FilterFnScale, step: string): string {
+  if (scale === 'ratio') return String(Number(step) / 100);
+  if (scale === 'percent') return `${step}%`;
+  return `${step}deg`;
+}
+
+/** Inverse of {@link filterStepToArg}: recover the numeric step from an argument, or null. */
+export function filterArgToStep(scale: FilterFnScale, arg: string): string | null {
+  if (scale === 'ratio') {
+    const m = arg.match(/^(\d+(?:\.\d+)?)$/);
+    if (!m) return null;
+    const step = Number(m[1]) * 100;
+    return Number.isInteger(step) ? String(step) : null;
+  }
+  const m = scale === 'percent' ? arg.match(/^(\d+)%$/) : arg.match(/^(\d+)deg$/);
+  return m ? (m[1] ?? null) : null;
+}
+
+/**
+ * Side border-radius roots (`rounded-t-lg`, `rounded-l-[8px]`) → their two corner
+ * longhands. CSS has no per-side radius shorthand, so the CSS generator emits both
+ * corners and `classesToStyles` mirrors the parsed first corner onto the second
+ * (like `size-*` does for width/height).
+ */
+export const ROUNDED_SIDE_CORNERS: Record<string, [string, string]> = {
+  'rounded-t': ['border-top-left-radius', 'border-top-right-radius'],
+  'rounded-r': ['border-top-right-radius', 'border-bottom-right-radius'],
+  'rounded-b': ['border-bottom-left-radius', 'border-bottom-right-radius'],
+  'rounded-l': ['border-top-left-radius', 'border-bottom-left-radius'],
+};
+
 /**
  * Static utilities: property → value → Tailwind class name.
  * These are emitted as-is (no brackets) and have fixed reverse mappings.
@@ -438,6 +605,14 @@ export const staticUtilities: Record<string, Record<string, string>> = {
     contents: 'contents',
     'flow-root': 'flow-root',
     'list-item': 'list-item',
+    'table-row': 'table-row',
+    'table-cell': 'table-cell',
+    'table-caption': 'table-caption',
+    'table-row-group': 'table-row-group',
+    'table-header-group': 'table-header-group',
+    'table-footer-group': 'table-footer-group',
+    'table-column': 'table-column',
+    'table-column-group': 'table-column-group',
   },
   flexDirection: {
     column: 'flex-col',
@@ -694,6 +869,7 @@ export const staticUtilities: Record<string, Record<string, string>> = {
   },
   transform: {
     none: 'transform-none',
+    'translateZ(0)': 'transform-gpu',
   },
   boxShadow: {
     none: 'shadow-none',
@@ -701,6 +877,176 @@ export const staticUtilities: Record<string, Record<string, string>> = {
   outline: {
     none: 'outline-none',
   },
+  outlineStyle: {
+    solid: 'outline-solid',
+    dashed: 'outline-dashed',
+    dotted: 'outline-dotted',
+    double: 'outline-double',
+  },
+  fontStyle: {
+    italic: 'italic',
+    normal: 'not-italic',
+  },
+  isolation: {
+    isolate: 'isolate',
+    auto: 'isolation-auto',
+  },
+  borderCollapse: {
+    collapse: 'border-collapse',
+    separate: 'border-separate',
+  },
+  tableLayout: {
+    auto: 'table-auto',
+    fixed: 'table-fixed',
+  },
+  appearance: {
+    none: 'appearance-none',
+    auto: 'appearance-auto',
+  },
+  fontVariantNumeric: {
+    'tabular-nums': 'tabular-nums',
+    normal: 'normal-nums',
+    ordinal: 'ordinal',
+    'slashed-zero': 'slashed-zero',
+    'lining-nums': 'lining-nums',
+    'oldstyle-nums': 'oldstyle-nums',
+    'proportional-nums': 'proportional-nums',
+    'diagonal-fractions': 'diagonal-fractions',
+    'stacked-fractions': 'stacked-fractions',
+  },
+  // Tailwind pairs snap-x/y/both with a separate strictness class composed via a CSS
+  // var; without var composition the common `snap-x snap-mandatory` intent collapses
+  // into the type class itself. `snap-proximity`/`snap-mandatory` alone stay foreign.
+  scrollSnapType: {
+    'x mandatory': 'snap-x',
+    'y mandatory': 'snap-y',
+    'both mandatory': 'snap-both',
+    none: 'snap-none',
+  },
+  scrollSnapAlign: {
+    start: 'snap-start',
+    center: 'snap-center',
+    end: 'snap-end',
+    none: 'snap-align-none',
+  },
+  // Bare filter-function switches (the 100% forms); numeric/arbitrary forms flow
+  // through FILTER_FN_ROOTS (`grayscale-50`, `invert-[0.3]`).
+  filter: {
+    'grayscale(100%)': 'grayscale',
+    'invert(100%)': 'invert',
+    'sepia(100%)': 'sepia',
+    none: 'filter-none',
+  },
+  backdropFilter: {
+    'grayscale(100%)': 'backdrop-grayscale',
+    'invert(100%)': 'backdrop-invert',
+    'sepia(100%)': 'backdrop-sepia',
+    none: 'backdrop-filter-none',
+  },
+  float: {
+    left: 'float-left',
+    right: 'float-right',
+    none: 'float-none',
+    'inline-start': 'float-start',
+    'inline-end': 'float-end',
+  },
+  clear: {
+    both: 'clear-both',
+    left: 'clear-left',
+    right: 'clear-right',
+    none: 'clear-none',
+  },
+  backgroundSize: {
+    cover: 'bg-cover',
+    contain: 'bg-contain',
+    auto: 'bg-auto',
+  },
+  backgroundAttachment: {
+    fixed: 'bg-fixed',
+    local: 'bg-local',
+    scroll: 'bg-scroll',
+  },
+  backgroundRepeat: {
+    'no-repeat': 'bg-no-repeat',
+    repeat: 'bg-repeat',
+    'repeat-x': 'bg-repeat-x',
+    'repeat-y': 'bg-repeat-y',
+    round: 'bg-repeat-round',
+    space: 'bg-repeat-space',
+  },
+  backgroundPosition: {
+    center: 'bg-center',
+    top: 'bg-top',
+    bottom: 'bg-bottom',
+    left: 'bg-left',
+    right: 'bg-right',
+    'left top': 'bg-left-top',
+    'left bottom': 'bg-left-bottom',
+    'right top': 'bg-right-top',
+    'right bottom': 'bg-right-bottom',
+  },
+  backgroundClip: {
+    'border-box': 'bg-clip-border',
+    'padding-box': 'bg-clip-padding',
+    'content-box': 'bg-clip-content',
+    text: 'bg-clip-text',
+  },
+  backgroundOrigin: {
+    'border-box': 'bg-origin-border',
+    'padding-box': 'bg-origin-padding',
+    'content-box': 'bg-origin-content',
+  },
+  textOverflow: {
+    ellipsis: 'text-ellipsis',
+    clip: 'text-clip',
+  },
+  // `text-nowrap` deliberately stays a whiteSpace alias (same rendering) — see staticClassAliases.
+  textWrap: {
+    wrap: 'text-wrap',
+    balance: 'text-balance',
+    pretty: 'text-pretty',
+  },
+  textDecorationStyle: {
+    solid: 'decoration-solid',
+    dashed: 'decoration-dashed',
+    dotted: 'decoration-dotted',
+    double: 'decoration-double',
+    wavy: 'decoration-wavy',
+  },
+  hyphens: {
+    auto: 'hyphens-auto',
+    none: 'hyphens-none',
+    manual: 'hyphens-manual',
+  },
+  content: {
+    none: 'content-none',
+  },
+  captionSide: {
+    top: 'caption-top',
+    bottom: 'caption-bottom',
+  },
+  animation: {
+    none: 'animate-none',
+  },
+  // SVG paint statics; token/arbitrary colors flow through the fill/stroke roots.
+  fill: {
+    currentColor: 'fill-current',
+    none: 'fill-none',
+  },
+  stroke: {
+    currentColor: 'stroke-current',
+    none: 'stroke-none',
+  },
+};
+
+/**
+ * Read-side aliases: Tailwind class names that map to a value whose CANONICAL Meno
+ * class is spelled differently (the forward mapper keeps emitting the canonical
+ * form). Merged into `staticUtilityReverse` below.
+ */
+const staticClassAliases: Record<string, { prop: string; value: string }> = {
+  'text-nowrap': { prop: 'whiteSpace', value: 'nowrap' }, // canonical: whitespace-nowrap
+  'break-words': { prop: 'overflowWrap', value: 'break-word' }, // canonical: wrap-break-word
 };
 
 /**
@@ -791,6 +1137,20 @@ export const SPACING_SCALE_ROOTS: Set<string> = new Set([
   'inset',
   'inset-x',
   'inset-y',
+  'start',
+  'end',
+  'indent',
+  'border-spacing',
+  'scroll-m',
+  'scroll-mt',
+  'scroll-mr',
+  'scroll-mb',
+  'scroll-ml',
+  'scroll-p',
+  'scroll-pt',
+  'scroll-pr',
+  'scroll-pb',
+  'scroll-pl',
   'w',
   'h',
   'size',
@@ -807,11 +1167,21 @@ export const SPACING_SCALE_ROOTS: Set<string> = new Set([
  * keyed by camelCase CSS property). Used by the inverse parser to recognize
  * `bg-primary` / `text-text` / `border-border` etc.
  */
-export const COLOR_TOKEN_ROOTS: Set<string> = new Set(['text', 'bg', 'border', 'accent', 'outline']);
+export const COLOR_TOKEN_ROOTS: Set<string> = new Set([
+  'text',
+  'bg',
+  'border',
+  'accent',
+  'outline',
+  'decoration',
+  'caret',
+  'fill',
+  'stroke',
+]);
 
 /** Reverse mapping for static utilities: class → { prop, value } (canonical value). */
 export const staticUtilityReverse: Record<string, { prop: string; value: string }> = (() => {
-  const reverse: Record<string, { prop: string; value: string }> = {};
+  const reverse: Record<string, { prop: string; value: string }> = { ...staticClassAliases };
   for (const [prop, values] of Object.entries(staticUtilities)) {
     for (const [value, className] of Object.entries(values)) {
       if (!reverse[className]) {
@@ -827,13 +1197,72 @@ export const staticUtilityReverse: Record<string, { prop: string; value: string
  * Mirrors Tailwind's named sizes (`w-full`, `h-screen`, `m-auto`, `rounded-full`).
  */
 export const keywordValues: Record<string, Record<string, string>> = {
-  w: { auto: 'auto', full: '100%', screen: '100vw', fit: 'fit-content', min: 'min-content', max: 'max-content' },
-  h: { auto: 'auto', full: '100%', screen: '100vh', fit: 'fit-content', min: 'min-content', max: 'max-content' },
-  'max-w': { full: '100%', none: 'none', screen: '100vw', fit: 'fit-content', min: 'min-content', max: 'max-content' },
-  'max-h': { full: '100%', none: 'none', screen: '100vh', fit: 'fit-content', min: 'min-content', max: 'max-content' },
+  w: {
+    auto: 'auto',
+    full: '100%',
+    screen: '100vw',
+    svw: '100svw',
+    dvw: '100dvw',
+    lvw: '100lvw',
+    fit: 'fit-content',
+    min: 'min-content',
+    max: 'max-content',
+  },
+  h: {
+    auto: 'auto',
+    full: '100%',
+    screen: '100vh',
+    svh: '100svh',
+    dvh: '100dvh',
+    lvh: '100lvh',
+    fit: 'fit-content',
+    min: 'min-content',
+    max: 'max-content',
+  },
+  'max-w': {
+    full: '100%',
+    none: 'none',
+    screen: '100vw',
+    svw: '100svw',
+    dvw: '100dvw',
+    lvw: '100lvw',
+    fit: 'fit-content',
+    min: 'min-content',
+    max: 'max-content',
+  },
+  'max-h': {
+    full: '100%',
+    none: 'none',
+    screen: '100vh',
+    svh: '100svh',
+    dvh: '100dvh',
+    lvh: '100lvh',
+    fit: 'fit-content',
+    min: 'min-content',
+    max: 'max-content',
+  },
   size: { auto: 'auto', full: '100%', fit: 'fit-content', min: 'min-content', max: 'max-content' },
-  'min-w': { auto: 'auto', full: '100%', fit: 'fit-content', min: 'min-content', max: 'max-content' },
-  'min-h': { auto: 'auto', full: '100%', screen: '100vh', fit: 'fit-content', min: 'min-content', max: 'max-content' },
+  'min-w': {
+    auto: 'auto',
+    full: '100%',
+    svw: '100svw',
+    dvw: '100dvw',
+    lvw: '100lvw',
+    fit: 'fit-content',
+    min: 'min-content',
+    max: 'max-content',
+  },
+  'min-h': {
+    auto: 'auto',
+    full: '100%',
+    screen: '100vh',
+    svh: '100svh',
+    dvh: '100dvh',
+    lvh: '100lvh',
+    fit: 'fit-content',
+    min: 'min-content',
+    max: 'max-content',
+  },
   m: { auto: 'auto' },
   mt: { auto: 'auto' },
   mr: { auto: 'auto' },
@@ -859,19 +1288,45 @@ export const keywordValues: Record<string, Record<string, string>> = {
   'inset-y': { auto: 'auto', full: '100%' },
   aspect: { auto: 'auto', square: '1 / 1', video: '16 / 9' },
   order: { first: '-9999', last: '9999', none: '0' },
+  'will-change': { scroll: 'scroll-position' }, // other values (transform, contents, auto) pass through generically
+  columns: { auto: 'auto' },
+  start: { auto: 'auto', full: '100%' },
+  end: { auto: 'auto', full: '100%' },
+  'underline-offset': { auto: 'auto' },
+  'auto-cols': { auto: 'auto', min: 'min-content', max: 'max-content', fr: 'minmax(0, 1fr)' },
+  'auto-rows': { auto: 'auto', min: 'min-content', max: 'max-content', fr: 'minmax(0, 1fr)' },
+  col: { auto: 'auto' },
+  row: { auto: 'auto' },
+  decoration: { 'from-font': 'from-font' }, // thickness keyword; style keywords are statics, colors flow via value type
 };
 
 /**
  * Roots whose plain lowercase keyword values pass through verbatim:
  * `cursor-pointer`, `align-middle`, `origin-center`, `object-center`, …
  */
-export const genericKeywordRoots: Set<string> = new Set(['cursor', 'align', 'origin', 'object', 'list']);
+export const genericKeywordRoots: Set<string> = new Set([
+  'cursor',
+  'align',
+  'origin',
+  'object',
+  'list',
+  'mix-blend',
+  'bg-blend',
+  'will-change',
+  'overscroll',
+  'overscroll-x',
+  'overscroll-y',
+  'touch',
+  'break-after',
+  'break-before',
+  'break-inside',
+]);
 
 /**
  * Roots that accept bare numeric values Tailwind-style: `z-10`, `order-2`,
  * `flex-2`, `grow-2`. (`opacity` is handled separately — Tailwind's 0–100 scale.)
  */
-export const integerValueRoots: Set<string> = new Set(['z', 'order', 'flex', 'grow', 'shrink']);
+export const integerValueRoots: Set<string> = new Set(['z', 'order', 'flex', 'grow', 'shrink', 'columns', 'stroke']);
 
 /**
  * Properties whose values are color tokens by Meno convention: a bare token
@@ -884,6 +1339,10 @@ export const colorTokenProps: Set<string> = new Set([
   'borderColor',
   'accentColor',
   'outlineColor',
+  'textDecorationColor',
+  'caretColor',
+  'fill',
+  'stroke',
 ]);
 
 /**