eva-css-ycode 1.0.0

package/dist/index.mjs

@@ -0,0 +1,342 @@
+// 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 = ["__", "_", ""];
+var DATA_EVA_MAP = {
+  extreme: "__",
+  strong: "_",
+  // normal = default (no data-eva needed)
+  light: "-"
+};
+var DATA_EVA_FONT_MAP = {
+  extreme: "__",
+  strong: "_"
+  // normal = default (no data-eva needed)
+};
+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 escapeTwClass(prefix, value) {
+  return `.${prefix}-\\[${value}\\]`;
+}
+function generateRootVars(cfg) {
+  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 generateDefaultOverrides(cfg) {
+  const lines = [];
+  const suffix = cfg.defaultIntensity;
+  for (const size of cfg.sizes) {
+    lines.push(`/* ---- ${size}px ---- */`);
+    const varRef = `var(--${size}${suffix})`;
+    for (const [twPrefix, cssProp] of Object.entries(PROPERTY_MAP)) {
+      lines.push(`${escapeTwClass(twPrefix, `${size}px`)} { ${cssProp}: ${varRef} }`);
+    }
+    lines.push("");
+  }
+  const fontSuffix = cfg.defaultIntensity === "-" ? "" : cfg.defaultIntensity;
+  for (const size of cfg.fontSizes) {
+    const varRef = `var(--fs-${size}${fontSuffix})`;
+    for (const [twPrefix, cssProp] of Object.entries(FONT_PROPERTY_MAP)) {
+      lines.push(`${escapeTwClass(twPrefix, `${size}px`)} { ${cssProp}: ${varRef} }`);
+    }
+  }
+  lines.push("");
+  const allSizes = /* @__PURE__ */ new Set([...cfg.sizes]);
+  const remEntries = [];
+  for (const size of allSizes) {
+    const rem = size / 16;
+    if (rem === Math.round(rem * 100) / 100 && rem > 0) {
+      remEntries.push({ rem, size });
+    }
+  }
+  if (remEntries.length > 0) {
+    lines.push("/* ---- rem mappings ---- */");
+    for (const { rem, size } of remEntries) {
+      const remStr = rem % 1 === 0 ? `${rem}rem` : `${rem}rem`;
+      const varRef = `var(--${size}${suffix})`;
+      for (const [twPrefix, cssProp] of Object.entries(PROPERTY_MAP)) {
+        lines.push(`${escapeTwClass(twPrefix, remStr)} { ${cssProp}: ${varRef} }`);
+      }
+    }
+    lines.push("");
+  }
+  const fontRemEntries = [];
+  for (const size of cfg.fontSizes) {
+    const rem = size / 16;
+    if (rem === Math.round(rem * 100) / 100 && rem > 0) {
+      fontRemEntries.push({ rem, size });
+    }
+  }
+  if (fontRemEntries.length > 0) {
+    for (const { rem, size } of fontRemEntries) {
+      const remStr = rem % 1 === 0 ? `${rem}rem` : `${rem}rem`;
+      const varRef = `var(--fs-${size}${fontSuffix})`;
+      for (const [twPrefix, cssProp] of Object.entries(FONT_PROPERTY_MAP)) {
+        lines.push(`${escapeTwClass(twPrefix, remStr)} { ${cssProp}: ${varRef} }`);
+      }
+    }
+    lines.push("");
+  }
+  return lines.join("\n");
+}
+function generateResponsiveOverrides(cfg) {
+  const lines = [];
+  const suffix = cfg.defaultIntensity;
+  const fontSuffix = cfg.defaultIntensity === "-" ? "" : cfg.defaultIntensity;
+  lines.push("/* ---- max-md responsive overrides ---- */");
+  lines.push("@media (width < 48rem) {");
+  for (const size of cfg.sizes) {
+    const varRef = `var(--${size}${suffix})`;
+    for (const [twPrefix, cssProp] of Object.entries(PROPERTY_MAP)) {
+      lines.push(`  .max-md\\:${twPrefix}-\\[${size}px\\] { ${cssProp}: ${varRef} }`);
+    }
+  }
+  for (const size of cfg.fontSizes) {
+    const varRef = `var(--fs-${size}${fontSuffix})`;
+    for (const [twPrefix, cssProp] of Object.entries(FONT_PROPERTY_MAP)) {
+      lines.push(`  .max-md\\:${twPrefix}-\\[${size}px\\] { ${cssProp}: ${varRef} }`);
+    }
+  }
+  lines.push("}");
+  lines.push("");
+  return lines.join("\n");
+}
+function generateIntensitySelectors(cfg) {
+  const lines = [];
+  for (const [evaValue, intensity] of Object.entries(DATA_EVA_MAP)) {
+    lines.push(`/* ---- data-eva="${evaValue}" (${intensity}) ---- */`);
+    for (const size of cfg.sizes) {
+      const varRef = `var(--${size}${intensity})`;
+      for (const [twPrefix, cssProp] of Object.entries(PROPERTY_MAP)) {
+        lines.push(`[data-eva="${evaValue}"] ${escapeTwClass(twPrefix, `${size}px`)} { ${cssProp}: ${varRef} }`);
+      }
+    }
+    lines.push("");
+  }
+  for (const [evaValue, intensity] of Object.entries(DATA_EVA_FONT_MAP)) {
+    for (const size of cfg.fontSizes) {
+      const varRef = `var(--fs-${size}${intensity})`;
+      for (const [twPrefix, cssProp] of Object.entries(FONT_PROPERTY_MAP)) {
+        lines.push(`[data-eva="${evaValue}"] ${escapeTwClass(twPrefix, `${size}px`)} { ${cssProp}: ${varRef} }`);
+      }
+    }
+  }
+  lines.push("");
+  return lines.join("\n");
+}
+function generateBridge(config) {
+  const cfg = resolveConfig(config);
+  const sections = [
+    "/* =============================================================",
+    "   EVA CSS \xD7 yCode \u2014 Fluid Bridge",
+    "   Generated by eva-css-ycode",
+    "   ============================================================= */",
+    "",
+    "/* Section A \u2014 CSS Custom Properties */",
+    generateRootVars(cfg),
+    "",
+    "/* Section B \u2014 Tailwind Arbitrary Class Overrides */",
+    generateDefaultOverrides(cfg),
+    generateResponsiveOverrides(cfg),
+    "/* Section C \u2014 Per-Section Intensity Selectors */",
+    generateIntensitySelectors(cfg)
+  ];
+  return sections.join("\n");
+}
+export {
+  FONT_PROPERTY_MAP,
+  PROPERTY_MAP,
+  generateBridge,
+  resolveConfig
+};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "eva-css-ycode",
+  "version": "1.0.0",
+  "description": "Fluid design tokens bridge for yCode — converts Tailwind pixel values to clamp()",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "bin": {
+    "eva-ycode": "dist/cli.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "node --test src/**/*.test.ts"
+  },
+  "keywords": ["eva-css", "ycode", "tailwind", "fluid", "clamp", "responsive"],
+  "license": "MIT",
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0"
+  }
+}