fontaine 0.1.1 → 0.1.3

package/README.md

@@ -7,13 +7,11 @@
 
 > Automatic font fallback based on font metrics
 
-- [✨  Changelog](https://github.com/danielroe/fontaine/blob/main/CHANGELOG.md)
-- [▶️  Online playground](https://stackblitz.com/github/danielroe/fontaine/tree/main/playground)
+- [✨  Changelog](https://github.com/unjs/fontaine/blob/main/CHANGELOG.md)
+- [▶️  Online playground](https://stackblitz.com/github/unjs/fontaine/tree/main/playground)
 
 ## Features
 
-**⚠️ `fontaine` is under active development. ⚠️**
-
 - 💪 Reduces CLS by using local font fallbacks with crafted font metrics.
 - ✨ Generates font metrics and overrides automatically.
 - ⚡️ Pure CSS, zero runtime overhead.
@@ -51,7 +49,7 @@ yarn add -D fontaine
 import { FontaineTransform } from 'fontaine'
 
 const options = {
-  fallbacks: ['BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans'],
+  fallbacks: ['BlinkMacSystemFont', 'Segoe UI', 'Helvetica Neue', 'Arial', 'Noto Sans'],
   // You may need to resolve assets like `/fonts/Roboto.woff2` to a particular directory
   resolvePath: (id) => 'file:///path/to/public/dir' + id,
 }
@@ -89,9 +87,8 @@ export default {
 /* This additional font-face declaration will be added to your CSS. */
 @font-face {
   font-family: 'Roboto override';
-  src: local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto'), local(
-      'Helvetica Neue'
-    ), local('Arial'), local('Noto Sans');
+  src: local('BlinkMacSystemFont'), local('Segoe UI'), local('Helvetica Neue'),
+      local('Arial'), local('Noto Sans');
   ascent-override: 92.7734375%;
   descent-override: 24.4140625%;
   line-gap-override: 0%;
@@ -120,7 +117,8 @@ Then, whenever you use `font-family: 'Roboto'`, `fontaine` will add the override
 This would not have been possible without:
 
 - amazing tooling and generated metrics from [capsizecss](https://seek-oss.github.io/capsize/)
-- suggestion and algorithm from [Katie Hempenius](https://katiehempenius.com/) & [Kara Erickson](https://github.com/kara) on the Google Aurora team - see [notes on calculating font metric overrides](https://docs.google.com/document/d/e/2PACX-1vRsazeNirATC7lIj2aErSHpK26hZ6dA9GsQ069GEbq5fyzXEhXbvByoftSfhG82aJXmrQ_sJCPBqcx_/pub).
+- suggestion and algorithm from [Katie Hempenius](https://katiehempenius.com/) & [Kara Erickson](https://github.com/kara) on the Google Aurora team - see [notes on calculating font metric overrides](https://docs.google.com/document/d/e/2PACX-1vRsazeNirATC7lIj2aErSHpK26hZ6dA9GsQ069GEbq5fyzXEhXbvByoftSfhG82aJXmrQ_sJCPBqcx_/pub)
+- package name suggestion from [**@clemcode**](https://github.com/clemcode)
 
 ## License
 
@@ -134,7 +132,7 @@ Published under [MIT License](./LICENCE).
 [npm-version-href]: https://npmjs.com/package/fontaine
 [npm-downloads-src]: https://img.shields.io/npm/dm/fontaine?style=flat-square
 [npm-downloads-href]: https://npmjs.com/package/fontaine
-[github-actions-src]: https://img.shields.io/github/workflow/status/danielroe/fontaine/ci/main?style=flat-square
-[github-actions-href]: https://github.com/danielroe/fontaine/actions?query=workflow%3Aci
-[codecov-src]: https://img.shields.io/codecov/c/gh/danielroe/fontaine/main?style=flat-square
-[codecov-href]: https://codecov.io/gh/danielroe/fontaine
+[github-actions-src]: https://img.shields.io/github/workflow/status/unjs/fontaine/ci/main?style=flat-square
+[github-actions-href]: https://github.com/unjs/fontaine/actions?query=workflow%3Aci
+[codecov-src]: https://img.shields.io/codecov/c/gh/unjs/fontaine/main?style=flat-square
+[codecov-href]: https://codecov.io/gh/unjs/fontaine

package/dist/index.cjs

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 const unplugin = require('unplugin');
 const magicRegexp = require('magic-regexp');
 const MagicString = require('magic-string');
@@ -9,10 +7,7 @@ const node_url = require('node:url');
 const unpack = require('@capsizecss/unpack');
 const ufo = require('ufo');
 const scule = require('scule');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
-
-const MagicString__default = /*#__PURE__*/_interopDefaultLegacy(MagicString);
+const pathe = require('pathe');
 
 const parseFontFace = (css) => {
   const fontFamily = css.match(FAMILY_RE)?.groups.fontFamily;
@@ -103,6 +98,11 @@ const FontaineTransform = unplugin.createUnplugin(
   (options) => {
     const cssContext = options.css = options.css || {};
     cssContext.value = "";
+    options.resolvePath = options.resolvePath || ((id) => id);
+    function readMetricsFromId(path, importer) {
+      const resolvedPath = pathe.isAbsolute(importer) && path.startsWith(".") ? pathe.join(importer, path) : options.resolvePath(path);
+      return readMetrics(resolvedPath);
+    }
     return {
       name: "fontaine-transform",
       enforce: "pre",
@@ -111,7 +111,7 @@ const FontaineTransform = unplugin.createUnplugin(
         return pathname.endsWith(".css") || id.endsWith(".css");
       },
       async transform(code, id) {
-        const s = new MagicString__default(code);
+        const s = new MagicString(code);
         const faceRanges = [];
         for (const match of code.matchAll(FONT_FACE_RE)) {
           const matchContent = match[0];
@@ -121,9 +121,7 @@ const FontaineTransform = unplugin.createUnplugin(
           const { family, source } = parseFontFace(matchContent);
           if (!family)
             continue;
-          const metrics = await getMetricsForFamily(family) || (source ? await readMetrics(
-            options.resolvePath ? options.resolvePath(source) : source
-          ).catch(() => null) : null);
+          const metrics = await getMetricsForFamily(family) || source && await readMetricsFromId(source, id).catch(() => null);
           if (metrics) {
             const fontFace = generateFontFace(metrics, {
               name: generateOverrideName(family),
@@ -139,7 +137,9 @@ const FontaineTransform = unplugin.createUnplugin(
             continue;
           if (faceRanges.some(([start, end]) => index > start && index < end))
             continue;
-          const families = matchContent.split(",").map((f) => f.trim());
+          const families = matchContent.split(",").map((f) => f.trim()).filter((f) => !f.startsWith("var("));
+          if (!families.length)
+            continue;
           s.overwrite(
             index,
             index + matchContent.length,

package/dist/index.mjs

@@ -5,6 +5,7 @@ import { fileURLToPath } from 'node:url';
 import { fromFile, fromUrl } from '@capsizecss/unpack';
 import { parseURL } from 'ufo';
 import { camelCase } from 'scule';
+import { isAbsolute, join } from 'pathe';
 
 const parseFontFace = (css) => {
   const fontFamily = css.match(FAMILY_RE)?.groups.fontFamily;
@@ -95,6 +96,11 @@ const FontaineTransform = createUnplugin(
   (options) => {
     const cssContext = options.css = options.css || {};
     cssContext.value = "";
+    options.resolvePath = options.resolvePath || ((id) => id);
+    function readMetricsFromId(path, importer) {
+      const resolvedPath = isAbsolute(importer) && path.startsWith(".") ? join(importer, path) : options.resolvePath(path);
+      return readMetrics(resolvedPath);
+    }
     return {
       name: "fontaine-transform",
       enforce: "pre",
@@ -113,9 +119,7 @@ const FontaineTransform = createUnplugin(
           const { family, source } = parseFontFace(matchContent);
           if (!family)
             continue;
-          const metrics = await getMetricsForFamily(family) || (source ? await readMetrics(
-            options.resolvePath ? options.resolvePath(source) : source
-          ).catch(() => null) : null);
+          const metrics = await getMetricsForFamily(family) || source && await readMetricsFromId(source, id).catch(() => null);
           if (metrics) {
             const fontFace = generateFontFace(metrics, {
               name: generateOverrideName(family),
@@ -131,7 +135,9 @@ const FontaineTransform = createUnplugin(
             continue;
           if (faceRanges.some(([start, end]) => index > start && index < end))
             continue;
-          const families = matchContent.split(",").map((f) => f.trim());
+          const families = matchContent.split(",").map((f) => f.trim()).filter((f) => !f.startsWith("var("));
+          if (!families.length)
+            continue;
           s.overwrite(
             index,
             index + matchContent.length,

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "fontaine",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Automatic font fallback based on font metrics",
-  "repository": "danielroe/fontaine",
+  "repository": "unjs/fontaine",
   "keywords": [
     "fonts",
     "cls",
@@ -49,10 +49,10 @@
     "@capsizecss/metrics": "^0.3.0",
     "@capsizecss/unpack": "^0.1.0",
     "magic-regexp": "^0.5.0",
-    "magic-string": "^0.26.4",
-    "pathe": "^0.3.8",
+    "magic-string": "^0.26.7",
+    "pathe": "^0.3.9",
     "scule": "^0.3.2",
-    "ufo": "^0.8.5",
+    "ufo": "^0.8.6",
     "unplugin": "^0.9.6"
   },
   "devDependencies": {
@@ -60,14 +60,14 @@
     "@release-it/conventional-changelog": "latest",
     "@types/node": "latest",
     "@types/serve-handler": "^6.1.1",
-    "@vitest/coverage-c8": "^0.23.4",
-    "c8": "latest",
+    "@typescript-eslint/eslint-plugin": "^5.40.0",
+    "@typescript-eslint/parser": "^5.40.0",
+    "@vitest/coverage-c8": "^0.24.3",
     "conventional-changelog-conventionalcommits": "latest",
     "eslint": "latest",
     "eslint-config-prettier": "latest",
     "eslint-plugin-prettier": "latest",
     "execa": "^6.1.0",
-    "expect-type": "latest",
     "get-port-please": "^2.6.1",
     "husky": "latest",
     "lint-staged": "latest",
@@ -83,5 +83,5 @@
   "resolutions": {
     "fontaine": "link:."
   },
-  "packageManager": "pnpm@7.12.2"
+  "packageManager": "pnpm@7.13.4"
 }