feat: add support to fontsource variable v5

close #60, close #57

Author: stafyniaksacha

README.md

@@ -406,6 +406,7 @@ Unfonts({
       // families can be either strings (load default font set)
       // Require the `@fontsource/abeezee` package to be installed.
       'ABeeZee',
+      'Inter Variable', // Require the `@fontsource-variable/inter` package to be installed.
       {
         /**
          * Name of the font family.
@@ -428,17 +429,17 @@ Unfonts({
       {
         /**
          * Name of the font family.
-         * Require the `@fontsource/cabin` package to be installed.
+         * Require the `@fontsource-variable/cabin` package to be installed.
          */
         name: 'Cabin',
         /**
-         * Instead of using weights/styles, we can use variables fonts.
+         * When using variable fonts, you can choose which axes to load.
          */
-        variables: ['variable-full', 'variable-full-italic'],
-        /**
-         * Use another font subset.
-         */
-        subset: 'latin-ext',
+        variable: {
+          wght: true,
+          slnt: true,
+          ital: true,
+        },
       },
     ],
   },

examples/nuxt/app.vue

@@ -8,6 +8,7 @@ import src from 'unfonts.css?raw'
   <h2>I'm using a local font !</h2>
   <div class="fontsource-abeezee">I'm a ABeeZee fontsource</div>
   <div class="fontsource-truculenta">I'm a Truculenta fontsource</div>
+  <div class="fontsource-variable">I'm a Noto Sans JP Variable fontsource</div>
   <pre>links: {{ links }}</pre>
   <ClientOnly>
     <pre>src: {{ src }}</pre>
@@ -46,4 +47,8 @@ h2 {
 .fontsource-truculenta { 
   font-family: "Truculenta", sans-serif;
 }
+.fontsource-variable {
+  font-family: "Noto Sans JP Variable", sans-serif;
+  font-weight: 875;
+}
 </style>

examples/nuxt/nuxt.config.ts

@@ -27,6 +27,9 @@ export default defineNuxtConfig({
           name: 'Truculenta',
           weights: [400, 700],
         },
+        {
+          name: 'Noto Sans JP Variable',
+        },
       ],
     },
   },

examples/nuxt/package.json

@@ -7,6 +7,9 @@
     "preview": "nuxt preview"
   },
   "devDependencies": {
+    "@fontsource/abeezee": "^4.5.10",
+    "@fontsource/truculenta": "^4.5.12",
+    "@fontsource-variable/noto-sans-jp": "^5.0.16",
     "nuxt": "^3.4.1",
     "unplugin-fonts": "workspace:*"
   }

pnpm-lock.yaml

@@ -13,18 +13,67 @@ export function fontsourceImports(options?: FontsourceFonts) {
 
     if (typeof family === 'string') {
       const name = family.toLowerCase().replace(/ /g, '-')
-      source.push(`@fontsource/${name}/index.css`)
+      if (name.endsWith('-variable')) {
+        source.push(`@fontsource-variable/${name.replace('-variable', '')}/index.css`)
+      } else {
+        source.push(`@fontsource/${name}/index.css`)
+      }
       continue
     }
 
-    const name = family.name.toLowerCase().replace(/ /g, '-')
-    const subsetPrefix = family.subset ? `${family.subset}-` : ''
+    let name = family.name.toLowerCase()
+      .replace(/ /g, '-')
+      .replace('-variable', '')
 
-    if ('variables' in family) {
-      for (const variable of family.variables)
-        source.push(`@fontsource/${name}/${subsetPrefix}${variable}.css`)
+    if (family.name.endsWith(' Variable') && !('variable' in family)) {
+      source.push(`@fontsource-variable/${name}/index.css`)
+      continue
     }
-    else if ('weights' in family) {
+
+    if ('variable' in family) {
+      if (family.variable === true) {
+        source.push(`@fontsource-variable/${name}/index.css`)
+        continue
+      }
+
+      const activeAxes = Object.keys(family.variable).filter((axis) => axis !== 'ital');
+      const isItal = family.variable.ital
+      const isStandard = activeAxes.every((axis) =>
+        ['wght', 'wdth', 'slnt', 'opsz'].includes(axis),
+      );
+      if (activeAxes.length === 1 && family.variable.wght) {
+        if (isItal) {
+          source.push(`@fontsource-variable/${name}/wght-italic.css`)
+          continue
+        }
+
+        source.push(`@fontsource-variable/${name}/index.css`)
+        continue
+      }
+
+      if (activeAxes.length === 2 && family.variable.wght) {
+        const selected =
+          activeAxes.find((axis) => axis !== 'wght')?.toLowerCase() ?? 'wght';
+        if (isItal) {
+          source.push(`@fontsource-variable/${name}/${selected}-italic.css`);
+          continue
+        }
+        source.push(`@fontsource-variable/${name}/${selected}.css`)
+        continue
+      }
+
+      if (isStandard) {
+        source.push(`import '@fontsource-variable/${name}/standard.css';`)
+        continue
+      }
+
+      // If the selected axes is not within standard, return full
+      source.push(`import '@fontsource-variable/${name}/full.css';`)
+      continue
+    }
+
+    if ('weights' in family) {
+      const subsetPrefix = family.subset ? `${family.subset}-` : ''
       for (const weight of family.weights) {
         if (family.styles) {
           for (const style of family.styles) {

src/loaders/fontsource.ts

@@ -118,7 +118,13 @@ interface WeightsFontsourceFontFamily extends BaseFontsourceFontFamily {
   weights: (100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900)[]
 }
 interface VariableFontsourceFontFamily extends BaseFontsourceFontFamily {
-  variables: ('variable' | 'variable-italic' | 'variable-full' | 'variable-full-italic')[]
+  variable: true | {
+    wght?: boolean;
+    wdth?: boolean;
+    slnt?: boolean;
+    opsz?: boolean;
+    ital?: boolean;
+  }
 }
 export type FontsourceFontFamily = WeightsFontsourceFontFamily | VariableFontsourceFontFamily
 export interface FontsourceFonts {