Add local font loader (#40801)

Moves font related types to `next/font` so they can be reused in font
loaders.

Adds an argument to font loaders, the relative path from the app root to
the module consuming the loader. Needed for resolving local files
relative to the module calling it. Also used to improve error message.

Adds `@next/font/local` font loader. Similar to `@next/font/google` but
used to host locally downloaded font files.

packages/font/local/index.d.ts

@@ -0,0 +1 @@
+export { default } from '../dist/local/index'

packages/font/local/index.js

@@ -0,0 +1 @@
+throw new Error('@next/font/local is not correctly setup')

packages/font/local/loader.d.ts

@@ -0,0 +1 @@
+export { default } from '../dist/local/loader'

packages/font/local/loader.js

@@ -0,0 +1 @@
+module.exports = require('../dist/local/loader')

packages/font/package.json

@@ -7,7 +7,8 @@
   },
   "files": [
     "dist",
-    "google"
+    "google",
+    "local"
   ],
   "license": "MIT",
   "scripts": {

packages/font/src/google/index.ts

@@ -1,9 +1,5 @@
+import type { FontModule } from 'next/font'
 type Display = 'auto' | 'block' | 'swap' | 'fallback' | 'optional'
-type FontModule = {
-  className: string
-  variable: string
-  style: { fontFamily: string; fontWeight?: number; fontStyle?: string }
-}
 export declare function ABeeZee(options: {
   variant: '400' | '400-italic'
   display?: Display

packages/font/src/google/loader.ts

@@ -1,3 +1,4 @@
+import type { FontLoader } from 'next/font'
 // @ts-ignore
 import fetch from 'next/dist/compiled/node-fetch'
 // @ts-ignore
@@ -9,19 +10,12 @@ import {
   validateData,
 } from './utils'
 
-type FontLoaderOptions = {
-  functionName: string
-  data: any[]
-  config: any
-  emitFontFile: (content: Buffer, ext: string, preload: boolean) => string
-}
-
-export default async function downloadGoogleFonts({
+const downloadGoogleFonts: FontLoader = async ({
   functionName,
   data,
   config,
   emitFontFile,
-}: FontLoaderOptions) {
+}) => {
   if (!config?.subsets) {
     throw new Error(
       'Please specify subsets for `@next/font/google` in your `next.config.js`'
@@ -119,3 +113,5 @@ export default async function downloadGoogleFonts({
     fallbackFonts: fallback,
   }
 }
+
+export default downloadGoogleFonts

packages/font/src/local/index.ts

@@ -0,0 +1,24 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type { FontModule } from 'next/font'
+type Display = 'auto' | 'block' | 'swap' | 'fallback' | 'optional'
+type LocalFont = {
+  src: string | Array<{ file: string; unicodeRange: string }>
+  display?: Display
+  weight?: string
+  style?: string
+  fallback?: string[]
+  preload?: boolean
+
+  ascentOverride?: string
+  descentOverride?: string
+  fontStretch?: string
+  fontVariant?: string
+  fontFeatureSettings?: string
+  fontVariationSettings?: string
+  lineGapOverride?: string
+  sizeAdjust?: string
+}
+
+export default function localFont(options: LocalFont): FontModule {
+  throw new Error()
+}

packages/font/src/local/loader.ts

@@ -0,0 +1,67 @@
+import type { FontLoader } from 'next/font'
+
+import { promisify } from 'util'
+import { validateData } from './utils'
+
+const fetchFonts: FontLoader = async ({
+  functionName,
+  data,
+  emitFontFile,
+  resolve,
+  fs,
+}) => {
+  const {
+    family,
+    files,
+    display,
+    weight,
+    style,
+    fallback,
+    preload,
+    ascentOverride,
+    descentOverride,
+    lineGapOverride,
+    fontStretch,
+    fontFeatureSettings,
+    sizeAdjust,
+  } = validateData(functionName, data)
+
+  const fontFaces = await Promise.all(
+    files.map(async ({ file, ext, format, unicodeRange }) => {
+      const resolved = await resolve(file)
+      const fileBuffer = await promisify(fs.readFile)(resolved)
+
+      const fontUrl = emitFontFile(fileBuffer, ext, preload)
+
+      const fontFaceProperties = [
+        ['font-family', `'${family}'`],
+        ['src', `url(${fontUrl}) format('${format}')`],
+        ['font-display', display],
+        ...(weight ? [['font-weight', weight]] : []),
+        ...(style ? [['font-style', style]] : []),
+        ...(ascentOverride ? [['ascent-override', ascentOverride]] : []),
+        ...(descentOverride ? [['descent-override', descentOverride]] : []),
+        ...(lineGapOverride ? [['line-gap-override', lineGapOverride]] : []),
+        ...(fontStretch ? [['font-stretch', fontStretch]] : []),
+        ...(fontFeatureSettings
+          ? [['font-feature-settings', fontFeatureSettings]]
+          : []),
+        ...(sizeAdjust ? [['size-adjust', sizeAdjust]] : []),
+        ...(unicodeRange ? [['unicode-range', unicodeRange]] : ''),
+      ]
+
+      return `@font-face {
+${fontFaceProperties
+  .map(([property, value]) => `${property}: ${value};`)
+  .join('\n')}
+}`
+    })
+  )
+
+  return {
+    css: fontFaces.join('\n'),
+    fallbackFonts: fallback,
+  }
+}
+
+export default fetchFonts

packages/font/src/local/utils.ts

@@ -0,0 +1,112 @@
+const allowedDisplayValues = ['auto', 'block', 'swap', 'fallback', 'optional']
+
+const formatValues = (values: string[]) =>
+  values.map((val) => `\`${val}\``).join(', ')
+
+const extToFormat = {
+  woff: 'woff',
+  woff2: 'woff2',
+  ttf: 'truetype',
+  otf: 'opentype',
+  eot: 'embedded-opentype',
+}
+
+type FontOptions = {
+  family: string
+  files: Array<{
+    file: string
+    ext: string
+    format: string
+    unicodeRange?: string
+  }>
+  display: string
+  weight?: string
+  style?: string
+  fallback?: string[]
+  preload: boolean
+  ascentOverride?: string
+  descentOverride?: string
+  fontStretch?: string
+  fontVariant?: string
+  fontFeatureSettings?: string
+  fontVariationSettings?: string
+  lineGapOverride?: string
+  sizeAdjust?: string
+}
+export function validateData(functionName: string, data: any): FontOptions {
+  if (functionName) {
+    throw new Error(`@next/font/local has no named exports`)
+  }
+  let {
+    src,
+    display = 'optional',
+    weight,
+    style,
+    fallback,
+    preload = true,
+    ascentOverride,
+    descentOverride,
+    fontStretch,
+    fontVariant,
+    fontFeatureSettings,
+    fontVariationSettings,
+    lineGapOverride,
+    sizeAdjust,
+  } = data[0] || ({} as any)
+
+  if (!allowedDisplayValues.includes(display)) {
+    throw new Error(
+      `Invalid display value \`${display}\`.\nAvailable display values: ${formatValues(
+        allowedDisplayValues
+      )}`
+    )
+  }
+
+  const srcArray = Array.isArray(src) ? src : [{ file: src }]
+
+  if (srcArray.length === 0) {
+    throw new Error('Src must contain one or more files')
+  }
+
+  const files = srcArray.map(({ file, unicodeRange }) => {
+    if (!file) {
+      throw new Error('Src array objects must have a `file` property')
+    }
+    if (srcArray.length > 1 && !unicodeRange) {
+      throw new Error(
+        "Files must have a unicode-range if there's more than one"
+      )
+    }
+
+    const ext = /\.(woff|woff2|eot|ttf|otf)$/.exec(file)?.[1]
+    if (!ext) {
+      throw new Error(`Unexpected file \`${file}\``)
+    }
+    return {
+      file,
+      unicodeRange,
+      ext,
+      format: extToFormat[ext as 'woff' | 'woff2' | 'eot' | 'ttf' | 'otf'],
+    }
+  })
+
+  const family = /.+\/(.+?)\./.exec(files[0].file)![1]
+
+  return {
+    family,
+    files,
+    display,
+    weight,
+    style,
+    fallback,
+    preload,
+    ascentOverride,
+    descentOverride,
+    fontStretch,
+    fontVariant,
+    fontFeatureSettings,
+    fontVariationSettings,
+    lineGapOverride,
+    sizeAdjust,
+  }
+}

packages/next-swc/crates/core/src/lib.rs

@@ -36,7 +36,6 @@ use serde::Deserialize;
 use std::cell::RefCell;
 use std::rc::Rc;
 use std::{path::PathBuf, sync::Arc};
-use swc_core::ecma::atoms::JsWord;
 
 use swc_core::{
     base::config::ModuleConfig,
@@ -113,7 +112,7 @@ pub struct TransformOptions {
     pub modularize_imports: Option<modularize_imports::Config>,
 
     #[serde(default)]
-    pub font_loaders: Option<Vec<JsWord>>,
+    pub font_loaders: Option<next_font_loaders::Config>,
 }
 
 pub fn custom_before_pass<'a, C: Comments + 'a>(
@@ -218,10 +217,9 @@ where
             None => Either::Right(noop()),
         },
         match &opts.font_loaders {
-            Some(font_loaders) =>
-                Either::Left(next_font_loaders::next_font_loaders(font_loaders.clone())),
+            Some(config) => Either::Left(next_font_loaders::next_font_loaders(config.clone())),
             None => Either::Right(noop()),
-        }
+        },
     )
 }
 

packages/next-swc/crates/core/src/next_font_loaders/font_imports_generator.rs

@@ -7,6 +7,7 @@ use swc_core::ecma::visit::{noop_visit_type, Visit};
 
 pub struct FontImportsGenerator<'a> {
     pub state: &'a mut super::State,
+    pub relative_path: &'a str,
 }
 
 impl<'a> FontImportsGenerator<'a> {
@@ -41,7 +42,7 @@ impl<'a> FontImportsGenerator<'a> {
                             Some(function) => String::from(&**function),
                             None => String::new(),
                         };
-                        let mut values = vec![function_name];
+                        let mut values = vec![self.relative_path.to_string(), function_name];
                         values.append(&mut json_values);
 
                         return Some(ImportDecl {

packages/next-swc/crates/core/src/next_font_loaders/mod.rs

@@ -1,4 +1,5 @@
 use fxhash::FxHashSet;
+use serde::Deserialize;
 use swc_core::{
     common::{collections::AHashMap, BytePos, Spanned},
     ecma::{
@@ -12,9 +13,16 @@ mod find_functions_outside_module_scope;
 mod font_functions_collector;
 mod font_imports_generator;
 
-pub fn next_font_loaders(font_loaders: Vec<JsWord>) -> impl Fold + VisitMut {
+#[derive(Clone, Debug, Deserialize)]
+#[serde(deny_unknown_fields, rename_all = "camelCase")]
+pub struct Config {
+    pub font_loaders: Vec<JsWord>,
+    pub relative_file_path_from_root: JsWord,
+}
+
+pub fn next_font_loaders(config: Config) -> impl Fold + VisitMut {
     as_folder(NextFontLoaders {
-        font_loaders,
+        config,
         state: State {
             ..Default::default()
         },
@@ -35,7 +43,7 @@ pub struct State {
 }
 
 struct NextFontLoaders {
-    font_loaders: Vec<JsWord>,
+    config: Config,
     state: State,
 }
 
@@ -45,7 +53,7 @@ impl VisitMut for NextFontLoaders {
     fn visit_mut_module_items(&mut self, items: &mut Vec<ModuleItem>) {
         // Find imported functions from font loaders
         let mut functions_collector = font_functions_collector::FontFunctionsCollector {
-            font_loaders: &self.font_loaders,
+            font_loaders: &self.config.font_loaders,
             state: &mut self.state,
         };
         items.visit_with(&mut functions_collector);
@@ -54,6 +62,7 @@ impl VisitMut for NextFontLoaders {
             // Generate imports from font function calls
             let mut import_generator = font_imports_generator::FontImportsGenerator {
                 state: &mut self.state,
+                relative_path: &self.config.relative_file_path_from_root,
             };
             items.visit_with(&mut import_generator);
 

packages/next-swc/crates/core/tests/errors.rs

@@ -1,6 +1,8 @@
 use next_swc::{
-    disallow_re_export_all_in_page::disallow_re_export_all_in_page, next_dynamic::next_dynamic,
-    next_font_loaders::next_font_loaders, next_ssg::next_ssg,
+    disallow_re_export_all_in_page::disallow_re_export_all_in_page,
+    next_dynamic::next_dynamic,
+    next_font_loaders::{next_font_loaders, Config as FontLoaderConfig},
+    next_ssg::next_ssg,
     react_server_components::server_components,
 };
 use std::path::PathBuf;
@@ -101,7 +103,12 @@ fn next_font_loaders_errors(input: PathBuf) {
     let output = input.parent().unwrap().join("output.js");
     test_fixture_allowing_error(
         syntax(),
-        &|_tr| next_font_loaders(vec!["@next/font/google".into(), "cool-fonts".into()]),
+        &|_tr| {
+            next_font_loaders(FontLoaderConfig {
+                relative_file_path_from_root: "pages/test.tsx".into(),
+                font_loaders: vec!["@next/font/google".into(), "cool-fonts".into()],
+            })
+        },
         &input,
         &output,
     );

packages/next-swc/crates/core/tests/errors/next-font-loaders/not-const/output.js

@@ -1,4 +1,4 @@
-import inter1 from '@next/font/google?Inter;{"variant":"400"}';
-import inter2 from '@next/font/google?Inter;{"variant":"400"}';
+import inter1 from '@next/font/google?pages/test.tsx;Inter;{"variant":"400"}';
+import inter2 from '@next/font/google?pages/test.tsx;Inter;{"variant":"400"}';
 var i = 10;
 var i2 = 20;