fontaine 0.1.3 → 0.2.1

package/README.md

@@ -52,6 +52,8 @@ const options = {
   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,
+  // overrideName: (originalName) => `${name} override`
+  // sourcemap: false
 }
 
 // Vite
@@ -67,11 +69,48 @@ export default {
     return config
   },
 }
+
+// Docusaurus plugin - to be provided to the plugins option of docusaurus.config.js
+// n.b. you'll likely need to require fontaine rather than importing it
+const fontaine = require('fontaine')
+
+function fontainePlugin(_context, _options) {
+  return {
+    name: 'fontaine-plugin',
+    configureWebpack(_config, _isServer) {
+      return {
+        plugins: [
+          fontaine.FontaineTransform.webpack(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

@@ -98,9 +98,10 @@ const FontaineTransform = unplugin.createUnplugin(
   (options) => {
     const cssContext = options.css = options.css || {};
     cssContext.value = "";
-    options.resolvePath = options.resolvePath || ((id) => id);
+    const resolvePath = options.resolvePath || ((id) => id);
+    const overrideName = options.overrideName || generateOverrideName;
     function readMetricsFromId(path, importer) {
-      const resolvedPath = pathe.isAbsolute(importer) && path.startsWith(".") ? pathe.join(importer, path) : options.resolvePath(path);
+      const resolvedPath = pathe.isAbsolute(importer) && path.startsWith(".") ? pathe.join(importer, path) : resolvePath(path);
       return readMetrics(resolvedPath);
     }
     return {
@@ -108,7 +109,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);
@@ -124,7 +125,7 @@ const FontaineTransform = unplugin.createUnplugin(
           const metrics = await getMetricsForFamily(family) || source && await readMetricsFromId(source, id).catch(() => null);
           if (metrics) {
             const fontFace = generateFontFace(metrics, {
-              name: generateOverrideName(family),
+              name: overrideName(family),
               fallbacks: options.fallbacks
             });
             cssContext.value += fontFace;
@@ -168,6 +169,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

@@ -7,6 +7,8 @@ interface FontaineTransformOptions {
     };
     fallbacks: string[];
     resolvePath?: (path: string) => string | URL;
+    /** this should produce an unquoted font family name */
+    overrideName?: (name: string) => string;
     sourcemap?: boolean;
 }
 declare const FontaineTransform: unplugin.UnpluginInstance<FontaineTransformOptions>;

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';
@@ -96,9 +96,10 @@ const FontaineTransform = createUnplugin(
   (options) => {
     const cssContext = options.css = options.css || {};
     cssContext.value = "";
-    options.resolvePath = options.resolvePath || ((id) => id);
+    const resolvePath = options.resolvePath || ((id) => id);
+    const overrideName = options.overrideName || generateOverrideName;
     function readMetricsFromId(path, importer) {
-      const resolvedPath = isAbsolute(importer) && path.startsWith(".") ? join(importer, path) : options.resolvePath(path);
+      const resolvedPath = isAbsolute(importer) && path.startsWith(".") ? join(importer, path) : resolvePath(path);
       return readMetrics(resolvedPath);
     }
     return {
@@ -106,7 +107,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);
@@ -122,7 +123,7 @@ const FontaineTransform = createUnplugin(
           const metrics = await getMetricsForFamily(family) || source && await readMetricsFromId(source, id).catch(() => null);
           if (metrics) {
             const fontFace = generateFontFace(metrics, {
-              name: generateOverrideName(family),
+              name: overrideName(family),
               fallbacks: options.fallbacks
             });
             cssContext.value += fontFace;
@@ -166,5 +167,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.1.3",
+  "version": "0.2.1",
   "description": "Automatic font fallback based on font metrics",
   "repository": "unjs/fontaine",
   "keywords": [
@@ -53,15 +53,15 @@
     "pathe": "^0.3.9",
     "scule": "^0.3.2",
     "ufo": "^0.8.6",
-    "unplugin": "^0.9.6"
+    "unplugin": "^0.10.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.0",
-    "@typescript-eslint/parser": "^5.40.0",
+    "@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",
@@ -83,5 +83,5 @@
   "resolutions": {
     "fontaine": "link:."
   },
-  "packageManager": "pnpm@7.13.4"
+  "packageManager": "pnpm@7.13.5"
 }