eva-css-for-tailwind 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,121 @@
+/** Intensity levels matching eva-css SCSS convention */
+type Intensity = '__' | '_' | '' | '-';
+/** Intensity levels for font-size (3 levels only, matching SCSS) */
+type FontIntensity = '__' | '_' | '';
+interface EvaYcodeConfig {
+    /** Spacing sizes in px from Figma tokens */
+    sizes: number[];
+    /** Font sizes in px from Figma tokens */
+    fontSizes: number[];
+    /** Reference screen width (default: 1440) */
+    screen?: number;
+    /** Spacing ratio multiplier — golden ratio (default: 1.61803398875) */
+    phi?: number;
+    /** Font ratio multiplier (default: 1.3) */
+    fontPhi?: number;
+    /** Min fluid factor for spacing (default: 0.5) */
+    min?: number;
+    /** Min fluid factor for fonts (default: 0.5 — matches SCSS where getMinRem uses module-level $min) */
+    fontMin?: number;
+    /** Max fluid factor (default: 1) */
+    max?: number;
+    /** Extreme intensity factor (default: 142.4) */
+    ez?: number;
+    /** Default intensity (default: '') */
+    defaultIntensity?: Intensity;
+}
+interface ResolvedConfig {
+    sizes: number[];
+    fontSizes: number[];
+    screen: number;
+    phi: number;
+    fontPhi: number;
+    min: number;
+    fontMin: number;
+    max: number;
+    ez: number;
+    defaultIntensity: Intensity;
+}
+/** Map of Tailwind prefix → CSS property for spacing/layout */
+declare const PROPERTY_MAP: Record<string, string>;
+/** Font property map — uses --fs-XX vars */
+declare const FONT_PROPERTY_MAP: Record<string, string>;
+/** All spacing intensity suffixes in order (most fluid → least fluid) */
+declare const SPACING_INTENSITIES: Intensity[];
+/** All font intensity suffixes in order (most fluid → least fluid) */
+declare const FONT_INTENSITIES: FontIntensity[];
+declare function resolveConfig(config: EvaYcodeConfig): ResolvedConfig;
+
+/**
+ * eva-css-for-tailwind — API
+ *
+ * Modular API for eva-css fluid calculations.
+ * Each method is independent — compose as needed.
+ */
+
+interface ParsedClass {
+    /** Original class string, e.g. "pt-[140px]" */
+    raw: string;
+    /** TW prefix, e.g. "pt" */
+    prefix: string;
+    /** CSS property, e.g. "padding-top" */
+    property: string;
+    /** Size in px, e.g. 140 */
+    size: number;
+    /** Original unit: "px" or "rem" */
+    unit: 'px' | 'rem';
+    /** "spacing" or "font" */
+    type: 'spacing' | 'font';
+}
+/**
+ * Parse a Tailwind arbitrary class into its components.
+ *
+ * @example
+ * parseClass('pt-[140px]')
+ * // → { raw: 'pt-[140px]', prefix: 'pt', property: 'padding-top', size: 140, unit: 'px', type: 'spacing' }
+ */
+declare function parseClass(className: string): ParsedClass | null;
+/**
+ * Generate a single clamp() value.
+ *
+ * @example
+ * generateClamp(32, 'spacing', '__')
+ * // → "clamp(0.5rem, 3.16vw - 1.11rem, 2.22rem)"
+ */
+declare function generateClamp(sizePx: number, type: 'spacing' | 'font', intensity?: Intensity | FontIntensity, config?: Partial<EvaYcodeConfig>): string;
+/**
+ * Generate :root CSS custom properties for all configured sizes.
+ * Always complete — these vars are used by the nocode UI.
+ *
+ * @example
+ * generateVars({ sizes: [16, 32], fontSizes: [16] })
+ * // → ":root { --16__: clamp(...); --16_: ...; --16: ...; --16-: ...; --fs-16__: ...; }"
+ */
+declare function generateVars(config: EvaYcodeConfig): string;
+/**
+ * Generate CSS overrides for specific Tailwind arbitrary classes.
+ * Each class gets its default + all intensity variants.
+ *
+ * @example
+ * generateClassOverrides(['p-[32px]', 'text-[48px]'])
+ * // → ".p-\\[32px\\] { padding: var(--32) }\n.p-\\[32px\\]__ { padding: var(--32__) }\n..."
+ */
+declare function generateClassOverrides(classes: string[], config?: Partial<EvaYcodeConfig>): string;
+/**
+ * Generate a TW4 @theme block mapping native utilities to eva vars.
+ * Use this if your project uses named utilities (p-32) instead of arbitrary values (p-[32px]).
+ *
+ * @example
+ * generateTheme({ sizes: [16, 32], fontSizes: [16] })
+ * // → "@theme { --spacing-16: var(--16); --spacing-32: var(--32); --font-size-16: var(--fs-16); }"
+ */
+declare function generateTheme(config: EvaYcodeConfig): string;
+/**
+ * Generate a complete CSS bridge — vars + theme + class overrides.
+ * Shortcut for CLI usage. For programmatic use, prefer individual methods.
+ */
+declare function generateBridge(config: EvaYcodeConfig & {
+    classes?: string[];
+}): string;
+
+export { type EvaYcodeConfig, FONT_INTENSITIES, FONT_PROPERTY_MAP, type FontIntensity, type Intensity, PROPERTY_MAP, type ParsedClass, type ResolvedConfig, SPACING_INTENSITIES, generateBridge, generateClamp, generateClassOverrides, generateTheme, generateVars, parseClass, resolveConfig };

package/dist/index.d.ts

@@ -0,0 +1,121 @@
+/** Intensity levels matching eva-css SCSS convention */
+type Intensity = '__' | '_' | '' | '-';
+/** Intensity levels for font-size (3 levels only, matching SCSS) */
+type FontIntensity = '__' | '_' | '';
+interface EvaYcodeConfig {
+    /** Spacing sizes in px from Figma tokens */
+    sizes: number[];
+    /** Font sizes in px from Figma tokens */
+    fontSizes: number[];
+    /** Reference screen width (default: 1440) */
+    screen?: number;
+    /** Spacing ratio multiplier — golden ratio (default: 1.61803398875) */
+    phi?: number;
+    /** Font ratio multiplier (default: 1.3) */
+    fontPhi?: number;
+    /** Min fluid factor for spacing (default: 0.5) */
+    min?: number;
+    /** Min fluid factor for fonts (default: 0.5 — matches SCSS where getMinRem uses module-level $min) */
+    fontMin?: number;
+    /** Max fluid factor (default: 1) */
+    max?: number;
+    /** Extreme intensity factor (default: 142.4) */
+    ez?: number;
+    /** Default intensity (default: '') */
+    defaultIntensity?: Intensity;
+}
+interface ResolvedConfig {
+    sizes: number[];
+    fontSizes: number[];
+    screen: number;
+    phi: number;
+    fontPhi: number;
+    min: number;
+    fontMin: number;
+    max: number;
+    ez: number;
+    defaultIntensity: Intensity;
+}
+/** Map of Tailwind prefix → CSS property for spacing/layout */
+declare const PROPERTY_MAP: Record<string, string>;
+/** Font property map — uses --fs-XX vars */
+declare const FONT_PROPERTY_MAP: Record<string, string>;
+/** All spacing intensity suffixes in order (most fluid → least fluid) */
+declare const SPACING_INTENSITIES: Intensity[];
+/** All font intensity suffixes in order (most fluid → least fluid) */
+declare const FONT_INTENSITIES: FontIntensity[];
+declare function resolveConfig(config: EvaYcodeConfig): ResolvedConfig;
+
+/**
+ * eva-css-for-tailwind — API
+ *
+ * Modular API for eva-css fluid calculations.
+ * Each method is independent — compose as needed.
+ */
+
+interface ParsedClass {
+    /** Original class string, e.g. "pt-[140px]" */
+    raw: string;
+    /** TW prefix, e.g. "pt" */
+    prefix: string;
+    /** CSS property, e.g. "padding-top" */
+    property: string;
+    /** Size in px, e.g. 140 */
+    size: number;
+    /** Original unit: "px" or "rem" */
+    unit: 'px' | 'rem';
+    /** "spacing" or "font" */
+    type: 'spacing' | 'font';
+}
+/**
+ * Parse a Tailwind arbitrary class into its components.
+ *
+ * @example
+ * parseClass('pt-[140px]')
+ * // → { raw: 'pt-[140px]', prefix: 'pt', property: 'padding-top', size: 140, unit: 'px', type: 'spacing' }
+ */
+declare function parseClass(className: string): ParsedClass | null;
+/**
+ * Generate a single clamp() value.
+ *
+ * @example
+ * generateClamp(32, 'spacing', '__')
+ * // → "clamp(0.5rem, 3.16vw - 1.11rem, 2.22rem)"
+ */
+declare function generateClamp(sizePx: number, type: 'spacing' | 'font', intensity?: Intensity | FontIntensity, config?: Partial<EvaYcodeConfig>): string;
+/**
+ * Generate :root CSS custom properties for all configured sizes.
+ * Always complete — these vars are used by the nocode UI.
+ *
+ * @example
+ * generateVars({ sizes: [16, 32], fontSizes: [16] })
+ * // → ":root { --16__: clamp(...); --16_: ...; --16: ...; --16-: ...; --fs-16__: ...; }"
+ */
+declare function generateVars(config: EvaYcodeConfig): string;
+/**
+ * Generate CSS overrides for specific Tailwind arbitrary classes.
+ * Each class gets its default + all intensity variants.
+ *
+ * @example
+ * generateClassOverrides(['p-[32px]', 'text-[48px]'])
+ * // → ".p-\\[32px\\] { padding: var(--32) }\n.p-\\[32px\\]__ { padding: var(--32__) }\n..."
+ */
+declare function generateClassOverrides(classes: string[], config?: Partial<EvaYcodeConfig>): string;
+/**
+ * Generate a TW4 @theme block mapping native utilities to eva vars.
+ * Use this if your project uses named utilities (p-32) instead of arbitrary values (p-[32px]).
+ *
+ * @example
+ * generateTheme({ sizes: [16, 32], fontSizes: [16] })
+ * // → "@theme { --spacing-16: var(--16); --spacing-32: var(--32); --font-size-16: var(--fs-16); }"
+ */
+declare function generateTheme(config: EvaYcodeConfig): string;
+/**
+ * Generate a complete CSS bridge — vars + theme + class overrides.
+ * Shortcut for CLI usage. For programmatic use, prefer individual methods.
+ */
+declare function generateBridge(config: EvaYcodeConfig & {
+    classes?: string[];
+}): string;
+
+export { type EvaYcodeConfig, FONT_INTENSITIES, FONT_PROPERTY_MAP, type FontIntensity, type Intensity, PROPERTY_MAP, type ParsedClass, type ResolvedConfig, SPACING_INTENSITIES, generateBridge, generateClamp, generateClassOverrides, generateTheme, generateVars, parseClass, resolveConfig };

package/dist/index.js

@@ -0,0 +1,369 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  FONT_INTENSITIES: () => FONT_INTENSITIES,
+  FONT_PROPERTY_MAP: () => FONT_PROPERTY_MAP,
+  PROPERTY_MAP: () => PROPERTY_MAP,
+  SPACING_INTENSITIES: () => SPACING_INTENSITIES,
+  generateBridge: () => generateBridge,
+  generateClamp: () => generateClamp,
+  generateClassOverrides: () => generateClassOverrides,
+  generateTheme: () => generateTheme,
+  generateVars: () => generateVars,
+  parseClass: () => parseClass,
+  resolveConfig: () => resolveConfig
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/clamp.ts
+function round2(n) {
+  return Math.round(n * 100) / 100;
+}
+function getPercent(size, screen, ratio = 100) {
+  return round2(size / screen * ratio);
+}
+function toRem(size) {
+  return size / 16;
+}
+function getMinRem(percent, min) {
+  return round2(percent * min);
+}
+function getMaxRem(percent, max) {
+  return round2(percent * max);
+}
+function getVW(percent) {
+  return round2(percent);
+}
+function getFinalMinDiv(size, ratio) {
+  return round2(size / ratio);
+}
+function getFinalMinMulti(size, ratio) {
+  return round2(size * ratio);
+}
+function vwLight(calcPercent, sizeRem) {
+  return {
+    vw: round2(getVW(calcPercent) / 4),
+    offset: round2(sizeRem / 1.33)
+  };
+}
+function vwMedium(calcPercent, sizeRem) {
+  return {
+    vw: round2(getVW(calcPercent) / 2),
+    offset: round2(sizeRem / 2)
+  };
+}
+function vwStrong(calcPercent, sizeRem) {
+  return {
+    vw: round2(getVW(calcPercent) / 1.33),
+    offset: round2(sizeRem / 4)
+  };
+}
+function vwExtrem(calcPercentEz, remMin) {
+  return {
+    vw: getVW(calcPercentEz),
+    offset: round2(-remMin)
+  };
+}
+function formatClamp(min, fluid, max) {
+  const minStr = `${round2(min)}rem`;
+  const maxStr = `${round2(max)}rem`;
+  const sign = fluid.offset >= 0 ? "+" : "-";
+  const absOffset = round2(Math.abs(fluid.offset));
+  const fluidStr = `${fluid.vw}vw ${sign} ${absOffset}rem`;
+  return `clamp(${minStr}, ${fluidStr}, ${maxStr})`;
+}
+function generateSpacingClamp(sizePx, screen, phi, min, max, ez, intensity) {
+  const calcPercent = getPercent(sizePx, screen);
+  const calcPercentEz = getPercent(sizePx, screen, ez);
+  const sizeRem = toRem(sizePx);
+  const remMin = getMinRem(calcPercent, min);
+  const remMax = getMaxRem(calcPercent, max);
+  switch (intensity) {
+    // __ = extreme (most fluid)
+    case "__": {
+      const fluid = vwExtrem(calcPercentEz, remMin);
+      return formatClamp(min, fluid, remMax);
+    }
+    // _ = strong
+    case "_": {
+      const finalMin = getFinalMinDiv(remMin, phi);
+      const fluid = vwStrong(calcPercent, sizeRem);
+      return formatClamp(finalMin, fluid, remMax);
+    }
+    // '' = normal (default)
+    case "": {
+      const fluid = vwMedium(calcPercent, sizeRem);
+      return formatClamp(remMin, fluid, remMax);
+    }
+    // - = light (least fluid)
+    case "-": {
+      const finalMin = getFinalMinMulti(remMin, phi);
+      const fluid = vwLight(calcPercent, sizeRem);
+      return formatClamp(finalMin, fluid, remMax);
+    }
+  }
+}
+function generateFontClamp(sizePx, screen, phi, min, max, intensity) {
+  const calcPercent = getPercent(sizePx, screen);
+  const sizeRem = toRem(sizePx);
+  const remMin = getMinRem(calcPercent, min);
+  const remMax = getMaxRem(calcPercent, max);
+  switch (intensity) {
+    // __ = most fluid (uses vw-strong + min/phi)
+    case "__": {
+      const finalMin = getFinalMinDiv(remMin, phi);
+      const fluid = vwStrong(calcPercent, sizeRem);
+      return formatClamp(finalMin, fluid, remMax);
+    }
+    // _ = medium (uses vw-medium + remMin)
+    case "_": {
+      const fluid = vwMedium(calcPercent, sizeRem);
+      return formatClamp(remMin, fluid, remMax);
+    }
+    // '' = least fluid (uses vw-light + min*phi)
+    case "": {
+      const finalMin = getFinalMinMulti(remMin, phi);
+      const fluid = vwLight(calcPercent, sizeRem);
+      return formatClamp(finalMin, fluid, remMax);
+    }
+  }
+}
+
+// src/types.ts
+var PROPERTY_MAP = {
+  // Sizing
+  h: "height",
+  w: "width",
+  "min-h": "min-height",
+  "min-w": "min-width",
+  "max-w": "max-width",
+  "max-h": "max-height",
+  // Padding
+  p: "padding",
+  px: "padding-inline",
+  py: "padding-block",
+  pt: "padding-top",
+  pr: "padding-right",
+  pb: "padding-bottom",
+  pl: "padding-left",
+  // Margin
+  m: "margin",
+  mx: "margin-inline",
+  my: "margin-block",
+  mt: "margin-top",
+  mr: "margin-right",
+  mb: "margin-bottom",
+  ml: "margin-left",
+  // Layout
+  gap: "gap",
+  // Borders
+  rounded: "border-radius"
+};
+var FONT_PROPERTY_MAP = {
+  text: "font-size"
+};
+var SPACING_INTENSITIES = ["__", "_", "", "-"];
+var FONT_INTENSITIES = ["__", "_", ""];
+function resolveConfig(config) {
+  return {
+    sizes: config.sizes,
+    fontSizes: config.fontSizes,
+    screen: config.screen ?? 1440,
+    phi: config.phi ?? 1.61803398875,
+    fontPhi: config.fontPhi ?? 1.3,
+    min: config.min ?? 0.5,
+    fontMin: config.fontMin ?? 0.5,
+    max: config.max ?? 1,
+    ez: config.ez ?? 142.4,
+    defaultIntensity: config.defaultIntensity ?? ""
+  };
+}
+
+// src/generator.ts
+function parseClass(className) {
+  const match = className.match(/^(.+)-\[(\d+(?:\.\d+)?)(px|rem)\]$/);
+  if (!match) return null;
+  const [, prefix, valueStr, unit] = match;
+  const value = parseFloat(valueStr);
+  if (prefix in FONT_PROPERTY_MAP) {
+    const sizePx = unit === "rem" ? value * 16 : value;
+    return {
+      raw: className,
+      prefix,
+      property: FONT_PROPERTY_MAP[prefix],
+      size: sizePx,
+      unit,
+      type: "font"
+    };
+  }
+  if (prefix in PROPERTY_MAP) {
+    const sizePx = unit === "rem" ? value * 16 : value;
+    return {
+      raw: className,
+      prefix,
+      property: PROPERTY_MAP[prefix],
+      size: sizePx,
+      unit,
+      type: "spacing"
+    };
+  }
+  return null;
+}
+function generateClamp(sizePx, type, intensity, config) {
+  const cfg = resolveConfig({
+    sizes: [],
+    fontSizes: [],
+    ...config
+  });
+  if (type === "font") {
+    return generateFontClamp(
+      sizePx,
+      cfg.screen,
+      cfg.fontPhi,
+      cfg.fontMin,
+      cfg.max,
+      intensity ?? ""
+    );
+  }
+  return generateSpacingClamp(
+    sizePx,
+    cfg.screen,
+    cfg.phi,
+    cfg.min,
+    cfg.max,
+    cfg.ez,
+    intensity ?? ""
+  );
+}
+function generateVars(config) {
+  const cfg = resolveConfig(config);
+  const lines = [":root {"];
+  for (const size of cfg.sizes) {
+    lines.push(`  /* ---- ${size}px ---- */`);
+    for (const intensity of SPACING_INTENSITIES) {
+      const clamp = generateSpacingClamp(
+        size,
+        cfg.screen,
+        cfg.phi,
+        cfg.min,
+        cfg.max,
+        cfg.ez,
+        intensity
+      );
+      lines.push(`  --${size}${intensity}: ${clamp};`);
+    }
+    lines.push("");
+  }
+  for (const size of cfg.fontSizes) {
+    lines.push(`  /* ---- fs-${size}px ---- */`);
+    for (const intensity of FONT_INTENSITIES) {
+      const clamp = generateFontClamp(
+        size,
+        cfg.screen,
+        cfg.fontPhi,
+        cfg.fontMin,
+        cfg.max,
+        intensity
+      );
+      lines.push(`  --fs-${size}${intensity}: ${clamp};`);
+    }
+    lines.push("");
+  }
+  lines.push("}");
+  return lines.join("\n");
+}
+function escapeTwClass(prefix, value, suffix) {
+  return `.${prefix}-\\[${value}\\]${suffix}`;
+}
+function generateClassOverrides(classes, config) {
+  const cfg = resolveConfig({ sizes: [], fontSizes: [], ...config });
+  const lines = [];
+  for (const cls of classes) {
+    const parsed = parseClass(cls);
+    if (!parsed) continue;
+    const valueStr = parsed.unit === "rem" ? `${parsed.size / 16}rem` : `${parsed.size}px`;
+    if (parsed.type === "font") {
+      for (const intensity of FONT_INTENSITIES) {
+        const varRef = `var(--fs-${parsed.size}${intensity})`;
+        const selector = escapeTwClass(parsed.prefix, valueStr, intensity);
+        lines.push(`${selector} { ${parsed.property}: ${varRef} }`);
+      }
+    } else {
+      for (const intensity of SPACING_INTENSITIES) {
+        const varRef = `var(--${parsed.size}${intensity})`;
+        const selector = escapeTwClass(parsed.prefix, valueStr, intensity);
+        lines.push(`${selector} { ${parsed.property}: ${varRef} }`);
+      }
+    }
+    lines.push("");
+  }
+  return lines.join("\n");
+}
+function generateTheme(config) {
+  const cfg = resolveConfig(config);
+  const lines = ["@theme {"];
+  for (const size of cfg.sizes) {
+    lines.push(`  --spacing-${size}: var(--${size}${cfg.defaultIntensity});`);
+  }
+  if (cfg.sizes.length > 0 && cfg.fontSizes.length > 0) {
+    lines.push("");
+  }
+  const fontSuffix = cfg.defaultIntensity === "-" ? "" : cfg.defaultIntensity;
+  for (const size of cfg.fontSizes) {
+    lines.push(`  --font-size-${size}: var(--fs-${size}${fontSuffix});`);
+  }
+  lines.push("}");
+  return lines.join("\n");
+}
+function generateBridge(config) {
+  const sections = [
+    "/* =============================================================",
+    "   EVA CSS \u2014 Tailwind Fluid Bridge",
+    "   Generated by eva-css-for-tailwind",
+    "   ============================================================= */",
+    "",
+    generateVars(config)
+  ];
+  if (!config.classes) {
+    sections.push("");
+    sections.push(generateTheme(config));
+  }
+  if (config.classes && config.classes.length > 0) {
+    sections.push("");
+    sections.push(generateClassOverrides(config.classes, config));
+  }
+  return sections.join("\n");
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FONT_INTENSITIES,
+  FONT_PROPERTY_MAP,
+  PROPERTY_MAP,
+  SPACING_INTENSITIES,
+  generateBridge,
+  generateClamp,
+  generateClassOverrides,
+  generateTheme,
+  generateVars,
+  parseClass,
+  resolveConfig
+});