feat: allow configuring font-stretch property in override

#112
nuxt · Apr 4, 2024 · d7ff458 · d7ff458
1 parent bfc55e6
commit d7ff458
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 0 deletions.
diff --git a/src/css/render.ts b/src/css/render.ts
@@ -12,6 +12,7 @@ export function generateFontFace (family: string, font: NormalizedFontFaceData)
     font.unicodeRange && `  unicode-range: ${font.unicodeRange};`,
     font.weight && `  font-weight: ${Array.isArray(font.weight) ? font.weight.join(' ') : font.weight};`,
     font.style && `  font-style: ${font.style};`,
+    font.stretch && `  font-stretch: ${font.stretch};`,
     font.featureSettings && `  font-feature-settings: ${font.featureSettings};`,
     font.variationSettings && `  font-variation-settings: ${font.variationSettings};`,
     `}`

diff --git a/src/types.ts b/src/types.ts
@@ -26,6 +26,8 @@ export interface FontFaceData {
   display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional'
   /** A font-weight value. */
   weight?: string | number | [number, number]
+  /** A font-stretch value. */
+  stretch?: string
   /** A font-style value. */
   style?: string
   /** The range of Unicode code points to be used from the font. */

diff --git a/test/render.test.ts b/test/render.test.ts
@@ -17,4 +17,23 @@ describe('rendering @font-face', () => {
       }"
     `)
   })
+  it('should support additional properties', () => {
+    const css = generateFontFace('Helvetica Neue', {
+      src: [{ url: '/helvetica-neue.woff2' }],
+      stretch: 'expanded',
+      display: 'fallback',
+      style: 'italic',
+      weight: '400'
+    })
+    expect(css).toMatchInlineSnapshot(`
+      "@font-face {
+        font-family: 'Helvetica Neue';
+        src: url("/helvetica-neue.woff2");
+        font-display: fallback;
+        font-weight: 400;
+        font-style: italic;
+        font-stretch: expanded;
+      }"
+    `)
+  })
 })