Rename --font-family-* variables to --font-* (#14885)

This PR renames the `--font-family-*` theme variables to `--font-*` to more closely match the utility names and be a bit more terse in general. ```diff @theme { - --font-family-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - --font-family-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; - --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; } ``` This is part of a bigger set of changes where we're renaming other theme variables as well with the same goals, since many existing theme variables like `--shadow-*` and `--radius-*` are already not using the explicit CSS property name. --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
tailwindlabs · Nov 6, 2024 · 2aea6e9 · 2aea6e9
1 parent c5b6df2
commit 2aea6e9
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 71 deletions.
diff --git a/integrations/upgrade/js-config.test.ts b/integrations/upgrade/js-config.test.ts
@@ -247,8 +247,8 @@ test(
         --width-full-minus-96: calc(100% - 24rem);
         --width-225px: 225px;
 
-        --font-family-sans: Inter, system-ui, sans-serif;
-        --font-family-display: Cabinet Grotesk, ui-sans-serif, system-ui, sans-serif,
+        --font-sans: Inter, system-ui, sans-serif;
+        --font-display: Cabinet Grotesk, ui-sans-serif, system-ui, sans-serif,
           'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
         --radius-4xl: 2rem;

diff --git a/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap b/packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
@@ -5,12 +5,12 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
   :root {
     --default-transition-duration: .15s;
     --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-    --default-font-family: var(--font-family-sans);
-    --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
-    --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
-    --default-mono-font-family: var(--font-family-mono);
-    --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
-    --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
+    --default-font-family: var(--font-sans);
+    --default-font-feature-settings: var(--font-sans--font-feature-settings);
+    --default-font-variation-settings: var(--font-sans--font-variation-settings);
+    --default-mono-font-family: var(--font-mono);
+    --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
+    --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
     --breakpoint-sm: 40rem;
     --breakpoint-md: 48rem;
     --breakpoint-lg: 64rem;
@@ -311,9 +311,9 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     --width-6xl: 72rem;
     --width-7xl: 80rem;
     --width-prose: 65ch;
-    --font-family-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     --font-size-xs: .75rem;
     --font-size-xs--line-height: 1rem;
     --font-size-sm: .875rem;

diff --git a/packages/tailwindcss/src/__snapshots__/index.test.ts.snap b/packages/tailwindcss/src/__snapshots__/index.test.ts.snap
@@ -4,12 +4,12 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
 ":root {
   --default-transition-duration: .15s;
   --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-  --default-font-family: var(--font-family-sans);
-  --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
-  --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
-  --default-mono-font-family: var(--font-family-mono);
-  --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
-  --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
+  --default-font-family: var(--font-sans);
+  --default-font-feature-settings: var(--font-sans--font-feature-settings);
+  --default-font-variation-settings: var(--font-sans--font-variation-settings);
+  --default-mono-font-family: var(--font-mono);
+  --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
+  --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
   --breakpoint-sm: 40rem;
   --breakpoint-md: 48rem;
   --breakpoint-lg: 64rem;
@@ -310,9 +310,9 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   --width-6xl: 72rem;
   --width-7xl: 80rem;
   --width-prose: 65ch;
-  --font-family-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --font-size-xs: .75rem;
   --font-size-xs--line-height: 1rem;
   --font-size-sm: .875rem;

diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.test.ts
@@ -69,8 +69,8 @@ test('config values can be merged into the theme', () => {
   expect(theme.resolve('sm', ['--radius'])).toEqual('0.33rem')
   expect(theme.resolve('blink', ['--animate'])).toEqual('blink 1s linear infinite')
   expect(theme.resolve('red-500', ['--color'])).toEqual('red')
-  expect(theme.resolve('sans', ['--font-family'])).toEqual('Inter, system-ui, sans-serif')
-  expect(theme.resolveWith('mono', ['--font-family'], ['--font-variation-settings'])).toEqual([
+  expect(theme.resolve('sans', ['--font'])).toEqual('Inter, system-ui, sans-serif')
+  expect(theme.resolveWith('mono', ['--font'], ['--font-variation-settings'])).toEqual([
     'Potato Mono',
     { '--font-variation-settings': '"XHGT" 0.7' },
   ])

diff --git a/packages/tailwindcss/src/compat/apply-config-to-theme.ts b/packages/tailwindcss/src/compat/apply-config-to-theme.ts
@@ -59,7 +59,7 @@ export function applyConfigToTheme(
     // Replace `--default-font-*` with `fontFamily.sans` values
     {
       let fontFamily = resolveThemeValue(theme.fontFamily.sans)
-      if (fontFamily && designSystem.theme.hasDefault('--font-family-sans')) {
+      if (fontFamily && designSystem.theme.hasDefault('--font-sans')) {
         designSystem.theme.add('--default-font-family', fontFamily, options)
         designSystem.theme.add(
           '--default-font-feature-settings',
@@ -77,7 +77,7 @@ export function applyConfigToTheme(
     // Replace `--default-mono-font-*` with `fontFamily.mono` values
     {
       let fontFamily = resolveThemeValue(theme.fontFamily.mono)
-      if (fontFamily && designSystem.theme.hasDefault('--font-family-mono')) {
+      if (fontFamily && designSystem.theme.hasDefault('--font-mono')) {
         designSystem.theme.add('--default-mono-font-family', fontFamily, options)
         designSystem.theme.add(
           '--default-mono-font-feature-settings',
@@ -133,6 +133,7 @@ export function keyPathToCssProperty(path: string[]) {
   if (path[0] === 'borderRadius') path[0] = 'radius'
   if (path[0] === 'boxShadow') path[0] = 'shadow'
   if (path[0] === 'animation') path[0] = 'animate'
+  if (path[0] === 'fontFamily') path[0] = 'font'
 
   for (let part of path) {
     if (!IS_VALID_KEY.test(part)) return null

diff --git a/packages/tailwindcss/src/compat/config.test.ts b/packages/tailwindcss/src/compat/config.test.ts
@@ -716,7 +716,7 @@ describe('default font family compatibility', () => {
       }
       @config "./config.js";
       @theme {
-        --font-family-sans: Sandwich Sans;
+        --font-sans: Sandwich Sans;
       }
       @tailwind utilities;
     `
@@ -739,10 +739,10 @@ describe('default font family compatibility', () => {
         --default-font-family: var(--font-family-sans);
         --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
         --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
-        --font-family-sans: Sandwich Sans;
+        --font-sans: Sandwich Sans;
       }
       .font-sans {
-        font-family: var(--font-family-sans);
+        font-family: var(--font-sans);
       }
       "
     `)
@@ -945,9 +945,9 @@ describe('default font family compatibility', () => {
   }) => {
     let input = css`
       @theme default {
-        --default-mono-font-family: var(--font-family-mono);
-        --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
-        --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
+        --default-mono-font-family: var(--font-mono);
+        --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
+        --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
       }
       @config "./config.js";
       @tailwind utilities;
@@ -989,13 +989,13 @@ describe('default font family compatibility', () => {
   }) => {
     let input = css`
       @theme default {
-        --default-mono-font-family: var(--font-family-mono);
-        --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
-        --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
+        --default-mono-font-family: var(--font-mono);
+        --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
+        --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
       }
       @config "./config.js";
       @theme {
-        --font-family-mono: Sandwich Mono;
+        --font-mono: Sandwich Mono;
       }
       @tailwind utilities;
     `
@@ -1015,13 +1015,13 @@ describe('default font family compatibility', () => {
 
     expect(compiler.build(['font-mono'])).toMatchInlineSnapshot(`
       ":root {
-        --default-mono-font-family: var(--font-family-mono);
-        --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
-        --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
-        --font-family-mono: Sandwich Mono;
+        --default-mono-font-family: var(--font-mono);
+        --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
+        --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
+        --font-mono: Sandwich Mono;
       }
       .font-mono {
-        font-family: var(--font-family-mono);
+        font-family: var(--font-mono);
       }
       "
     `)

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
@@ -12305,8 +12305,9 @@ test('font', async () => {
     await compileCss(
       css`
         @theme {
-          --font-family-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-            'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+          --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+            'Segoe UI Symbol', 'Noto Color Emoji';
+          --font-weight-bold: 650;
         }
         @tailwind utilities;
       `,
@@ -12327,7 +12328,8 @@ test('font', async () => {
     ),
   ).toMatchInlineSnapshot(`
     ":root {
-      --font-family-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+      --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+      --font-weight-bold: 650;
     }
 
     .font-\\[\\"arial_rounded\\"\\] {
@@ -12343,7 +12345,7 @@ test('font', async () => {
     }
 
     .font-sans {
-      font-family: var(--font-family-sans);
+      font-family: var(--font-sans);
     }
 
     .font-\\[100\\] {
@@ -12361,6 +12363,11 @@ test('font', async () => {
       font-weight: var(--my-family);
     }
 
+    .font-bold {
+      --tw-font-weight: var(--font-weight-bold);
+      font-weight: var(--font-weight-bold);
+    }
+
     @supports (-moz-orient: inline) {
       @layer base {
         *, :before, :after, ::backdrop {
@@ -12375,24 +12382,37 @@ test('font', async () => {
     }"
   `)
   expect(
-    await run([
-      'font',
-      // font-family
-      '-font-sans',
-
-      // font-weight
-      '-font-bold',
-
-      'font-sans/foo',
-      'font-["arial_rounded"]/foo',
-      'font-[ui-sans-serif]/foo',
-      'font-[var(--my-family)]/foo',
-      'font-[family-name:var(--my-family)]/foo',
-      'font-[generic-name:var(--my-family)]/foo',
-      'font-bold/foo',
-      'font-[100]/foo',
-      'font-[number:var(--my-weight)]/foo',
-    ]),
+    await compileCss(
+      css`
+        @theme reference {
+          --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+            'Segoe UI Symbol', 'Noto Color Emoji';
+          --font-size-xl: 24px;
+          --font-weight-bold: 650;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'font',
+        // font-family
+        '-font-sans',
+
+        // font-weight
+        '-font-bold',
+
+        'font-size-xl',
+        'font-weight-bold',
+        'font-sans/foo',
+        'font-["arial_rounded"]/foo',
+        'font-[ui-sans-serif]/foo',
+        'font-[var(--my-family)]/foo',
+        'font-[family-name:var(--my-family)]/foo',
+        'font-[generic-name:var(--my-family)]/foo',
+        'font-bold/foo',
+        'font-[100]/foo',
+        'font-[number:var(--my-weight)]/foo',
+      ],
+    ),
   ).toEqual('')
 })
 

diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
@@ -2778,8 +2778,9 @@ export function createUtilities(theme: Theme) {
     {
       let value = theme.resolveWith(
         candidate.value.value,
-        ['--font-family'],
+        ['--font'],
         ['--font-feature-settings', '--font-variation-settings'],
+        ['--font-weight', '--font-size'],
       )
       if (value) {
         let [families, options = {}] = value

diff --git a/packages/tailwindcss/theme.css b/packages/tailwindcss/theme.css
@@ -2,12 +2,12 @@
   /* Defaults */
   --default-transition-duration: 150ms;
   --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  --default-font-family: var(--font-family-sans);
-  --default-font-feature-settings: var(--font-family-sans--font-feature-settings);
-  --default-font-variation-settings: var(--font-family-sans--font-variation-settings);
-  --default-mono-font-family: var(--font-family-mono);
-  --default-mono-font-feature-settings: var(--font-family-mono--font-feature-settings);
-  --default-mono-font-variation-settings: var(--font-family-mono--font-variation-settings);
+  --default-font-family: var(--font-sans);
+  --default-font-feature-settings: var(--font-sans--font-feature-settings);
+  --default-font-variation-settings: var(--font-sans--font-variation-settings);
+  --default-mono-font-family: var(--font-mono);
+  --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
+  --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);
 
   /* Breakpoints */
   --breakpoint-sm: 40rem;
@@ -352,10 +352,10 @@
   --width-prose: 65ch;
 
   /* Fonts */
-  --font-family-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+  --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
     'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-family-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
-  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
     'Courier New', monospace;
 
   /* Type scale */