clampography 2.0.0-beta.9 → 2.0.0

package/src/convert.js

@@ -0,0 +1,285 @@
+#!/usr/bin/env bun
+
+/**
+ * JS to CSS Converter for Bun.sh
+ * Converts multiple .js files to .css and .css.min
+ */
+
+import { existsSync, mkdirSync, readFileSync, statSync, writeFileSync } from "fs";
+import { basename, resolve } from "path";
+
+// Configuration
+const FILES_TO_CONVERT = ["base.js", "theme.js", "extra.js", "forms.js", "kbd.js"];
+const OUTPUT_DIR = "css";
+
+// Options passed to the JS functions (simulating plugin config)
+const DEFAULT_OPTIONS = {
+  root: ":root",
+  prefix: "clampography",
+};
+
+/**
+ * Import the JS module dynamically
+ */
+async function loadJSModule(filePath) {
+  const module = await import(`./${filePath}`);
+  const exported = module.default;
+
+  // Check if it's a function (new structure) or object (old structure)
+  if (typeof exported === "function") {
+    // Invoke the function with default options
+    return exported(DEFAULT_OPTIONS);
+  }
+
+  return exported;
+}
+
+/**
+ * Convert JS object to CSS string
+ */
+function toCSSString(obj, indentLevel = 0) {
+  const spaces = "  ".repeat(indentLevel);
+  const lines = [];
+
+  for (const [key, value] of Object.entries(obj)) {
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      // It's a selector or nested object
+
+      // Special handling for @layer base wrapper if present in object
+      if (key === "@layer base") {
+        lines.push(`${spaces}@layer base {`);
+        lines.push(toCSSString(value, indentLevel + 1));
+        lines.push(`${spaces}}`);
+      } else {
+        lines.push("");
+        lines.push(`${spaces}${key} {`);
+
+        // Recursive call for nested properties or media queries
+        // But first, separate properties from nested objects
+        const properties = [];
+        const nestedObjects = {};
+
+        for (const [prop, val] of Object.entries(value)) {
+          if (typeof val === "object" && val !== null) {
+            nestedObjects[prop] = val;
+          } else {
+            properties.push(`${spaces}  ${prop}: ${val};`);
+          }
+        }
+
+        // Add properties first
+        lines.push(...properties);
+
+        // Then process nested objects (like pseudo-elements or media queries inside)
+        if (Object.keys(nestedObjects).length > 0) {
+          // This handles nesting if the JS structure supports it (like SCSS nesting)
+          // Standard CSS doesn't support nesting without post-processing,
+          // but we'll output it as nested blocks for clarity if present.
+          lines.push(toCSSString(nestedObjects, indentLevel + 1));
+        }
+
+        lines.push(`${spaces}}`);
+      }
+    }
+  }
+  return lines.join("\n");
+}
+
+/**
+ * Convert JS object to minified CSS string
+ */
+function toMinifiedCSS(obj) {
+  const parts = [];
+
+  for (const [key, value] of Object.entries(obj)) {
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      if (key === "@layer base") {
+        parts.push(`@layer base{${toMinifiedCSS(value)}}`);
+      } else {
+        const properties = [];
+        const nestedParts = [];
+
+        for (const [prop, val] of Object.entries(value)) {
+          if (typeof val === "object" && val !== null) {
+            nestedParts.push(toMinifiedCSS({ [prop]: val }));
+          } else {
+            properties.push(`${prop}:${val}`);
+          }
+        }
+
+        let blockContent = properties.join(";");
+        if (nestedParts.length > 0) {
+          blockContent += nestedParts.join("");
+        }
+
+        if (blockContent.length > 0) {
+          parts.push(`${key}{${blockContent}}`);
+        }
+      }
+    }
+  }
+  return parts.join("");
+}
+
+/**
+ * Get output file names from input file name
+ */
+function getOutputFileNames(inputFile) {
+  const baseNameWithoutExt = basename(inputFile, ".js");
+  return {
+    css: `${baseNameWithoutExt}.css`,
+    min: `${baseNameWithoutExt}.min.css`,
+  };
+}
+
+/**
+ * Convert single JS file to CSS
+ */
+async function convertFile(inputFile) {
+  const outputNames = getOutputFileNames(inputFile);
+  const outputCSS = resolve(OUTPUT_DIR, outputNames.css);
+  const outputMin = resolve(OUTPUT_DIR, outputNames.min);
+
+  try {
+    console.log(`\n📖 Loading ${inputFile}...`);
+    const jsObject = await loadJSModule(inputFile);
+
+    console.log(`⚙️ Converting to CSS...`);
+    let cssContent = toCSSString(jsObject, 1);
+
+    // Explicitly wrap in @layer base for the final file
+    // (Assuming the JS object is just the rules, without @layer wrapper)
+    cssContent = `@layer base {\n${cssContent}\n}\n`;
+
+    console.log(`💾 Writing ${outputNames.css}...`);
+    writeFileSync(outputCSS, cssContent, "utf-8");
+
+    // Generate minified version
+    console.log(`⚙️ Generating minified version...`);
+    let minifiedContent = toMinifiedCSS(jsObject);
+    minifiedContent = `@layer base{${minifiedContent}}`;
+
+    console.log(`💾 Writing ${outputNames.min}...`);
+    writeFileSync(outputMin, minifiedContent, "utf-8");
+
+    // Show file sizes
+    const cssSize = statSync(outputCSS).size;
+    const minSize = statSync(outputMin).size;
+    const reduction = ((1 - minSize / cssSize) * 100).toFixed(1);
+
+    console.log(`✅ ${inputFile} converted successfully!`);
+    console.log(`   📄 ${outputNames.css}: ${(cssSize / 1024).toFixed(2)} KB`);
+    console.log(
+      `   📄 ${outputNames.min}: ${
+        (minSize / 1024).toFixed(2)
+      } KB (${reduction}% smaller)`,
+    );
+
+    return {
+      input: inputFile,
+      output: outputNames.css,
+      outputMin: outputNames.min,
+      cssSize,
+      minSize,
+      reduction,
+    };
+  } catch (error) {
+    console.error(`❌ Error converting ${inputFile}:`, error.message);
+    return null;
+  }
+}
+
+/**
+ * Main conversion function
+ */
+async function convertAllFiles() {
+  console.log("🚀 Starting CSS conversion...");
+  console.log(`📁 Output directory: ${OUTPUT_DIR}`);
+  console.log(`📝 Files to convert: ${FILES_TO_CONVERT.length}`);
+
+  // Create output directory if it doesn't exist
+  if (!existsSync(OUTPUT_DIR)) {
+    console.log(`📁 Creating output directory: ${OUTPUT_DIR}`);
+    mkdirSync(OUTPUT_DIR, { recursive: true });
+  }
+
+  const results = [];
+
+  // Convert all files
+  for (const file of FILES_TO_CONVERT) {
+    const result = await convertFile(file);
+    if (result) {
+      results.push(result);
+    }
+  }
+
+  // Summary
+  console.log("\n" + "=".repeat(60));
+  console.log("📊 CONVERSION SUMMARY");
+  console.log("=".repeat(60));
+
+  if (results.length === 0) {
+    console.log("❌ No files were converted successfully.");
+    process.exit(1);
+  }
+
+  console.log(
+    `✅ Successfully converted: ${results.length}/${FILES_TO_CONVERT.length} files\n`,
+  );
+
+  let totalCSSSize = 0;
+  let totalMinSize = 0;
+
+  results.forEach((result) => {
+    console.log(`📄 ${result.input}`);
+    console.log(
+      `   → ${OUTPUT_DIR}/${result.output} (${
+        (result.cssSize / 1024).toFixed(2)
+      } KB)`,
+    );
+    console.log(
+      `   → ${OUTPUT_DIR}/${result.outputMin} (${
+        (result.minSize / 1024).toFixed(2)
+      } KB, ${result.reduction}% smaller)`,
+    );
+    totalCSSSize += result.cssSize;
+    totalMinSize += result.minSize;
+  });
+
+  const totalReduction = ((1 - totalMinSize / totalCSSSize) * 100).toFixed(1);
+
+  // Generate unified bundle
+  console.log("\n📦 Generating unified bundle...");
+  const bundleCSSPath = resolve(OUTPUT_DIR, "clampography.css");
+  const bundleMinPath = resolve(OUTPUT_DIR, "clampography.min.css");
+  
+  let combinedCSS = "/**\n * Clampography CSS Bundle\n * Contains: " + FILES_TO_CONVERT.join(", ") + "\n */\n\n";
+  let combinedMinCSS = "";
+  
+  for (const file of FILES_TO_CONVERT) {
+    const names = getOutputFileNames(file);
+    combinedCSS += `/* --- ${file} --- */\n`;
+    combinedCSS += readFileSync(resolve(OUTPUT_DIR, names.css), "utf-8") + "\n";
+    combinedMinCSS += readFileSync(resolve(OUTPUT_DIR, names.min), "utf-8");
+  }
+  
+  writeFileSync(bundleCSSPath, combinedCSS, "utf-8");
+  writeFileSync(bundleMinPath, combinedMinCSS, "utf-8");
+
+  console.log(`✅ Created clampography.css (${(statSync(bundleCSSPath).size / 1024).toFixed(2)} KB)`);
+  console.log(`✅ Created clampography.min.css (${(statSync(bundleMinPath).size / 1024).toFixed(2)} KB)`);
+
+  console.log("\n" + "-".repeat(60));
+  console.log(`📊 Total CSS size: ${(totalCSSSize / 1024).toFixed(2)} KB`);
+  console.log(`📊 Total Minified size: ${(totalMinSize / 1024).toFixed(2)} KB`);
+  console.log(`📊 Total reduction: ${totalReduction}%`);
+  console.log("=".repeat(60));
+  console.log("🎉 All conversions completed!");
+}
+
+// Run conversion
+convertAllFiles().catch((error) => {
+  console.error("❌ Fatal error:", error.message);
+  console.error(error.stack);
+  process.exit(1);
+});

package/src/export-figma.js

@@ -0,0 +1,89 @@
+import fs from "fs";
+import { resolve } from "path";
+import { themes } from "./themes.js";
+
+const OUTPUT_DIR = "css";
+const OUTPUT_FILE = "figma-tokens.json";
+
+/**
+ * Converts an OKLCH color string to a hex color string.
+ * Handles both percentage (oklch(10% 0 0)) and decimal (oklch(0.1 0 0)) lightness.
+ */
+function oklchToHex(oklchStr) {
+  const m = oklchStr.match(/oklch\(\s*([\d.]+)%?\s+([\d.e+-]+)\s+([\d.e+-]+)/i);
+  if (!m) return "#000000";
+
+  let L = parseFloat(m[1]);
+  const C = parseFloat(m[2]);
+  const H = parseFloat(m[3]);
+
+  // Normalize L to 0–1 if given as percentage
+  if (L > 1) L = L / 100;
+
+  // OKLCH → OKLab
+  const hRad = (H * Math.PI) / 180;
+  const a = C * Math.cos(hRad);
+  const b = C * Math.sin(hRad);
+
+  // OKLab → Linear sRGB
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
+
+  const lc = l_ * l_ * l_;
+  const mc = m_ * m_ * m_;
+  const sc = s_ * s_ * s_;
+
+  let r = +4.0767416621 * lc - 3.3077115913 * mc + 0.2309699292 * sc;
+  let g = -1.2684380046 * lc + 2.6097574011 * mc - 0.3413193965 * sc;
+  let bv = -0.0041960863 * lc - 0.7034186147 * mc + 1.7076147010 * sc;
+
+  // Linear sRGB → sRGB (gamma correction + clamp)
+  const toSRGB = (c) => {
+    c = Math.max(0, Math.min(1, c));
+    return c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+  };
+
+  r = toSRGB(r);
+  g = toSRGB(g);
+  bv = toSRGB(bv);
+
+  const toHex = (c) => Math.round(c * 255).toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(bv)}`;
+}
+
+function exportTokens() {
+  console.log("🎨 Starting Figma Design Tokens export...");
+
+  if (!fs.existsSync(OUTPUT_DIR)) {
+    fs.mkdirSync(OUTPUT_DIR, { recursive: true });
+  }
+
+  const tokens = {};
+  let themeCount = 0;
+
+  for (const [themeName, themeData] of Object.entries(themes)) {
+    tokens[themeName] = {};
+    themeCount++;
+
+    for (const [key, value] of Object.entries(themeData)) {
+      // Skip non-color attributes like color-scheme
+      if (!key.startsWith("--clampography-")) continue;
+
+      const colorName = key.replace("--clampography-", "");
+
+      // W3C DTCG format: $value and $type (with $ prefix)
+      tokens[themeName][colorName] = {
+        $value: oklchToHex(value),
+        $type: "color",
+      };
+    }
+  }
+
+  const outputPath = resolve(OUTPUT_DIR, OUTPUT_FILE);
+  fs.writeFileSync(outputPath, JSON.stringify(tokens, null, 2), "utf-8");
+
+  console.log(`✅ Successfully exported ${themeCount} themes to ${OUTPUT_DIR}/${OUTPUT_FILE}!`);
+}
+
+exportTokens();

package/src/export-types.js

@@ -0,0 +1,39 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+import { light } from './themes.js';
+import baseStyles from './base.js';
+import extraStyles from './extra.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// 1. Get color variables from themes
+const colorVars = Object.keys(light).filter(k => k.startsWith('--'));
+
+// 2. Get variables from base styles
+const baseObj = baseStyles();
+const rootBaseVars = Object.keys(baseObj[':where(:root)'] || {}).filter(k => k.startsWith('--'));
+
+// 3. Get variables from extra styles
+const extraObj = extraStyles();
+const rootExtraVars = Object.keys(extraObj[':where(:root)'] || {}).filter(k => k.startsWith('--'));
+
+// Merge and deduplicate
+const allVars = [...new Set([...colorVars, ...rootBaseVars, ...rootExtraVars])].sort();
+
+// Generate TypeScript content
+const tsContent = `/**
+ * Auto-generated by Clampography
+ * TypeScript definitions for Clampography CSS Variables
+ */
+
+export type ClampographyVars = 
+${allVars.map(v => `  | "${v}"`).join('\n')};
+`;
+
+const outputPath = path.join(__dirname, 'types', 'vars.d.ts');
+fs.writeFileSync(outputPath, tsContent, 'utf-8');
+
+console.log(`✅ Exported ${allVars.length} CSS variable types to src/types/vars.d.ts`);