nuxt · danielroe · Mar 8, 2025 · Feb 20, 2025 · Feb 21, 2025 · Feb 21, 2025
@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <div>
+      'Sigmar'
+    </div>
+    <p>
+      'Sigmar One'
+    </p>
+  </div>
+</template>
+
+<style scoped>
+/* `processCSSVariables` = `true` */
+div {
+  --family: 'Sigmar';
+  font-family: var(--family);
+}
+
+/* `processCSSVariables` = `font-prefixed-only` */
+p {
+  --font-family: 'Sigmar One';
+  font-family: var(--font-family);
+}
+</style>
@@ -82,8 +82,8 @@ export default defineNuxtModule<ModuleOptions>({
   },
   defaults: {
     devtools: true,
+    processCSSVariables: 'font-prefixed-only',
     experimental: {
-      processCSSVariables: false,
       disableLocalFallbacks: false,
     },
     defaults: {},
@@ -332,7 +332,7 @@ export default defineNuxtModule<ModuleOptions>({
     addBuildPlugin(FontFamilyInjectionPlugin({
       dev: nuxt.options.dev,
       fontsToPreload: fontMap,
-      processCSSVariables: options.experimental?.processCSSVariables,
+      processCSSVariables: options.experimental?.processCSSVariables ?? options.processCSSVariables,
       shouldPreload(fontFamily, fontFace) {
         const override = options.families?.find(f => f.name === fontFamily)
         if (override && override.preload !== undefined) {

@@ -22,7 +22,7 @@ export interface FontFaceResolution {
 interface FontFamilyInjectionPluginOptions {
   resolveFontFace: (fontFamily: string, fallbackOptions?: { fallbacks: string[], generic?: GenericCSSFamily }) => Awaitable<undefined | FontFaceResolution>
   dev: boolean
-  processCSSVariables?: boolean
+  processCSSVariables?: boolean | 'font-prefixed-only'
   shouldPreload: (fontFamily: string, font: FontFaceData) => boolean
   fontsToPreload: Map<string, Set<string>>
 }
@@ -121,7 +121,12 @@ export const FontFamilyInjectionPlugin = (options: FontFamilyInjectionPluginOpti
       walk(node, {
         visit: 'Declaration',
         enter(node) {
-          if (((node.property !== 'font-family' && node.property !== 'font') && (!options.processCSSVariables || !node.property.startsWith('--'))) || this.atrule?.name === 'font-face') {
+          if ((
+            (node.property !== 'font-family' && node.property !== 'font')
+            && (options.processCSSVariables === false
+              || (options.processCSSVariables === 'font-prefixed-only' && !node.property.startsWith('--font'))
+              || (options.processCSSVariables === true && !node.property.startsWith('--'))))
+            || this.atrule?.name === 'font-face') {
             return
           }
 

@@ -176,17 +176,23 @@ export interface ModuleOptions {
    * @default true
    */
   devtools?: boolean
+  /**
+   * You can enable support for processing CSS variables for font family names.
+   * @default 'font-prefixed-only'
+   */
+  processCSSVariables?: boolean | 'font-prefixed-only'
   experimental?: {
     /**
      * You can disable adding local fallbacks for generated font faces, like `local('Font Face')`.
      * @default false
      */
     disableLocalFallbacks?: boolean
     /**
-     * You can enable support for processing CSS variables for font family names. This may have a performance impact.
-     * @default false
+     * You can enable support for processing CSS variables for font family names.
+     * @default 'font-prefixed-only'
+     * @deprecated This feature is no longer experimental. Use `processCSSVariables` instead.
      */
-    processCSSVariables?: boolean
+    processCSSVariables?: boolean | 'font-prefixed-only'
   }
 }
 

@@ -193,6 +193,18 @@ describe('features', () => {
     `)
   })
 
+  it('only processes css variables prefixed with --font by default', async () => {
+    const html = await $fetch<string>('/css-variable')
+    expect(extractFontFaces('Sigmar', html)).toMatchInlineSnapshot(`
+      [
+        "@font-face{font-family:Sigmar One;src:local("Sigmar One Regular"),local("Sigmar One"),url(/_fonts/file.woff2) format(woff2);font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;font-weight:400;font-style:normal}",
+        "@font-face{font-family:Sigmar One;src:local("Sigmar One Regular"),local("Sigmar One"),url(/_fonts/file.woff2) format(woff2);font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-weight:400;font-style:normal}",
+        "@font-face{font-family:Sigmar One;src:local("Sigmar One Regular"),local("Sigmar One"),url(/_fonts/file.woff2) format(woff2);font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-weight:400;font-style:normal}",
+        "@font-face{font-family:Sigmar One;src:local("Sigmar One Regular"),local("Sigmar One"),url(/_fonts/file.woff) format(woff);font-display:swap;font-weight:400;font-style:normal}",
+      ]
+    `)
+  })
+
   // TODO: Font defined in the global CSS is not being preloaded. Looks like a bug, needs investigation.
   it('adds preload links to the HTML with locally scoped rules', async () => {
     const html = await $fetch<string>('/providers/local')