Allow fontFace to accept array of font face rules (#1114)

Author: taylorfsteele

.changeset/fontFace-array.md

@@ -0,0 +1,26 @@
+---
+'@vanilla-extract/css': minor
+---
+
+Supports passing multiple font face rules to `fontFace`
+
+**Example usage**
+
+```ts
+import { fontFace, style } from '@vanilla-extract/css';
+
+const gentium = fontFace([
+  {
+    src: 'local("Gentium")',
+    fontWeight: 'normal',
+  },
+  {
+    src: 'local("Gentium Bold")',
+    fontWeight: 'bold',
+  },
+]);
+
+export const font = style({
+  fontFamily: gentium,
+});
+```

packages/css/src/style.ts

@@ -93,26 +93,31 @@ export function globalStyle(selector: string, rule: GlobalStyleRule) {
   appendCss({ type: 'global', selector, rule }, getFileScope());
 }
 
-export function fontFace(rule: FontFaceRule, debugId?: string) {
+export function fontFace(
+  rule: FontFaceRule | FontFaceRule[],
+  debugId?: string,
+) {
   const fontFamily = `"${cssesc(generateIdentifier(debugId), {
     quotes: 'double',
   })}"`;
 
-  if ('fontFamily' in rule) {
-    throw new Error(
-      outdent`
-          This function creates and returns a hashed font-family name, so the "fontFamily" property should not be provided.
-  
-          If you'd like to define a globally scoped custom font, you can use the "globalFontFace" function instead.
-        `,
+  const rules = Array.isArray(rule) ? rule : [rule];
+
+  for (const singleRule of rules) {
+    if ('fontFamily' in singleRule) {
+      throw new Error(outdent`
+      This function creates and returns a hashed font-family name, so the "fontFamily" property should not be provided.
+    
+      If you'd like to define a globally scoped custom font, you can use the "globalFontFace" function instead.
+    `);
+    }
+
+    appendCss(
+      { type: 'fontFace', rule: { ...singleRule, fontFamily } },
+      getFileScope(),
     );
   }
 
-  appendCss(
-    { type: 'fontFace', rule: { ...rule, fontFamily } },
-    getFileScope(),
-  );
-
   return fontFamily;
 }
 

packages/css/src/transformCss.test.ts

@@ -1825,6 +1825,40 @@ describe('transformCss', () => {
     `);
   });
 
+  it('should handle multiple font faces of the same family', () => {
+    expect(
+      transformCss({
+        composedClassLists: [],
+        localClassNames: [],
+        cssObjs: [
+          {
+            type: 'fontFace',
+            rule: {
+              fontFamily: 'MyFont',
+              src: 'local("Helvetica")',
+            },
+          },
+          {
+            type: 'fontFace',
+            rule: {
+              fontFamily: 'MyFont',
+              src: 'local("Helvetica-Bold")',
+            },
+          },
+        ],
+      }).join('\n'),
+    ).toMatchInlineSnapshot(`
+      @font-face {
+        font-family: MyFont;
+        src: local("Helvetica");
+      }
+      @font-face {
+        font-family: MyFont;
+        src: local("Helvetica-Bold");
+      }
+    `);
+  });
+
   it('should handle multiple font faces', () => {
     expect(
       transformCss({

site/docs/api/font-face.md

@@ -20,3 +20,27 @@ export const font = style({
   fontFamily: comicSans
 });
 ```
+
+## Multiple Fonts with Single Family
+
+The `fontFace` function allows you to pass an array of font-face rules that may contain different rules but treat them as if they are from one font family.
+
+```ts compiled
+// text.css.ts
+import { fontFace, style } from '@vanilla-extract/css';
+
+const gentium = fontFace([
+  {
+    src: 'local("Gentium")',
+    fontWeight: 'normal'
+  },
+  {
+    src: 'local("Gentium Bold")',
+    fontWeight: 'bold'
+  }
+]);
+
+export const font = style({
+  fontFamily: gentium
+});
+```