fontaine 0.2.0 → 0.2.1

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

@@ -109,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);
@@ -169,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.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';
@@ -107,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);
@@ -167,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.2.0",
+  "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",