Skip to content

Commit 28e46ba

Browse files
adamwathanphilipp-spiessthecrypticace
authored
Rename --font-size-* variables to --text-* (#14909)
This PR updates all of the `--font-size-*` variables to `--text-*` instead to closer match the utility names. ```diff @theme { - --font-size-xs: 0.75rem; - --font-size-xs--line-height: 1rem; - --font-size-sm: 0.875rem; - --font-size-sm--line-height: 1.25rem; - --font-size-base: 1rem; - --font-size-base--line-height: 1.5rem; - --font-size-lg: 1.125rem; - --font-size-lg--line-height: 1.75rem; - --font-size-xl: 1.25rem; - --font-size-xl--line-height: 1.75rem; /* ... */ + --text-xs: 0.75rem; + --text-xs--line-height: 1rem; + --text-sm: 0.875rem; + --text-sm--line-height: 1.25rem; + --text-base: 1rem; + --text-base--line-height: 1.5rem; + --text-lg: 1.125rem; + --text-lg--line-height: 1.75rem; + --text-xl: 1.25rem; + --text-xl--line-height: 1.75rem; /* ... */ } ``` 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 <[email protected]> Co-authored-by: Philipp Spiess <[email protected]> Co-authored-by: Jordan Pittman <[email protected]>
1 parent 3821f69 commit 28e46ba

File tree

21 files changed

+286
-181
lines changed

21 files changed

+286
-181
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
5050
- Remove static `font-weight` utilities and add `--font-weight-*` values to the default theme ([#14883](https://github.com/tailwindlabs/tailwindcss/pull/14883))
5151
- Rename `--transition-timing-function-*` variables to `--ease-*` ([#14886](https://github.com/tailwindlabs/tailwindcss/pull/14886))
5252
- Rename `--width-*` variables to `--container-*` ([#14898](https://github.com/tailwindlabs/tailwindcss/pull/14898))
53+
- Rename `--font-size-*` variables to `--text-*` ([#14909](https://github.com/tailwindlabs/tailwindcss/pull/14909))
5354

5455
## [4.0.0-alpha.31] - 2024-10-29
5556

‎integrations/upgrade/js-config.test.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -158,13 +158,13 @@ test(
158158
--color-red-500: #ef4444;
159159
--color-red-600: #dc2626;
160160
161-
--font-size-*: initial;
162-
--font-size-xs: 0.75rem;
163-
--font-size-xs--line-height: 1rem;
164-
--font-size-sm: 0.875rem;
165-
--font-size-sm--line-height: 1.5rem;
166-
--font-size-base: 1rem;
167-
--font-size-base--line-height: 2rem;
161+
--text-*: initial;
162+
--text-xs: 0.75rem;
163+
--text-xs--line-height: 1rem;
164+
--text-sm: 0.875rem;
165+
--text-sm--line-height: 1.5rem;
166+
--text-base: 1rem;
167+
--text-base--line-height: 2rem;
168168
169169
--width-*: initial;
170170
--width-0: 0%;

‎packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -314,32 +314,32 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
314314
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
315315
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
316316
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
317-
--font-size-xs: .75rem;
318-
--font-size-xs--line-height: 1rem;
319-
--font-size-sm: .875rem;
320-
--font-size-sm--line-height: 1.25rem;
321-
--font-size-base: 1rem;
322-
--font-size-base--line-height: 1.5rem;
323-
--font-size-lg: 1.125rem;
324-
--font-size-lg--line-height: 1.75rem;
325-
--font-size-xl: 1.25rem;
326-
--font-size-xl--line-height: 1.75rem;
327-
--font-size-2xl: 1.5rem;
328-
--font-size-2xl--line-height: 2rem;
329-
--font-size-3xl: 1.875rem;
330-
--font-size-3xl--line-height: 2.25rem;
331-
--font-size-4xl: 2.25rem;
332-
--font-size-4xl--line-height: 2.5rem;
333-
--font-size-5xl: 3rem;
334-
--font-size-5xl--line-height: 1;
335-
--font-size-6xl: 3.75rem;
336-
--font-size-6xl--line-height: 1;
337-
--font-size-7xl: 4.5rem;
338-
--font-size-7xl--line-height: 1;
339-
--font-size-8xl: 6rem;
340-
--font-size-8xl--line-height: 1;
341-
--font-size-9xl: 8rem;
342-
--font-size-9xl--line-height: 1;
317+
--text-xs: .75rem;
318+
--text-xs--line-height: 1rem;
319+
--text-sm: .875rem;
320+
--text-sm--line-height: 1.25rem;
321+
--text-base: 1rem;
322+
--text-base--line-height: 1.5rem;
323+
--text-lg: 1.125rem;
324+
--text-lg--line-height: 1.75rem;
325+
--text-xl: 1.25rem;
326+
--text-xl--line-height: 1.75rem;
327+
--text-2xl: 1.5rem;
328+
--text-2xl--line-height: 2rem;
329+
--text-3xl: 1.875rem;
330+
--text-3xl--line-height: 2.25rem;
331+
--text-4xl: 2.25rem;
332+
--text-4xl--line-height: 2.5rem;
333+
--text-5xl: 3rem;
334+
--text-5xl--line-height: 1;
335+
--text-6xl: 3.75rem;
336+
--text-6xl--line-height: 1;
337+
--text-7xl: 4.5rem;
338+
--text-7xl--line-height: 1;
339+
--text-8xl: 6rem;
340+
--text-8xl--line-height: 1;
341+
--text-9xl: 8rem;
342+
--text-9xl--line-height: 1;
343343
--font-weight-thin: 100;
344344
--font-weight-extralight: 200;
345345
--font-weight-light: 300;
@@ -551,8 +551,8 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
551551
552552
@layer utilities {
553553
.text-2xl {
554-
font-size: var(--font-size-2xl);
555-
line-height: var(--tw-leading, var(--font-size-2xl--line-height));
554+
font-size: var(--text-2xl);
555+
line-height: var(--tw-leading, var(--text-2xl--line-height));
556556
}
557557
558558
.text-black\\/50 {

‎packages/@tailwindcss-upgrade/src/template/codemods/theme-to-var.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ test.each([
1010

1111
// Handle special cases around `.1` in the `theme(…)`
1212
['[--value:theme(spacing.1)]', '[--value:var(--spacing-1)]'],
13-
['[--value:theme(fontSize.xs.1.lineHeight)]', '[--value:var(--font-size-xs--line-height)]'],
13+
['[--value:theme(fontSize.xs.1.lineHeight)]', '[--value:var(--text-xs--line-height)]'],
1414

1515
// Convert to `var(…)` if we can resolve the path
1616
['[color:theme(colors.red.500)]', '[color:var(--color-red-500)]'], // Arbitrary property
@@ -32,7 +32,7 @@ test.each([
3232
],
3333

3434
// Use `theme(…)` (deeply nested) inside of a `calc(…)` function
35-
['text-[calc(theme(fontSize.xs)*2)]', 'text-[calc(var(--font-size-xs)*2)]'],
35+
['text-[calc(theme(fontSize.xs)*2)]', 'text-[calc(var(--text-xs)*2)]'],
3636

3737
// Multiple `theme(… / …)` calls should result in modern syntax of `theme(…)`
3838
// - Can't convert to `var(…)` because that would lose the modifier.

‎packages/tailwindcss/src/__snapshots__/index.test.ts.snap‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -313,32 +313,32 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
313313
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
314314
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
315315
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
316-
--font-size-xs: .75rem;
317-
--font-size-xs--line-height: 1rem;
318-
--font-size-sm: .875rem;
319-
--font-size-sm--line-height: 1.25rem;
320-
--font-size-base: 1rem;
321-
--font-size-base--line-height: 1.5rem;
322-
--font-size-lg: 1.125rem;
323-
--font-size-lg--line-height: 1.75rem;
324-
--font-size-xl: 1.25rem;
325-
--font-size-xl--line-height: 1.75rem;
326-
--font-size-2xl: 1.5rem;
327-
--font-size-2xl--line-height: 2rem;
328-
--font-size-3xl: 1.875rem;
329-
--font-size-3xl--line-height: 2.25rem;
330-
--font-size-4xl: 2.25rem;
331-
--font-size-4xl--line-height: 2.5rem;
332-
--font-size-5xl: 3rem;
333-
--font-size-5xl--line-height: 1;
334-
--font-size-6xl: 3.75rem;
335-
--font-size-6xl--line-height: 1;
336-
--font-size-7xl: 4.5rem;
337-
--font-size-7xl--line-height: 1;
338-
--font-size-8xl: 6rem;
339-
--font-size-8xl--line-height: 1;
340-
--font-size-9xl: 8rem;
341-
--font-size-9xl--line-height: 1;
316+
--text-xs: .75rem;
317+
--text-xs--line-height: 1rem;
318+
--text-sm: .875rem;
319+
--text-sm--line-height: 1.25rem;
320+
--text-base: 1rem;
321+
--text-base--line-height: 1.5rem;
322+
--text-lg: 1.125rem;
323+
--text-lg--line-height: 1.75rem;
324+
--text-xl: 1.25rem;
325+
--text-xl--line-height: 1.75rem;
326+
--text-2xl: 1.5rem;
327+
--text-2xl--line-height: 2rem;
328+
--text-3xl: 1.875rem;
329+
--text-3xl--line-height: 2.25rem;
330+
--text-4xl: 2.25rem;
331+
--text-4xl--line-height: 2.5rem;
332+
--text-5xl: 3rem;
333+
--text-5xl--line-height: 1;
334+
--text-6xl: 3.75rem;
335+
--text-6xl--line-height: 1;
336+
--text-7xl: 4.5rem;
337+
--text-7xl--line-height: 1;
338+
--text-8xl: 6rem;
339+
--text-8xl--line-height: 1;
340+
--text-9xl: 8rem;
341+
--text-9xl--line-height: 1;
342342
--font-weight-thin: 100;
343343
--font-weight-extralight: 200;
344344
--font-weight-light: 300;

‎packages/tailwindcss/src/compat/apply-config-to-theme.test.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,9 +82,9 @@ test('config values can be merged into the theme', () => {
8282
'Potato Mono',
8383
{ '--font-variation-settings': '"XHGT" 0.7' },
8484
])
85-
expect(theme.resolve('sm', ['--font-size'])).toEqual('0.875rem')
86-
expect(theme.resolve('base', ['--font-size'])).toEqual('1rem')
87-
expect(theme.resolveWith('base', ['--font-size'], ['--line-height'])).toEqual([
85+
expect(theme.resolve('sm', ['--text'])).toEqual('0.875rem')
86+
expect(theme.resolve('base', ['--text'])).toEqual('1rem')
87+
expect(theme.resolveWith('base', ['--text'], ['--line-height'])).toEqual([
8888
'1rem',
8989
{ '--line-height': '1.5' },
9090
])

‎packages/tailwindcss/src/compat/apply-config-to-theme.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,13 +128,16 @@ export function themeableValues(config: ResolvedConfig['theme']): [string[], unk
128128
const IS_VALID_KEY = /^[a-zA-Z0-9-_%/\.]+$/
129129

130130
export function keyPathToCssProperty(path: string[]) {
131+
path = structuredClone(path)
132+
131133
if (path[0] === 'colors') path[0] = 'color'
132134
if (path[0] === 'screens') path[0] = 'breakpoint'
133135
if (path[0] === 'borderRadius') path[0] = 'radius'
134136
if (path[0] === 'boxShadow') path[0] = 'shadow'
135137
if (path[0] === 'animation') path[0] = 'animate'
136138
if (path[0] === 'transitionTimingFunction') path[0] = 'ease'
137139
if (path[0] === 'fontFamily') path[0] = 'font'
140+
if (path[0] === 'fontSize') path[0] = 'text'
138141
if (path[0] === 'maxWidth') path[0] = 'container'
139142

140143
for (let part of path) {

‎packages/tailwindcss/src/compat/config.test.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -255,16 +255,16 @@ describe('theme callbacks', () => {
255255
}) => {
256256
let input = css`
257257
@theme default {
258-
--font-size-base: 0rem;
259-
--font-size-base--line-height: 1rem;
260-
--font-size-md: 0rem;
261-
--font-size-md--line-height: 1rem;
262-
--font-size-xl: 0rem;
263-
--font-size-xl--line-height: 1rem;
258+
--text-base: 0rem;
259+
--text-base--line-height: 1rem;
260+
--text-md: 0rem;
261+
--text-md--line-height: 1rem;
262+
--text-xl: 0rem;
263+
--text-xl--line-height: 1rem;
264264
}
265265
@theme {
266-
--font-size-base: 100rem;
267-
--font-size-md--line-height: 101rem;
266+
--text-base: 100rem;
267+
--text-md--line-height: 101rem;
268268
}
269269
@tailwind utilities;
270270
@config "./config.js";
@@ -323,8 +323,8 @@ describe('theme callbacks', () => {
323323
expect(compiler.build(['leading-base', 'leading-md', 'leading-xl', 'prose']))
324324
.toMatchInlineSnapshot(`
325325
":root {
326-
--font-size-base: 100rem;
327-
--font-size-md--line-height: 101rem;
326+
--text-base: 100rem;
327+
--text-md--line-height: 101rem;
328328
}
329329
.prose {
330330
[class~=lead-base] {

‎packages/tailwindcss/src/compat/config/create-compat-config.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ export function createCompatConfig(cssTheme: Theme): UserConfig {
1414
colors: ({ theme }) => theme('color', {}),
1515

1616
extend: {
17+
fontSize: ({ theme }) => ({
18+
...theme('text', {}),
19+
}),
20+
1721
boxShadow: ({ theme }) => ({
1822
...theme('shadow', {}),
1923
}),

‎packages/tailwindcss/src/compat/flatten-color-palette.test.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { expect, test } from 'vitest'
2+
import { flattenColorPalette } from './flatten-color-palette'
3+
4+
test('it should handle private __CSS_VALUES__ to resolve to the right value', () => {
5+
expect(
6+
flattenColorPalette({
7+
'slate-100': '#000100',
8+
'slate-200': '#000200',
9+
'slate-300': '#000300',
10+
'slate-400': '#100400',
11+
'slate-500': '#100500',
12+
__CSS_VALUES__: {
13+
'slate-100': 4,
14+
'slate-200': 4,
15+
'slate-300': 4,
16+
'slate-400': 0,
17+
'slate-500': 0,
18+
} as any,
19+
slate: { '200': '#200200', '400': '#200400', '600': '#200600' },
20+
'slate-600': '#200600',
21+
}),
22+
).toMatchInlineSnapshot(`
23+
{
24+
"slate-100": "#000100",
25+
"slate-200": "#200200",
26+
"slate-300": "#000300",
27+
"slate-400": "#100400",
28+
"slate-500": "#100500",
29+
"slate-600": "#200600",
30+
}
31+
`)
32+
})

0 commit comments

Comments
 (0)