fix(parse): handle unquoted multi-word font families

playground/pages/edges.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    'Open Sans'
+  </div>
+</template>
+
+<style scoped>
+div {
+  font-family: 'Open Sans';
+}
+</style>

playground/pages/providers/local.vue

@@ -6,6 +6,6 @@
 
 <style scoped>
 div {
-  font-family: 'CustomFont', sans-serif;
+  font-family: 'Custom Font', sans-serif;
 }
 </style>

src/css/parse.ts

@@ -121,15 +121,25 @@ export function extractFontFamilies (node: Declaration) {
   }
 
   const families = [] as string[]
+  // Use buffer strategy to handle unquoted 'minified' font-family names
+  let buffer = ''
   for (const child of node.value.children) {
     if (child.type === 'Identifier' && !genericCSSFamilies.has(child.name as GenericCSSFamily) && !globalCSSValues.has(child.name)) {
-      families.push(child.name)
+      buffer = buffer ? `${buffer} ${child.name}` : child.name
+    }
+    if (buffer && child.type === 'Operator' && child.value === ',') {
+      families.push(buffer)
+      buffer = ''
     }
     if (child.type === 'String') {
       families.push(child.value)
     }
   }
 
+  if (buffer) {
+    families.push(buffer)
+  }
+
   return families
 }
 

test/basic.test.ts

@@ -7,13 +7,12 @@ await setup({
 })
 
 describe('providers', async () => {
-  // TODO: investigate regression with spaces in local font-family
   it('generates inlined font face rules for `local` provider', async () => {
     const html = await $fetch('/providers/local')
-    expect(extractFontFaces('CustomFont', html)).toMatchInlineSnapshot(`
+    expect(extractFontFaces('Custom Font', html)).toMatchInlineSnapshot(`
       [
         "@font-face {
-        font-family: 'CustomFont';
+        font-family: 'Custom Font';
         src: url("/custom-font.woff2") format(woff2);
         font-display: swap;
         font-weight: 400;
@@ -74,7 +73,7 @@ describe('providers', async () => {
 
   it('should allow overriding providers with `none`', async () => {
     const html = await $fetch('/providers/none')
-    expect(extractFontFaces('CustomFont', html)).toMatchInlineSnapshot(`[]`)
+    expect(extractFontFaces('Custom Font', html)).toMatchInlineSnapshot(`[]`)
   })
 
   it('should allow defining custom providers', async () => {