fontaine 0.2.0 → 0.2.3

package/README.md

@@ -86,11 +86,31 @@ function fontainePlugin(_context, _options) {
     },
   };
 }
+
+// Gatsby config - gatsby-node.js
+const { FontaineTransform } = require('fontaine')
+
+exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
+  const config = getConfig()
+  config.plugins.push(FontaineTransform.webpack(options))
+  actions.replaceWebpackConfig(config)
+}
 ```
 
 > **Note**
 > If you are using Nuxt, check out [nuxt-font-metrics](https://github.com/danielroe/nuxt-font-metrics) which uses `fontaine` under the hood.
 
+If your custom font is used through the mechanism of CSS variables, you'll need to make a tweak to your CSS variables to give fontaine a helping hand. Docusaurus is an example of this, it uses the `--ifm-font-family-base` variable to reference a custom font. In order that fontaine can connect the variable with the font, we need to add a `{Name of Font} override` suffix to that variable. What does this look like? Well imagine we were using the custom font Poppins which is referenced from the `--ifm-font-family-base` variable, we'd make the following adjustment:
+
+```diff
+:root {
+  /* ... */
+-  --ifm-font-family-base: 'Poppins';
++  --ifm-font-family-base: 'Poppins', 'Poppins override';
+```
+
+Behind the scenes, there is a 'Poppins override' `@font-face` rule that has been created by fontaine. By manually adding this override font family to our CSS variable, we make our site use the fallback `@font-face` rule with the correct font metrics that fontaine generates.
+
 ## How it works
 
 `fontaine` will scan your `@font-face` rules and generate fallback rules with the correct metrics. For example:

package/dist/index.cjs

@@ -9,15 +9,22 @@ 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 };
-};
+  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 generateOverrideName = (name) => {
   const firstFamily = withoutQuotes(name.split(",").shift());
   return `${firstFamily} override`;
@@ -58,10 +65,12 @@ 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 = {};
@@ -94,6 +103,7 @@ async function readMetrics(_source) {
   return metrics;
 }
 
+const supportedExtensions = ["woff2", "woff", "ttf"];
 const FontaineTransform = unplugin.createUnplugin(
   (options) => {
     const cssContext = options.css = options.css || {};
@@ -109,7 +119,7 @@ const FontaineTransform = unplugin.createUnplugin(
       enforce: "pre",
       transformInclude(id) {
         const { pathname } = ufo.parseURL(id);
-        return pathname.endsWith(".css") || id.endsWith(".css");
+        return CSS_RE.test(pathname) || CSS_RE.test(id);
       },
       async transform(code, id) {
         const s = new MagicString(code);
@@ -119,17 +129,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: overrideName(family),
+                fallbacks: options.fallbacks
+              });
+              cssContext.value += fontFace;
+              s.appendLeft(match.index, fontFace);
+            }
           }
         }
         for (const match of code.matchAll(FONT_FAMILY_RE)) {
@@ -169,6 +182,9 @@ const FONT_FAMILY_RE = magicRegexp.createRegExp(
   magicRegexp.charNotIn(";}").times.any().as("family").after(magicRegexp.exactly("font-family:").and(magicRegexp.whitespace.times.any())).before(magicRegexp.charIn(";}").or(magicRegexp.exactly("").at.lineEnd())),
   ["g"]
 );
+const CSS_RE = magicRegexp.createRegExp(
+  magicRegexp.exactly(".").and(magicRegexp.anyOf("sass", "css", "scss")).at.lineEnd()
+);
 
 exports.FontaineTransform = FontaineTransform;
 exports.generateFontFace = generateFontFace;

package/dist/index.d.ts

@@ -11,7 +11,7 @@ interface FontaineTransformOptions {
     overrideName?: (name: string) => string;
     sourcemap?: boolean;
 }
-declare const FontaineTransform: unplugin.UnpluginInstance<FontaineTransformOptions>;
+declare const FontaineTransform: unplugin.UnpluginInstance<FontaineTransformOptions, false>;
 
 declare const generateOverrideName: (name: string) => string;
 interface GenerateOptions {

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { createUnplugin } from 'unplugin';
-import { createRegExp, charIn, exactly, whitespace, charNotIn } from 'magic-regexp';
+import { createRegExp, charIn, exactly, whitespace, charNotIn, anyOf } from 'magic-regexp';
 import MagicString from 'magic-string';
 import { fileURLToPath } from 'node:url';
 import { fromFile, fromUrl } from '@capsizecss/unpack';
@@ -7,15 +7,22 @@ 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 };
-};
+  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 generateOverrideName = (name) => {
   const firstFamily = withoutQuotes(name.split(",").shift());
   return `${firstFamily} override`;
@@ -56,10 +63,12 @@ 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 = {};
@@ -92,6 +101,7 @@ async function readMetrics(_source) {
   return metrics;
 }
 
+const supportedExtensions = ["woff2", "woff", "ttf"];
 const FontaineTransform = createUnplugin(
   (options) => {
     const cssContext = options.css = options.css || {};
@@ -107,7 +117,7 @@ const FontaineTransform = createUnplugin(
       enforce: "pre",
       transformInclude(id) {
         const { pathname } = parseURL(id);
-        return pathname.endsWith(".css") || id.endsWith(".css");
+        return CSS_RE.test(pathname) || CSS_RE.test(id);
       },
       async transform(code, id) {
         const s = new MagicString(code);
@@ -117,17 +127,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: overrideName(family),
+                fallbacks: options.fallbacks
+              });
+              cssContext.value += fontFace;
+              s.appendLeft(match.index, fontFace);
+            }
           }
         }
         for (const match of code.matchAll(FONT_FAMILY_RE)) {
@@ -167,5 +180,8 @@ const FONT_FAMILY_RE = createRegExp(
   charNotIn(";}").times.any().as("family").after(exactly("font-family:").and(whitespace.times.any())).before(charIn(";}").or(exactly("").at.lineEnd())),
   ["g"]
 );
+const CSS_RE = createRegExp(
+  exactly(".").and(anyOf("sass", "css", "scss")).at.lineEnd()
+);
 
 export { FontaineTransform, generateFontFace, generateOverrideName, getMetricsForFamily, readMetrics };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontaine",
-  "version": "0.2.0",
+  "version": "0.2.3",
   "description": "Automatic font fallback based on font metrics",
   "repository": "unjs/fontaine",
   "keywords": [
@@ -48,23 +48,23 @@
   "dependencies": {
     "@capsizecss/metrics": "^0.3.0",
     "@capsizecss/unpack": "^0.1.0",
-    "magic-regexp": "^0.5.0",
+    "magic-regexp": "^0.6.0",
     "magic-string": "^0.26.7",
     "pathe": "^0.3.9",
     "scule": "^0.3.2",
     "ufo": "^0.8.6",
-    "unplugin": "^0.9.6"
+    "unplugin": "^0.10.2"
   },
   "devDependencies": {
     "@nuxtjs/eslint-config-typescript": "latest",
     "@release-it/conventional-changelog": "latest",
-    "@types/node": "latest",
+    "@types/node": "^18.11.8",
     "@types/serve-handler": "^6.1.1",
-    "@typescript-eslint/eslint-plugin": "^5.40.0",
-    "@typescript-eslint/parser": "^5.40.0",
-    "@vitest/coverage-c8": "^0.24.3",
+    "@typescript-eslint/eslint-plugin": "^5.41.0",
+    "@typescript-eslint/parser": "^5.41.0",
+    "@vitest/coverage-c8": "^0.24.4",
     "conventional-changelog-conventionalcommits": "latest",
-    "eslint": "latest",
+    "eslint": "^8.26.0",
     "eslint-config-prettier": "latest",
     "eslint-plugin-prettier": "latest",
     "execa": "^6.1.0",
@@ -77,11 +77,11 @@
     "serve-handler": "^6.1.3",
     "typescript": "latest",
     "unbuild": "latest",
-    "vite": "latest",
-    "vitest": "latest"
+    "vite": "^3.2.2",
+    "vitest": "^0.24.4"
   },
   "resolutions": {
     "fontaine": "link:."
   },
-  "packageManager": "pnpm@7.13.5"
+  "packageManager": "pnpm@7.14.1"
 }