Skip to content

Commit e39d1d9

Browse files
adamwathanadamwathan
committed
Rename --font-size-* variables to --text-* 
1 parent 3821f69 commit e39d1d9

File tree

8 files changed

+185
-118
lines changed

8 files changed

+185
-118
lines changed

‎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/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/index.test.ts‎

Lines changed: 75 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1067,7 +1067,7 @@ describe('Parsing themes values from CSS', () => {
10671067
}
10681068
}
10691069
1070-
--font-size-lg: 20px;
1070+
--text-lg: 20px;
10711071
}
10721072
@tailwind utilities;
10731073
`,
@@ -1077,11 +1077,11 @@ describe('Parsing themes values from CSS', () => {
10771077
":root {
10781078
--color-red: red;
10791079
--animate-foo: foo 1s infinite;
1080-
--font-size-lg: 20px;
1080+
--text-lg: 20px;
10811081
}
10821082
10831083
.text-lg {
1084-
font-size: var(--font-size-lg);
1084+
font-size: var(--text-lg);
10851085
}
10861086
10871087
.accent-red {
@@ -1103,8 +1103,8 @@ describe('Parsing themes values from CSS', () => {
11031103
@theme {
11041104
--color-red: #f00;
11051105
--color-blue: #00f;
1106-
--font-size-sm: 13px;
1107-
--font-size-md: 16px;
1106+
--text-sm: 13px;
1107+
--text-md: 16px;
11081108
11091109
--animate-spin: spin 1s infinite linear;
11101110
@@ -1116,7 +1116,7 @@ describe('Parsing themes values from CSS', () => {
11161116
}
11171117
@theme {
11181118
--color-*: initial;
1119-
--font-size-md: initial;
1119+
--text-md: initial;
11201120
--animate-*: initial;
11211121
--keyframes-*: initial;
11221122
}
@@ -1129,12 +1129,12 @@ describe('Parsing themes values from CSS', () => {
11291129
),
11301130
).toMatchInlineSnapshot(`
11311131
":root {
1132-
--font-size-sm: 13px;
1132+
--text-sm: 13px;
11331133
--color-green: #0f0;
11341134
}
11351135
11361136
.text-sm {
1137-
font-size: var(--font-size-sm);
1137+
font-size: var(--text-sm);
11381138
}
11391139
11401140
.accent-green {
@@ -1174,13 +1174,12 @@ describe('Parsing themes values from CSS', () => {
11741174
`)
11751175
})
11761176

1177-
test('unsetting `--font-*` does not unset `--font-weight-*` or `--font-size-*`', async () => {
1177+
test('unsetting `--font-*` does not unset `--font-weight-*`', async () => {
11781178
expect(
11791179
await compileCss(
11801180
css`
11811181
@theme {
11821182
--font-weight-bold: bold;
1183-
--font-size-sm: 14px;
11841183
--font-sans: sans-serif;
11851184
--font-serif: serif;
11861185
}
@@ -1190,23 +1189,18 @@ describe('Parsing themes values from CSS', () => {
11901189
}
11911190
@tailwind utilities;
11921191
`,
1193-
['font-bold', 'text-sm', 'font-sans', 'font-serif', 'font-body'],
1192+
['font-bold', 'font-sans', 'font-serif', 'font-body'],
11941193
),
11951194
).toMatchInlineSnapshot(`
11961195
":root {
11971196
--font-weight-bold: bold;
1198-
--font-size-sm: 14px;
11991197
--font-body: Inter;
12001198
}
12011199
12021200
.font-body {
12031201
font-family: var(--font-body);
12041202
}
12051203
1206-
.text-sm {
1207-
font-size: var(--font-size-sm);
1208-
}
1209-
12101204
.font-bold {
12111205
--tw-font-weight: var(--font-weight-bold);
12121206
font-weight: var(--font-weight-bold);
@@ -1347,6 +1341,71 @@ describe('Parsing themes values from CSS', () => {
13471341
`)
13481342
})
13491343

1344+
test('unsetting `--text-*` does not unset `--text-color-*`, `--text-underline-offset-*`, `--text-indent-*`, `--text-decoration-thickness-*` or `--text-decoration-color-*`', async () => {
1345+
expect(
1346+
await compileCss(
1347+
css`
1348+
@theme {
1349+
--text-color-potato: brown;
1350+
--text-underline-offset-potato: 4px;
1351+
--text-indent-potato: 6px;
1352+
--text-decoration-thickness-potato: 8px;
1353+
--text-decoration-color-salad: yellow;
1354+
--text-4xl: 60px;
1355+
}
1356+
@theme {
1357+
--text-*: initial;
1358+
--text-lg: 20px;
1359+
}
1360+
@tailwind utilities;
1361+
`,
1362+
[
1363+
'text-potato',
1364+
'underline-offset-potato',
1365+
'indent-potato',
1366+
'decoration-potato',
1367+
'decoration-salad',
1368+
'text-lg',
1369+
],
1370+
),
1371+
).toMatchInlineSnapshot(`
1372+
":root {
1373+
--text-color-potato: brown;
1374+
--text-underline-offset-potato: 4px;
1375+
--text-indent-potato: 6px;
1376+
--text-decoration-thickness-potato: 8px;
1377+
--text-decoration-color-salad: yellow;
1378+
--text-lg: 20px;
1379+
}
1380+
1381+
.indent-potato {
1382+
text-indent: var(--text-indent-potato);
1383+
}
1384+
1385+
.text-lg {
1386+
font-size: var(--text-lg);
1387+
}
1388+
1389+
.text-potato {
1390+
color: var(--text-color-potato);
1391+
}
1392+
1393+
.decoration-salad {
1394+
-webkit-text-decoration-color: var(--text-decoration-color-salad);
1395+
-webkit-text-decoration-color: var(--text-decoration-color-salad);
1396+
text-decoration-color: var(--text-decoration-color-salad);
1397+
}
1398+
1399+
.decoration-potato {
1400+
text-decoration-thickness: var(--text-decoration-thickness-potato);
1401+
}
1402+
1403+
.underline-offset-potato {
1404+
text-underline-offset: var(--text-underline-offset-potato);
1405+
}"
1406+
`)
1407+
})
1408+
13501409
test('unused keyframes are removed when an animation is unset', async () => {
13511410
expect(
13521411
await compileCss(

‎packages/tailwindcss/src/intellisense.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ function loadDesignSystem() {
1111
theme.add('--colors-red-500', 'red')
1212
theme.add('--colors-blue-500', 'blue')
1313
theme.add('--breakpoint-sm', '640px')
14-
theme.add('--font-size-xs', '0.75rem')
15-
theme.add('--font-size-xs--line-height', '1rem')
14+
theme.add('--text-xs', '0.75rem')
15+
theme.add('--text-xs--line-height', '1rem')
1616
theme.add('--perspective-dramatic', '100px')
1717
theme.add('--perspective-normal', '500px')
1818
theme.add('--opacity-background', '0.3')

‎packages/tailwindcss/src/theme.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,16 @@ export const enum ThemeOptions {
1414
const ignoredThemeKeyMap = new Map([
1515
['--font', ['--font-weight', '--font-size']],
1616
['--inset', ['--inset-shadow', '--inset-ring']],
17+
[
18+
'--text',
19+
[
20+
'--text-color',
21+
'--text-underline-offset',
22+
'--text-indent',
23+
'--text-decoration-thickness',
24+
'--text-decoration-color',
25+
],
26+
],
1727
])
1828

1929
function isIgnoredThemeKey(themeKey: ThemeKey, namespace: ThemeKey) {

0 commit comments

Comments
 (0)