Add support for configuring default font-variation-settings for a font-family

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add logical properties support for inline direction ([#10166](https://github.com/tailwindlabs/tailwindcss/pull/10166))
 - Add `hyphens` utilities ([#10071](https://github.com/tailwindlabs/tailwindcss/pull/10071))
 - [Oxide] Use `lightningcss` for nesting and vendor prefixes in PostCSS plugin ([#10399](https://github.com/tailwindlabs/tailwindcss/pull/10399))
+- Add support for configuring default `font-variation-settings` for a `font-family` ([#10034](https://github.com/tailwindlabs/tailwindcss/pull/10034), [#10515](https://github.com/tailwindlabs/tailwindcss/pull/10515))
 
 ### Fixed
 

src/corePlugins.js

@@ -1915,13 +1915,16 @@ export let corePlugins = {
         font: (value) => {
           let [families, options = {}] =
             Array.isArray(value) && isPlainObject(value[1]) ? value : [value]
-          let { fontFeatureSettings } = options
+          let { fontFeatureSettings, fontVariationSettings } = options
 
           return {
             'font-family': Array.isArray(families) ? families.join(', ') : families,
             ...(fontFeatureSettings === undefined
               ? {}
               : { 'font-feature-settings': fontFeatureSettings }),
+            ...(fontVariationSettings === undefined
+              ? {}
+              : { 'font-variation-settings': fontVariationSettings }),
           }
         },
       },

src/css/preflight.css

@@ -23,6 +23,7 @@
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
 */
 
 html {
@@ -32,6 +33,7 @@ html {
   tab-size: 4; /* 3 */
   font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
   font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */
+  font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal); /* 6 */
 }
 
 /*

tests/evaluateTailwindFunctions.test.js

@@ -591,6 +591,72 @@ crosscheck(({ stable, oxide }) => {
     })
   })
 
+  test('font-family values are retrieved without font-variation-settings', () => {
+    let input = css`
+      .heading-1 {
+        font-family: theme('fontFamily.sans');
+      }
+      .heading-2 {
+        font-family: theme('fontFamily.serif');
+      }
+      .heading-3 {
+        font-family: theme('fontFamily.mono');
+      }
+    `
+
+    let output = css`
+      .heading-1 {
+        font-family: Inter;
+      }
+      .heading-2 {
+        font-family: Times, serif;
+      }
+      .heading-3 {
+        font-family: Menlo, monospace;
+      }
+    `
+
+    return run(input, {
+      theme: {
+        fontFamily: {
+          sans: ['Inter', { fontVariationSettings: '"opsz" 32' }],
+          serif: [['Times', 'serif'], { fontVariationSettings: '"opsz" 32' }],
+          mono: ['Menlo, monospace', { fontVariationSettings: '"opsz" 32' }],
+        },
+      },
+    }).then((result) => {
+      expect(result.css).toMatchCss(output)
+      expect(result.warnings().length).toBe(0)
+    })
+  })
+
+  test('font-variation-settings values can be retrieved', () => {
+    let input = css`
+      .heading {
+        font-family: theme('fontFamily.sans');
+        font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings');
+      }
+    `
+
+    let output = css`
+      .heading {
+        font-family: Inter;
+        font-variation-settings: 'opsz' 32;
+      }
+    `
+
+    return run(input, {
+      theme: {
+        fontFamily: {
+          sans: ['Inter', { fontVariationSettings: "'opsz' 32" }],
+        },
+      },
+    }).then((result) => {
+      expect(result.css).toMatchCss(output)
+      expect(result.warnings().length).toBe(0)
+    })
+  })
+
   test('font-family values are joined when an array', () => {
     let input = css`
       .element {

tests/plugins/fontFamily.test.js

@@ -98,3 +98,43 @@ crosscheck(() => {
     })
   })
 })
+
+test('font-variation-settings can be provided when families are defined as a string', () => {
+  let config = {
+    content: [{ raw: html`<div class="font-sans"></div>` }],
+    theme: {
+      fontFamily: {
+        sans: ['Inter, sans-serif', { fontVariationSettings: '"opsz" 32' }],
+      },
+    },
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchCss(`
+      .font-sans {
+        font-family: Inter, sans-serif;
+        font-variation-settings: "opsz" 32;
+      }
+    `)
+  })
+})
+
+test('font-variation-settings can be provided when families are defined as an array', () => {
+  let config = {
+    content: [{ raw: html`<div class="font-sans"></div>` }],
+    theme: {
+      fontFamily: {
+        sans: [['Inter', 'sans-serif'], { fontVariationSettings: '"opsz" 32' }],
+      },
+    },
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchCss(`
+      .font-sans {
+        font-family: Inter, sans-serif;
+        font-variation-settings: "opsz" 32;
+      }
+    `)
+  })
+})