perf: use code filter when processCSSVariables is disabled

Author: danielroe

src/plugins/transform.ts

@@ -15,13 +15,12 @@ export const FontFamilyInjectionPlugin = (options: FontFamilyInjectionPluginOpti
           include: [IS_CSS_RE],
           exclude: [SKIP_RE],
         },
+        code: {
+          // Early return if no font-family is used in this CSS
+          exclude: !options.processCSSVariables ? [/^(?!.*font-family\s*:).*$/s] : undefined,
+        },
       },
       async handler(code, id) {
-        // Early return if no font-family is used in this CSS
-        if (!options.processCSSVariables && !code.includes('font-family:')) {
-          return
-        }
-
         const s = await transformCSS(options, code, id)
 
         if (s.hasChanged()) {

test/parse.test.ts

@@ -171,6 +171,146 @@ describe('parsing css', () => {
   })
 })
 
+describe('filter patterns', () => {
+  it('should not process CSS without font-family when processCSSVariables is false', async () => {
+    const transformWithoutCSSVariables = async (css: string) => {
+      const plugin = FontFamilyInjectionPlugin({
+        dev: true,
+        processCSSVariables: false,
+        shouldPreload: () => true,
+        fontsToPreload: new Map(),
+        resolveFontFace: family => ({
+          fonts: [{ src: [{ url: `/${slugify(family)}.woff2`, format: 'woff2' }] }],
+        }),
+      }).vite() as any
+
+      const result = await plugin.transform?.handler?.(css, 'some-id.css')
+      return result?.code
+    }
+
+    // CSS without font-family should not be processed (returns undefined)
+    const cssWithoutFontFamily = `.header { color: red; background: blue; }`
+    expect(await transformWithoutCSSVariables(cssWithoutFontFamily)).toBeUndefined()
+
+    // CSS with font-family should be processed
+    const cssWithFontFamily = `.header { font-family: 'CustomFont'; color: red; }`
+    const result = await transformWithoutCSSVariables(cssWithFontFamily)
+    expect(result).toContain('@font-face')
+    expect(result).toContain('CustomFont')
+  })
+
+  it('should process CSS variables when processCSSVariables is true', async () => {
+    const transformWithCSSVariables = async (css: string) => {
+      const plugin = FontFamilyInjectionPlugin({
+        dev: true,
+        processCSSVariables: true,
+        shouldPreload: () => true,
+        fontsToPreload: new Map(),
+        resolveFontFace: family => ({
+          fonts: [{ src: [{ url: `/${slugify(family)}.woff2`, format: 'woff2' }] }],
+        }),
+      }).vite() as any
+
+      const result = await plugin.transform?.handler?.(css, 'some-id.css')
+      return result?.code
+    }
+
+    // CSS with font-family in variable should be processed
+    const cssWithVariable = `:root { --font-var: 'CustomFont'; }`
+    const result = await transformWithCSSVariables(cssWithVariable)
+    expect(result).toContain('@font-face')
+    expect(result).toContain('CustomFont')
+
+    // Even CSS without explicit font-family should be processed when processCSSVariables is true
+    const cssWithoutFontFamily = `.header { color: red; --font-var: 'AnotherFont'; }`
+    const result2 = await transformWithCSSVariables(cssWithoutFontFamily)
+    expect(result2).toContain('@font-face')
+    expect(result2).toContain('AnotherFont')
+  })
+
+  it('should handle multiline CSS correctly', async () => {
+    const transformWithoutCSSVariables = async (css: string) => {
+      const plugin = FontFamilyInjectionPlugin({
+        dev: true,
+        processCSSVariables: false,
+        shouldPreload: () => true,
+        fontsToPreload: new Map(),
+        resolveFontFace: family => ({
+          fonts: [{ src: [{ url: `/${slugify(family)}.woff2`, format: 'woff2' }] }],
+        }),
+      }).vite() as any
+
+      const result = await plugin.transform?.handler?.(css, 'some-id.css')
+      return result?.code
+    }
+
+    // Multiline CSS without font-family should not be processed
+    const multilineCssWithoutFontFamily = `
+      .header {
+        color: red;
+        background: blue;
+        margin: 10px;
+      }
+    `
+    expect(await transformWithoutCSSVariables(multilineCssWithoutFontFamily)).toBeUndefined()
+
+    // Multiline CSS with font-family should be processed
+    const multilineCssWithFontFamily = `
+      .header {
+        color: red;
+        font-family: 'CustomFont';
+        background: blue;
+      }
+    `
+    const result = await transformWithoutCSSVariables(multilineCssWithFontFamily)
+    expect(result).toContain('@font-face')
+    expect(result).toContain('CustomFont')
+  })
+
+  it('should detect font-family in various CSS contexts', async () => {
+    const transformWithoutCSSVariables = async (css: string) => {
+      const plugin = FontFamilyInjectionPlugin({
+        dev: true,
+        processCSSVariables: false,
+        shouldPreload: () => true,
+        fontsToPreload: new Map(),
+        resolveFontFace: family => ({
+          fonts: [{ src: [{ url: `/${slugify(family)}.woff2`, format: 'woff2' }] }],
+        }),
+      }).vite() as any
+
+      const result = await plugin.transform?.handler?.(css, 'some-id.css')
+      return result?.code
+    }
+
+    // Should process: direct font-family property
+    const result1 = await transformWithoutCSSVariables(`.test { font-family: CustomFont; }`)
+    expect(result1).toBeDefined()
+    expect(result1).toContain('@font-face')
+
+    // Should process: font-family in nested rules
+    const result2 = await transformWithoutCSSVariables(`.parent { .child { font-family: CustomFont; } }`)
+    expect(result2).toBeDefined()
+    expect(result2).toContain('@font-face')
+
+    // Should process: font-family in media queries
+    const result3 = await transformWithoutCSSVariables(`@media (min-width: 768px) { .test { font-family: CustomFont; } }`)
+    expect(result3).toBeDefined()
+    expect(result3).toContain('@font-face')
+
+    // Should process: font-family with spaces
+    const result4 = await transformWithoutCSSVariables(`.test { font-family : CustomFont ; }`)
+    expect(result4).toBeDefined()
+    expect(result4).toContain('@font-face')
+
+    // Should NOT process: no font-family at all
+    expect(await transformWithoutCSSVariables(`.test { color: red; margin: 10px; }`)).toBeUndefined()
+
+    // Should NOT process: has 'font' but not 'font-family'
+    expect(await transformWithoutCSSVariables(`.test { font-size: 14px; font-weight: bold; }`)).toBeUndefined()
+  })
+})
+
 describe('error handling', () => {
   it('handles no font details supplied', async () => {
     const plugin = FontFamilyInjectionPlugin({
@@ -195,8 +335,8 @@ async function transform(css: string) {
       fonts: [{ src: [{ url: `/${slugify(family)}.woff2`, format: 'woff2' }] }],
       fallbacks: options?.fallbacks ? ['Times New Roman', ...options.fallbacks] : undefined,
     }),
-  }).raw({}, { framework: 'vite' }) as any
+  }).vite() as any
 
-  const result = await plugin.transform?.handler?.(css, 'some-id')
+  const result = await plugin.transform?.handler?.(css, 'some-id.css')
   return result?.code
 }