Add local font loader

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;