fix: don't match CSS variables as font families

Author: danielroe

.eslintrc.cjs

@@ -9,11 +9,7 @@ module.exports = {
     sourceType: 'module',
   },
   plugins: ['@typescript-eslint'],
-  extends: [
-    'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended',
-    'prettier',
-  ],
+  extends: ['plugin:@typescript-eslint/recommended'],
   rules: {
     '@typescript-eslint/no-explicit-any': 'off',
   },

playground/index.css

@@ -11,6 +11,11 @@
     format('woff2');
 }
 
+:root {
+  /* Adding this manually for now */
+  --someFont: 'Poppins variant', 'Poppins variant override';
+}
+
 h1 {
   font-family: 'Poppins variant', sans-serif;
 }
@@ -22,3 +27,7 @@ h2 {
 p {
   font-family: 'Poppins variant';
 }
+
+div {
+  font-family: var(--someFont);
+}

playground/index.html

@@ -24,11 +24,11 @@ <h2>A subheading</h2>
       veniam commodo duis laboris dolore veniam commodo amet. Officia cillum est sunt anim ullamco
       tempor ipsum dolore nisi dolore ut. Velit eu minim minim non laborum exercitation.
     </p>
-    <p>
+    <div>
       Reprehenderit fugiat sit proident id laboris amet nulla quis est dolor consequat ad eiusmod.
       Mollit laborum cupidatat nisi commodo enim eiusmod sit. Est dolor ipsum nulla pariatur
       pariatur esse ea est labore fugiat eu velit. Minim ex sunt Lorem nisi non officia.
-    </p>
+    </div>
   </div>
 </body>
 

src/transform.ts

@@ -74,7 +74,12 @@ export const FontaineTransform = createUnplugin(
           // Skip font-family definitions _within_ @font-face blocks
           if (faceRanges.some(([start, end]) => index > start && index < end))
             continue
-          const families = matchContent.split(',').map(f => f.trim())
+          const families = matchContent
+            .split(',')
+            .map(f => f.trim())
+            .filter(f => !f.startsWith('var('))
+
+          if (!families.length) continue
 
           s.overwrite(
             index,

test/e2e.spec.ts

@@ -16,7 +16,7 @@ describe('fontaine', () => {
     // @ts-expect-error there must be a file or we _want_ a test failure
     const css = await readFile(join(assetsDir, cssFile), 'utf-8')
     expect(css.replace(/\.[\w]+\.woff2/g, '.woff2')).toMatchInlineSnapshot(`
-      "@font-face{font-family:Poppins variant override;src:local(\\"Arial\\");ascent-override:105%;descent-override:35%;line-gap-override:10%}@font-face{font-family:Poppins variant;font-display:swap;src:url(/assets/font.707fdc5c.ttf) format(\\"truetype\\")}@font-face{font-family:Roboto override;src:local(\\"Arial\\");ascent-override:92.7734375%;descent-override:24.4140625%;line-gap-override:0%}@font-face{font-family:Roboto;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format(\\"woff2\\")}h1{font-family:Poppins variant,Poppins variant override,sans-serif}h2{font-family:Roboto,Roboto override,Arial,Helvetica,sans-serif}p{font-family:Poppins variant,Poppins variant override}
+      "@font-face{font-family:Poppins variant override;src:local(\\"Arial\\");ascent-override:105%;descent-override:35%;line-gap-override:10%}@font-face{font-family:Poppins variant;font-display:swap;src:url(/assets/font.707fdc5c.ttf) format(\\"truetype\\")}@font-face{font-family:Roboto override;src:local(\\"Arial\\");ascent-override:92.7734375%;descent-override:24.4140625%;line-gap-override:0%}@font-face{font-family:Roboto;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format(\\"woff2\\")}:root{--someFont: \\"Poppins variant\\", \\"Poppins variant override\\"}h1{font-family:Poppins variant,Poppins variant override,sans-serif}h2{font-family:Roboto,Roboto override,Arial,Helvetica,sans-serif}p{font-family:Poppins variant,Poppins variant override}div{font-family:var(--someFont)}
       "
     `)
   })