fontaine 0.2.1 → 0.3.0

package/README.md

@@ -95,6 +95,22 @@ exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
   config.plugins.push(FontaineTransform.webpack(options))
   actions.replaceWebpackConfig(config)
 }
+
+// Astro config - astro.config.mjs
+import { defineConfig } from 'astro/config'
+import { FontaineTransform } from 'fontaine'
+
+export default defineConfig({
+  integrations: [],
+  vite: {
+    plugins: [
+      FontaineTransform.vite({
+        fallbacks: ['Arial'],
+        resolvePath: (id) => new URL(`./public${id}`, import.meta.url), // id is the font src value in the CSS
+      }),
+    ],
+  },
+})
 ```
 
 > **Note**

package/dist/index.cjs

@@ -5,22 +5,29 @@ const magicRegexp = require('magic-regexp');
 const MagicString = require('magic-string');
 const node_url = require('node:url');
 const unpack = require('@capsizecss/unpack');
+const metrics = require('@capsizecss/metrics');
 const ufo = require('ufo');
-const scule = require('scule');
 const pathe = require('pathe');
 
-const parseFontFace = (css) => {
+function* parseFontFace(css) {
   const fontFamily = css.match(FAMILY_RE)?.groups.fontFamily;
-  const src = css.match(SOURCE_RE)?.groups.src;
   const family = withoutQuotes(fontFamily?.split(",")[0] || "");
-  const source = withoutQuotes(
-    src?.split(",").map((source2) => source2.match(URL_RE)?.groups.url).filter(Boolean)[0] || ""
-  );
-  return { family, source };
-};
-const generateOverrideName = (name) => {
+  for (const match of css.matchAll(SOURCE_RE)) {
+    const sources = match.groups.src?.split(",");
+    for (const entry of sources || []) {
+      for (const url of entry.matchAll(URL_RE)) {
+        const source = withoutQuotes(url.groups?.url || "");
+        if (source) {
+          yield { family, source };
+        }
+      }
+    }
+  }
+  yield { family: "", source: "" };
+}
+const generateFallbackName = (name) => {
   const firstFamily = withoutQuotes(name.split(",").shift());
-  return `${firstFamily} override`;
+  return `${firstFamily} fallback`;
 };
 const withoutQuotes = (str) => str.trim().replace(QUOTES_RE, "");
 const generateFontFace = (metrics, options) => {
@@ -29,6 +36,7 @@ const generateFontFace = (metrics, options) => {
   const declaration = {
     "font-family": JSON.stringify(name),
     src: fallbacks.map((f) => `local(${JSON.stringify(f)})`),
+    // 'size-adjust': toPercentage(sizeAdjust),
     "ascent-override": toPercentage(
       metrics.ascent / (metrics.unitsPerEm * sizeAdjust)
     ),
@@ -58,24 +66,37 @@ const FAMILY_RE = magicRegexp.createRegExp(
   magicRegexp.exactly("font-family:").and(magicRegexp.whitespace.optionally()).and(magicRegexp.charNotIn(";}").times.any().as("fontFamily"))
 );
 const SOURCE_RE = magicRegexp.createRegExp(
-  magicRegexp.exactly("src:").and(magicRegexp.whitespace.optionally()).and(magicRegexp.charNotIn(";}").times.any().as("src"))
+  magicRegexp.exactly("src:").and(magicRegexp.whitespace.optionally()).and(magicRegexp.charNotIn(";}").times.any().as("src")),
+  ["g"]
 );
 const URL_RE = magicRegexp.createRegExp(
-  magicRegexp.exactly("url(").and(magicRegexp.charNotIn(")").times.any().as("url")).and(")")
+  magicRegexp.exactly("url(").and(magicRegexp.charNotIn(")").times.any().as("url")).and(")"),
+  ["g"]
 );
 
 const metricCache = {};
+const filterRequiredMetrics = ({
+  ascent,
+  descent,
+  lineGap,
+  unitsPerEm
+}) => ({
+  ascent,
+  descent,
+  lineGap,
+  unitsPerEm
+});
 async function getMetricsForFamily(family) {
   family = withoutQuotes(family);
   if (family in metricCache)
     return metricCache[family];
   try {
-    const name = scule.camelCase(family).replace(/ /, "");
-    const metrics = await import(`@capsizecss/metrics/${name}.js`).then(
-      (r) => r.default || r
-    );
-    metricCache[family] = metrics;
-    return metrics;
+    const name = metrics.fontFamilyToCamelCase(family);
+    const { entireMetricsCollection } = await import('@capsizecss/metrics/entireMetricsCollection');
+    const metrics$1 = entireMetricsCollection[name];
+    const filteredMetrics = filterRequiredMetrics(metrics$1);
+    metricCache[family] = filteredMetrics;
+    return filteredMetrics;
   } catch {
     metricCache[family] = null;
     return null;
@@ -90,16 +111,18 @@ async function readMetrics(_source) {
   if (!protocol)
     return null;
   const metrics = protocol === "file:" ? await unpack.fromFile(node_url.fileURLToPath(source)) : await unpack.fromUrl(source);
-  metricCache[source] = metrics;
-  return metrics;
+  const filteredMetrics = filterRequiredMetrics(metrics);
+  metricCache[source] = filteredMetrics;
+  return filteredMetrics;
 }
 
+const supportedExtensions = ["woff2", "woff", "ttf"];
 const FontaineTransform = unplugin.createUnplugin(
   (options) => {
     const cssContext = options.css = options.css || {};
     cssContext.value = "";
     const resolvePath = options.resolvePath || ((id) => id);
-    const overrideName = options.overrideName || generateOverrideName;
+    const fallbackName = options.fallbackName || options.overrideName || generateFallbackName;
     function readMetricsFromId(path, importer) {
       const resolvedPath = pathe.isAbsolute(importer) && path.startsWith(".") ? pathe.join(importer, path) : resolvePath(path);
       return readMetrics(resolvedPath);
@@ -119,17 +142,20 @@ const FontaineTransform = unplugin.createUnplugin(
           if (match.index === void 0 || !matchContent)
             continue;
           faceRanges.push([match.index, match.index + matchContent.length]);
-          const { family, source } = parseFontFace(matchContent);
-          if (!family)
-            continue;
-          const metrics = await getMetricsForFamily(family) || source && await readMetricsFromId(source, id).catch(() => null);
-          if (metrics) {
-            const fontFace = generateFontFace(metrics, {
-              name: overrideName(family),
-              fallbacks: options.fallbacks
-            });
-            cssContext.value += fontFace;
-            s.appendLeft(match.index, fontFace);
+          for (const { family, source } of parseFontFace(matchContent)) {
+            if (!family)
+              continue;
+            if (!supportedExtensions.some((e) => source?.endsWith(e)))
+              continue;
+            const metrics = await getMetricsForFamily(family) || source && await readMetricsFromId(source, id).catch(() => null);
+            if (metrics) {
+              const fontFace = generateFontFace(metrics, {
+                name: fallbackName(family),
+                fallbacks: options.fallbacks
+              });
+              cssContext.value += fontFace;
+              s.appendLeft(match.index, fontFace);
+            }
           }
         }
         for (const match of code.matchAll(FONT_FAMILY_RE)) {
@@ -139,14 +165,14 @@ const FontaineTransform = unplugin.createUnplugin(
           if (faceRanges.some(([start, end]) => index > start && index < end))
             continue;
           const families = matchContent.split(",").map((f) => f.trim()).filter((f) => !f.startsWith("var("));
-          if (!families.length)
+          if (!families.length || families[0] === "inherit")
             continue;
           s.overwrite(
             index,
             index + matchContent.length,
             " " + [
               families[0],
-              `"${generateOverrideName(families[0])}"`,
+              `"${generateFallbackName(families[0])}"`,
               ...families.slice(1)
             ].join(", ")
           );
@@ -174,7 +200,7 @@ const CSS_RE = magicRegexp.createRegExp(
 );
 
 exports.FontaineTransform = FontaineTransform;
+exports.generateFallbackName = generateFallbackName;
 exports.generateFontFace = generateFontFace;
-exports.generateOverrideName = generateOverrideName;
 exports.getMetricsForFamily = getMetricsForFamily;
 exports.readMetrics = readMetrics;

package/dist/index.d.ts

@@ -8,42 +8,23 @@ interface FontaineTransformOptions {
     fallbacks: string[];
     resolvePath?: (path: string) => string | URL;
     /** this should produce an unquoted font family name */
+    fallbackName?: (name: string) => string;
+    /** @deprecated use fallbackName */
     overrideName?: (name: string) => string;
     sourcemap?: boolean;
 }
-declare const FontaineTransform: unplugin.UnpluginInstance<FontaineTransformOptions>;
+declare const FontaineTransform: unplugin.UnpluginInstance<FontaineTransformOptions, boolean>;
 
-declare const generateOverrideName: (name: string) => string;
+declare const generateFallbackName: (name: string) => string;
 interface GenerateOptions {
     name: string;
     fallbacks: string[];
     [key: string]: any;
 }
-declare const generateFontFace: (metrics: Font, options: GenerateOptions) => string;
+type FontFaceMetrics = Pick<Font, 'ascent' | 'descent' | 'lineGap' | 'unitsPerEm'>;
+declare const generateFontFace: (metrics: FontFaceMetrics, options: GenerateOptions) => string;
 
-declare function getMetricsForFamily(family: string): Promise<{
-    familyName: string;
-    fullName: string;
-    postscriptName: string;
-    subfamilyName: string;
-    capHeight: number;
-    ascent: number;
-    descent: number;
-    lineGap: number;
-    unitsPerEm: number;
-    xHeight: number;
-} | null>;
-declare function readMetrics(_source: URL | string): Promise<{
-    familyName: string;
-    fullName: string;
-    postscriptName: string;
-    subfamilyName: string;
-    capHeight: number;
-    ascent: number;
-    descent: number;
-    lineGap: number;
-    unitsPerEm: number;
-    xHeight: number;
-} | null>;
+declare function getMetricsForFamily(family: string): Promise<FontFaceMetrics | null>;
+declare function readMetrics(_source: URL | string): Promise<FontFaceMetrics | null>;
 
-export { FontaineTransform, generateFontFace, generateOverrideName, getMetricsForFamily, readMetrics };
+export { FontaineTransform, generateFallbackName, generateFontFace, getMetricsForFamily, readMetrics };

package/dist/index.mjs

@@ -3,22 +3,29 @@ import { createRegExp, charIn, exactly, whitespace, charNotIn, anyOf } from 'mag
 import MagicString from 'magic-string';
 import { fileURLToPath } from 'node:url';
 import { fromFile, fromUrl } from '@capsizecss/unpack';
+import { fontFamilyToCamelCase } from '@capsizecss/metrics';
 import { parseURL } from 'ufo';
-import { camelCase } from 'scule';
 import { isAbsolute, join } from 'pathe';
 
-const parseFontFace = (css) => {
+function* parseFontFace(css) {
   const fontFamily = css.match(FAMILY_RE)?.groups.fontFamily;
-  const src = css.match(SOURCE_RE)?.groups.src;
   const family = withoutQuotes(fontFamily?.split(",")[0] || "");
-  const source = withoutQuotes(
-    src?.split(",").map((source2) => source2.match(URL_RE)?.groups.url).filter(Boolean)[0] || ""
-  );
-  return { family, source };
-};
-const generateOverrideName = (name) => {
+  for (const match of css.matchAll(SOURCE_RE)) {
+    const sources = match.groups.src?.split(",");
+    for (const entry of sources || []) {
+      for (const url of entry.matchAll(URL_RE)) {
+        const source = withoutQuotes(url.groups?.url || "");
+        if (source) {
+          yield { family, source };
+        }
+      }
+    }
+  }
+  yield { family: "", source: "" };
+}
+const generateFallbackName = (name) => {
   const firstFamily = withoutQuotes(name.split(",").shift());
-  return `${firstFamily} override`;
+  return `${firstFamily} fallback`;
 };
 const withoutQuotes = (str) => str.trim().replace(QUOTES_RE, "");
 const generateFontFace = (metrics, options) => {
@@ -27,6 +34,7 @@ const generateFontFace = (metrics, options) => {
   const declaration = {
     "font-family": JSON.stringify(name),
     src: fallbacks.map((f) => `local(${JSON.stringify(f)})`),
+    // 'size-adjust': toPercentage(sizeAdjust),
     "ascent-override": toPercentage(
       metrics.ascent / (metrics.unitsPerEm * sizeAdjust)
     ),
@@ -56,24 +64,37 @@ const FAMILY_RE = createRegExp(
   exactly("font-family:").and(whitespace.optionally()).and(charNotIn(";}").times.any().as("fontFamily"))
 );
 const SOURCE_RE = createRegExp(
-  exactly("src:").and(whitespace.optionally()).and(charNotIn(";}").times.any().as("src"))
+  exactly("src:").and(whitespace.optionally()).and(charNotIn(";}").times.any().as("src")),
+  ["g"]
 );
 const URL_RE = createRegExp(
-  exactly("url(").and(charNotIn(")").times.any().as("url")).and(")")
+  exactly("url(").and(charNotIn(")").times.any().as("url")).and(")"),
+  ["g"]
 );
 
 const metricCache = {};
+const filterRequiredMetrics = ({
+  ascent,
+  descent,
+  lineGap,
+  unitsPerEm
+}) => ({
+  ascent,
+  descent,
+  lineGap,
+  unitsPerEm
+});
 async function getMetricsForFamily(family) {
   family = withoutQuotes(family);
   if (family in metricCache)
     return metricCache[family];
   try {
-    const name = camelCase(family).replace(/ /, "");
-    const metrics = await import(`@capsizecss/metrics/${name}.js`).then(
-      (r) => r.default || r
-    );
-    metricCache[family] = metrics;
-    return metrics;
+    const name = fontFamilyToCamelCase(family);
+    const { entireMetricsCollection } = await import('@capsizecss/metrics/entireMetricsCollection');
+    const metrics = entireMetricsCollection[name];
+    const filteredMetrics = filterRequiredMetrics(metrics);
+    metricCache[family] = filteredMetrics;
+    return filteredMetrics;
   } catch {
     metricCache[family] = null;
     return null;
@@ -88,16 +109,18 @@ async function readMetrics(_source) {
   if (!protocol)
     return null;
   const metrics = protocol === "file:" ? await fromFile(fileURLToPath(source)) : await fromUrl(source);
-  metricCache[source] = metrics;
-  return metrics;
+  const filteredMetrics = filterRequiredMetrics(metrics);
+  metricCache[source] = filteredMetrics;
+  return filteredMetrics;
 }
 
+const supportedExtensions = ["woff2", "woff", "ttf"];
 const FontaineTransform = createUnplugin(
   (options) => {
     const cssContext = options.css = options.css || {};
     cssContext.value = "";
     const resolvePath = options.resolvePath || ((id) => id);
-    const overrideName = options.overrideName || generateOverrideName;
+    const fallbackName = options.fallbackName || options.overrideName || generateFallbackName;
     function readMetricsFromId(path, importer) {
       const resolvedPath = isAbsolute(importer) && path.startsWith(".") ? join(importer, path) : resolvePath(path);
       return readMetrics(resolvedPath);
@@ -117,17 +140,20 @@ const FontaineTransform = createUnplugin(
           if (match.index === void 0 || !matchContent)
             continue;
           faceRanges.push([match.index, match.index + matchContent.length]);
-          const { family, source } = parseFontFace(matchContent);
-          if (!family)
-            continue;
-          const metrics = await getMetricsForFamily(family) || source && await readMetricsFromId(source, id).catch(() => null);
-          if (metrics) {
-            const fontFace = generateFontFace(metrics, {
-              name: overrideName(family),
-              fallbacks: options.fallbacks
-            });
-            cssContext.value += fontFace;
-            s.appendLeft(match.index, fontFace);
+          for (const { family, source } of parseFontFace(matchContent)) {
+            if (!family)
+              continue;
+            if (!supportedExtensions.some((e) => source?.endsWith(e)))
+              continue;
+            const metrics = await getMetricsForFamily(family) || source && await readMetricsFromId(source, id).catch(() => null);
+            if (metrics) {
+              const fontFace = generateFontFace(metrics, {
+                name: fallbackName(family),
+                fallbacks: options.fallbacks
+              });
+              cssContext.value += fontFace;
+              s.appendLeft(match.index, fontFace);
+            }
           }
         }
         for (const match of code.matchAll(FONT_FAMILY_RE)) {
@@ -137,14 +163,14 @@ const FontaineTransform = createUnplugin(
           if (faceRanges.some(([start, end]) => index > start && index < end))
             continue;
           const families = matchContent.split(",").map((f) => f.trim()).filter((f) => !f.startsWith("var("));
-          if (!families.length)
+          if (!families.length || families[0] === "inherit")
             continue;
           s.overwrite(
             index,
             index + matchContent.length,
             " " + [
               families[0],
-              `"${generateOverrideName(families[0])}"`,
+              `"${generateFallbackName(families[0])}"`,
               ...families.slice(1)
             ].join(", ")
           );
@@ -171,4 +197,4 @@ const CSS_RE = createRegExp(
   exactly(".").and(anyOf("sass", "css", "scss")).at.lineEnd()
 );
 
-export { FontaineTransform, generateFontFace, generateOverrideName, getMetricsForFamily, readMetrics };
+export { FontaineTransform, generateFallbackName, generateFontFace, getMetricsForFamily, readMetrics };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontaine",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Automatic font fallback based on font metrics",
   "repository": "unjs/fontaine",
   "keywords": [
@@ -40,48 +40,45 @@
     "lint:prettier": "prettier --write --loglevel warn",
     "prepare": "husky install && pnpm build",
     "prepublishOnly": "pnpm lint && pnpm test && pinst --disable",
-    "release": "release-it",
+    "release": "pnpm test && bumpp && npm publish",
     "test": "vitest run",
     "_postinstall": "husky install",
     "postpublish": "pinst --enable"
   },
   "dependencies": {
-    "@capsizecss/metrics": "^0.3.0",
-    "@capsizecss/unpack": "^0.1.0",
-    "magic-regexp": "^0.5.0",
-    "magic-string": "^0.26.7",
-    "pathe": "^0.3.9",
-    "scule": "^0.3.2",
-    "ufo": "^0.8.6",
-    "unplugin": "^0.10.0"
+    "@capsizecss/metrics": "^1.1.1",
+    "@capsizecss/unpack": "^1.0.0",
+    "magic-regexp": "^0.6.3",
+    "magic-string": "^0.30.0",
+    "pathe": "^1.1.0",
+    "ufo": "^1.1.1",
+    "unplugin": "^1.1.0"
   },
   "devDependencies": {
     "@nuxtjs/eslint-config-typescript": "latest",
-    "@release-it/conventional-changelog": "latest",
-    "@types/node": "latest",
-    "@types/serve-handler": "^6.1.1",
-    "@typescript-eslint/eslint-plugin": "^5.40.1",
-    "@typescript-eslint/parser": "^5.40.1",
-    "@vitest/coverage-c8": "^0.24.3",
-    "conventional-changelog-conventionalcommits": "latest",
-    "eslint": "latest",
+    "@types/node": "18.14.6",
+    "@types/serve-handler": "6.1.1",
+    "@typescript-eslint/eslint-plugin": "5.54.0",
+    "@typescript-eslint/parser": "5.54.0",
+    "@vitest/coverage-c8": "0.29.2",
+    "bumpp": "^9.0.0",
+    "eslint": "8.35.0",
     "eslint-config-prettier": "latest",
     "eslint-plugin-prettier": "latest",
-    "execa": "^6.1.0",
-    "get-port-please": "^2.6.1",
+    "execa": "7.0.0",
+    "get-port-please": "3.0.1",
     "husky": "latest",
     "lint-staged": "latest",
     "pinst": "latest",
     "prettier": "latest",
-    "release-it": "latest",
-    "serve-handler": "^6.1.3",
+    "serve-handler": "6.1.5",
     "typescript": "latest",
     "unbuild": "latest",
-    "vite": "latest",
-    "vitest": "latest"
+    "vite": "4.1.4",
+    "vitest": "0.29.2"
   },
   "resolutions": {
     "fontaine": "link:."
   },
-  "packageManager": "pnpm@7.13.5"
+  "packageManager": "pnpm@7.28.0"
 }