font-switcher 0.1.0

package/dist/vite-plugin.js

@@ -0,0 +1,342 @@
+// vite-plugin.ts
+import path2 from "path";
+
+// src/scanner.ts
+import fs from "fs";
+import path from "path";
+var SYSTEM_FONTS = /* @__PURE__ */ new Set([
+  "helvetica",
+  "arial",
+  "georgia",
+  "times",
+  "courier",
+  "verdana",
+  "trebuchet",
+  "impact",
+  "tahoma",
+  "sans-serif",
+  "serif",
+  "monospace",
+  "system-ui"
+]);
+function scanFontsFromCSS(cssFile) {
+  const resolved = path.resolve(cssFile);
+  if (!fs.existsSync(resolved)) {
+    console.warn(`[font-switcher] cssFile not found: ${resolved}`);
+    return [];
+  }
+  const css = fs.readFileSync(resolved, "utf8");
+  const found = [];
+  const seen = /* @__PURE__ */ new Set();
+  const faceBlockRe = /@font-face\s*\{([^}]+)\}/g;
+  for (const m of css.matchAll(faceBlockRe)) {
+    const block = m[1];
+    const familyM = /font-family\s*:\s*['"]?([^'";,\n]+)['"]?/.exec(block);
+    if (!familyM) continue;
+    const family = familyM[1].trim().replace(/['"]/g, "");
+    const key = `face:${family.toLowerCase()}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    const srcDecl = /src\s*:[^;}]*/.exec(block)?.[0] ?? "";
+    const urls = [...srcDecl.matchAll(/url\(['"]?([^'")\s]+)['"]?\)/g)].map((u) => u[1].trim());
+    const parseable = urls.find((u) => /\.(woff|ttf|otf)(\?|#|$)/i.test(u));
+    const fontFileSrc = parseable ?? urls[0];
+    found.push({ family, source: "@font-face", fontFileSrc });
+  }
+  const varRe = /(--font-[\w-]+)\s*:\s*['"]?([^'",;\n]+)['"]?/g;
+  const lengthLike = /^\d|^(normal|bold|italic|oblique|inherit|initial|unset)$/i;
+  for (const m of css.matchAll(varRe)) {
+    const varName = m[1].trim();
+    const family = m[2].trim().replace(/['"]/g, "");
+    if (lengthLike.test(family)) continue;
+    const key = `var:${varName}`;
+    if (!seen.has(key)) {
+      seen.add(key);
+      found.push({ family, source: "--font-var", varName });
+    }
+  }
+  return found;
+}
+function validateFonts(fonts, detected) {
+  const faceNames = new Set(
+    detected.filter((d) => d.source === "@font-face").map((d) => d.family.toLowerCase())
+  );
+  const varNames = new Set(
+    detected.filter((d) => d.source === "--font-var").map((d) => d.varName)
+  );
+  for (const font of fonts) {
+    if (font.cssFamily.includes("var(")) {
+      const m = font.cssFamily.match(/var\((--font-[\w-]+)/);
+      if (m && !varNames.has(m[1])) {
+        console.warn(
+          `[font-switcher] "${font.key}" references "${m[1]}" \u2014 not found in CSS file`
+        );
+      }
+    } else {
+      const first = font.cssFamily.split(",")[0].trim().replace(/['"]/g, "").toLowerCase();
+      if (!SYSTEM_FONTS.has(first) && !faceNames.has(first)) {
+        console.warn(
+          `[font-switcher] "${font.key}" family "${first}" not found in any @font-face declaration`
+        );
+      }
+    }
+  }
+}
+
+// src/capsize.ts
+async function computeTrims(metrics, fontSize) {
+  try {
+    const { createStyleObject } = await import("@capsizecss/core");
+    const style = createStyleObject({ fontSize, fontMetrics: metrics });
+    const capTrim = style["::before"].marginBottom;
+    const baseTrim = style["::after"].marginTop;
+    return { capTrim, baseTrim };
+  } catch {
+    return null;
+  }
+}
+
+// src/css-gen.ts
+async function generateFontCSS(config) {
+  if (config.finalFont) return "";
+  const { fontSize = 16, capsizeSelector = ".capsize", fonts } = config;
+  const lines = [];
+  for (const font of fonts) {
+    lines.push(`html[data-font="${font.key}"] { --font-active: ${font.cssFamily}; }`);
+    if (capsizeSelector !== false && font.metrics) {
+      const trims = await computeTrims(font.metrics, fontSize);
+      if (trims) {
+        lines.push(
+          `html[data-font="${font.key}"] ${capsizeSelector} { --cap-trim: ${trims.capTrim}; --base-trim: ${trims.baseTrim}; }`
+        );
+      }
+    }
+  }
+  return lines.join("\n");
+}
+
+// src/font-features.ts
+import { existsSync } from "fs";
+
+// src/feature-labels.ts
+var BROWSER_DEFAULT_ON = /* @__PURE__ */ new Set(["liga", "clig", "calt", "kern", "locl", "mark", "mkmk"]);
+var SKIP_TAGS = /* @__PURE__ */ new Set([
+  "DFLT",
+  "dflt",
+  "locl",
+  "mark",
+  "mkmk",
+  "dist",
+  "rlig",
+  "curs",
+  "abvm",
+  "blwm",
+  "abvs",
+  "blws",
+  "pres",
+  "psts",
+  "haln",
+  "half",
+  "akhn",
+  "rphf",
+  "blwf",
+  "abvf",
+  "pref",
+  "rkrf",
+  "vatu",
+  "cjct",
+  "nukt",
+  "isol",
+  "init",
+  "medi",
+  "fina",
+  "med2",
+  "fin2",
+  "fin3",
+  "vert",
+  "vrt2",
+  "cfar"
+]);
+var FEATURE_LABELS = {
+  liga: "Standard Ligatures",
+  clig: "Contextual Ligatures",
+  dlig: "Discretionary Ligatures",
+  hlig: "Historical Ligatures",
+  calt: "Contextual Alternates",
+  kern: "Kerning",
+  swsh: "Swash",
+  case: "Case-Sensitive Forms",
+  onum: "Oldstyle Figures",
+  tnum: "Tabular Figures",
+  pnum: "Proportional Figures",
+  lnum: "Lining Figures",
+  frac: "Fractions",
+  afrc: "Alternative Fractions",
+  sups: "Superscript",
+  subs: "Subscript",
+  smcp: "Small Capitals",
+  c2sc: "Caps to Small Caps",
+  pcap: "Petite Capitals",
+  cpsp: "Capital Spacing",
+  zero: "Slashed Zero",
+  ordn: "Ordinals",
+  hist: "Historical Forms",
+  nalt: "Alternate Annotation",
+  salt: "Stylistic Alternates",
+  titl: "Titling",
+  ...Object.fromEntries(
+    Array.from({ length: 20 }, (_, i) => {
+      const n = String(i + 1).padStart(2, "0");
+      return [`ss${n}`, `Stylistic Set ${i + 1}`];
+    })
+  ),
+  ...Object.fromEntries(
+    Array.from({ length: 6 }, (_, i) => {
+      const n = String(i + 1).padStart(2, "0");
+      return [`cv${n}`, `Character Variant ${i + 1}`];
+    })
+  )
+};
+function featuresFromTags(tags) {
+  return tags.filter((tag) => !SKIP_TAGS.has(tag)).map((tag) => ({
+    tag,
+    label: FEATURE_LABELS[tag] ?? tag,
+    enabled: BROWSER_DEFAULT_ON.has(tag)
+  }));
+}
+
+// src/font-features.ts
+async function detectFeaturesFromFile(fontFilePath) {
+  if (!existsSync(fontFilePath)) return [];
+  try {
+    const mod = await import("opentype.js");
+    const loadSync = mod.loadSync ?? mod.default?.loadSync;
+    if (!loadSync) return [];
+    const font = loadSync(fontFilePath);
+    const tags = /* @__PURE__ */ new Set();
+    for (const table of [font.tables.gsub, font.tables.gpos]) {
+      for (const rec of table?.featureList?.featureRecords ?? []) {
+        if (rec?.featureTag) tags.add(rec.featureTag.trim());
+      }
+    }
+    return featuresFromTags([...tags]);
+  } catch {
+    return [];
+  }
+}
+
+// vite-plugin.ts
+var VIRTUAL_ID = "virtual:font-switcher/styles";
+var RESOLVED_ID = "\0virtual:font-switcher/styles";
+var PROD_WARNING = "\n[font-switcher] Overlay is included in this production build.\n  Set finalFont in your config when the client picks a font, then remove the package.\n";
+async function detectAllFeatures(config, root) {
+  const cssFile = path2.resolve(root, config.cssFile ?? "src/styles/index.css");
+  const detected = scanFontsFromCSS(cssFile);
+  const fontFaceMap = /* @__PURE__ */ new Map();
+  const varMap = /* @__PURE__ */ new Map();
+  for (const d of detected) {
+    if (d.source === "@font-face" && d.fontFileSrc) {
+      fontFaceMap.set(d.family.toLowerCase(), d.fontFileSrc);
+    }
+    if (d.source === "--font-var" && d.varName) {
+      varMap.set(d.varName, d.family);
+    }
+  }
+  const result = {};
+  for (const font of config.fonts) {
+    if (font.features?.length) {
+      result[font.key] = font.features;
+      continue;
+    }
+    let familyName;
+    if (font.cssFamily.includes("var(")) {
+      const m = font.cssFamily.match(/var\((--font-[\w-]+)/);
+      if (m) {
+        const resolved2 = varMap.get(m[1]);
+        familyName = resolved2?.split(",")[0].trim().replace(/['"]/g, "");
+      }
+    } else {
+      familyName = font.cssFamily.split(",")[0].trim().replace(/['"]/g, "");
+    }
+    if (!familyName) continue;
+    const fontFileSrc = fontFaceMap.get(familyName.toLowerCase());
+    if (!fontFileSrc || fontFileSrc.startsWith("http")) continue;
+    const resolved = path2.resolve(root, fontFileSrc.startsWith("/") ? fontFileSrc.slice(1) : fontFileSrc);
+    const features = await detectFeaturesFromFile(resolved);
+    if (features.length) result[font.key] = features;
+  }
+  return result;
+}
+function fontSwitcherPlugin(config) {
+  let cssCache = null;
+  let detectedFeatures = null;
+  let root = process.cwd();
+  async function buildCSS() {
+    if (config.finalFont) return "";
+    const cssFile = path2.resolve(root, config.cssFile ?? "src/styles/index.css");
+    const detected = scanFontsFromCSS(cssFile);
+    validateFonts(config.fonts, detected);
+    return generateFontCSS(config);
+  }
+  async function getDetectedFeatures() {
+    if (detectedFeatures === null) {
+      detectedFeatures = config.finalFont ? {} : await detectAllFeatures(config, root);
+    }
+    return detectedFeatures;
+  }
+  return {
+    name: "font-switcher",
+    configResolved(resolvedConfig) {
+      root = resolvedConfig.root;
+    },
+    resolveId(id) {
+      if (id === VIRTUAL_ID) return RESOLVED_ID;
+    },
+    async load(id) {
+      if (id !== RESOLVED_ID) return;
+      if (cssCache === null) cssCache = await buildCSS();
+      const features = await getDetectedFeatures();
+      const hasFeatures = Object.keys(features).length > 0;
+      const hasCSS = !!cssCache;
+      if (!hasCSS && !hasFeatures) return 'export default ""';
+      return `
+const css = ${JSON.stringify(cssCache ?? "")};
+const features = ${JSON.stringify(features)};
+if (typeof window !== 'undefined') {
+  window.__fontSwitcherFeatures = features;
+}
+if (typeof document !== 'undefined' && css) {
+  const el = document.createElement('style');
+  el.setAttribute('data-font-switcher', '');
+  el.textContent = css;
+  document.head.appendChild(el);
+}
+export default css;
+`;
+    },
+    async buildStart() {
+      cssCache = await buildCSS();
+      detectedFeatures = config.finalFont ? {} : await detectAllFeatures(config, root);
+    },
+    generateBundle() {
+      if (!config.finalFont) {
+        this.warn(PROD_WARNING);
+      }
+    },
+    configureServer(server) {
+      const cssFile = path2.resolve(root, config.cssFile ?? "src/styles/index.css");
+      server.watcher.add(cssFile);
+      server.watcher.on("change", async (file) => {
+        if (path2.resolve(file) !== cssFile) return;
+        cssCache = null;
+        detectedFeatures = null;
+        const mod = server.moduleGraph.getModuleById(RESOLVED_ID);
+        if (mod) server.moduleGraph.invalidateModule(mod);
+        server.ws.send({ type: "full-reload" });
+      });
+    }
+  };
+}
+export {
+  fontSwitcherPlugin
+};

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "font-switcher",
+  "version": "0.1.0",
+  "description": "Live font-switching overlay for web projects",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hafeezdaw00d/xxfontswitcherxx.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.cjs"
+    },
+    "./vite": {
+      "types": "./dist/vite-plugin.d.ts",
+      "import": "./dist/vite-plugin.js",
+      "require": "./dist/vite-plugin.cjs"
+    },
+    "./script": {
+      "types": "./dist/script.d.ts",
+      "import": "./dist/script.js",
+      "require": "./dist/script.cjs"
+    }
+  },
+  "bin": {
+    "font-switcher": "dist/bin/cli.js"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "@capsizecss/core": ">=4",
+    "opentype.js": ">=1",
+    "react": ">=18",
+    "vite": ">=5"
+  },
+  "peerDependenciesMeta": {
+    "@capsizecss/core": {
+      "optional": true
+    },
+    "opentype.js": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@capsizecss/core": "^4.1.3",
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.0.0",
+    "opentype.js": "^1.3.4",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0"
+  }
+}