Skip to content

Commit 7175605

Browse files
adamwathanadamwathan
authored
Remove fallbacks from theme var(...) calls (#14881)
This PR changes how we render `var(...)` calls for theme values, removing the fallback values we were previously including. ```diff .text-white { - color: var(--color-white, #fff); + color: var(--color-white); } ``` We previously included the fallbacks only so you could see the value in dev tools but this feels like a bad reason to bloat the CSS. I'd rather just convince the Chrome team to surface this stuff better in dev tools in the first place. --------- Co-authored-by: Adam Wathan <[email protected]>
1 parent c50de93 commit 7175605

File tree

14 files changed

+478
-477
lines changed

14 files changed

+478
-477
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
3434
- Remove fixed line-height theme values and derive `leading-*` utilites from `--spacing-*` scale ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857))
3535
- Remove `--transition-timing-function-linear` from the default theme in favor of a static `ease-linear` utility ([#14880](https://github.com/tailwindlabs/tailwindcss/pull/14880))
3636
- Remove default `--spacing-*` scale in favor of `--spacing` multiplier ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857))
37+
- Remove `var(…)` fallbacks from theme values in utilities ([#14881](https://github.com/tailwindlabs/tailwindcss/pull/14881))
3738

3839
## [4.0.0-alpha.31] - 2024-10-29
3940

‎integrations/cli/index.test.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ describe.each([
167167
candidate`hocus:underline`,
168168
css`
169169
.text-primary {
170-
color: var(--color-primary, black);
170+
color: var(--color-primary);
171171
}
172172
`,
173173
])
@@ -207,7 +207,7 @@ describe.each([
207207
await fs.expectFileToContain('project-a/dist/out.css', [
208208
css`
209209
.text-primary {
210-
color: var(--color-primary, red);
210+
color: var(--color-primary);
211211
}
212212
`,
213213
])

‎integrations/postcss/index.test.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -404,7 +404,7 @@ test(
404404
candidate`hocus:underline`,
405405
css`
406406
.text-primary {
407-
color: var(--color-primary, black);
407+
color: var(--color-primary);
408408
}
409409
`,
410410
])
@@ -446,7 +446,7 @@ test(
446446
await fs.expectFileToContain('project-a/dist/out.css', [
447447
css`
448448
.text-primary {
449-
color: var(--color-primary, red);
449+
color: var(--color-primary);
450450
}
451451
`,
452452
])

‎integrations/vite/index.test.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -334,7 +334,7 @@ for (let transformer of ['postcss', 'lightningcss']) {
334334
candidate`flex`,
335335
css`
336336
.text-primary {
337-
color: var(--color-primary, black);
337+
color: var(--color-primary);
338338
}
339339
`,
340340
])
@@ -356,7 +356,7 @@ for (let transformer of ['postcss', 'lightningcss']) {
356356

357357
expect(styles).toContain(css`
358358
.text-primary {
359-
color: var(--color-primary, red);
359+
color: var(--color-primary);
360360
}
361361
`)
362362
})

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -541,12 +541,12 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
541541
542542
@layer utilities {
543543
.text-2xl {
544-
font-size: var(--font-size-2xl, 1.5rem);
545-
line-height: var(--tw-leading, var(--font-size-2xl--line-height, 2rem));
544+
font-size: var(--font-size-2xl);
545+
line-height: var(--tw-leading, var(--font-size-2xl--line-height));
546546
}
547547
548548
.text-black\\/50 {
549-
color: color-mix(in oklch, var(--color-black, #000) 50%, transparent);
549+
color: color-mix(in oklch, var(--color-black) 50%, transparent);
550550
}
551551
552552
.underline {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ test('@apply can be used without emitting the theme in the CSS file', async () =
100100

101101
expect(result.css.trim()).toMatchInlineSnapshot(`
102102
".foo {
103-
color: var(--color-red-500, oklch(.637 .237 25.331));
103+
color: var(--color-red-500);
104104
}"
105105
`)
106106
})

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -362,11 +362,11 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
362362
}
363363
364364
.w-4 {
365-
width: calc(var(--spacing, .25rem) * 4);
365+
width: calc(var(--spacing) * 4);
366366
}
367367
368368
.bg-red-500 {
369-
background-color: var(--color-red-500, oklch(.637 .237 25.331));
369+
background-color: var(--color-red-500);
370370
}
371371
372372
.shadow-sm {

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

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -95,11 +95,11 @@ exports[`border-* 1`] = `
9595
}
9696
9797
.border-red-500 {
98-
border-color: var(--color-red-500, #ef4444);
98+
border-color: var(--color-red-500);
9999
}
100100
101101
.border-red-500\\/50 {
102-
border-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
102+
border-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
103103
}
104104
105105
.border-transparent {
@@ -216,11 +216,11 @@ exports[`border-b-* 1`] = `
216216
}
217217
218218
.border-b-red-500 {
219-
border-bottom-color: var(--color-red-500, #ef4444);
219+
border-bottom-color: var(--color-red-500);
220220
}
221221
222222
.border-b-red-500\\/50 {
223-
border-bottom-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
223+
border-bottom-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
224224
}
225225
226226
.border-b-transparent {
@@ -337,11 +337,11 @@ exports[`border-e-* 1`] = `
337337
}
338338
339339
.border-e-red-500 {
340-
border-inline-end-color: var(--color-red-500, #ef4444);
340+
border-inline-end-color: var(--color-red-500);
341341
}
342342
343343
.border-e-red-500\\/50 {
344-
border-inline-end-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
344+
border-inline-end-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
345345
}
346346
347347
.border-e-transparent {
@@ -458,11 +458,11 @@ exports[`border-l-* 1`] = `
458458
}
459459
460460
.border-l-red-500 {
461-
border-left-color: var(--color-red-500, #ef4444);
461+
border-left-color: var(--color-red-500);
462462
}
463463
464464
.border-l-red-500\\/50 {
465-
border-left-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
465+
border-left-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
466466
}
467467
468468
.border-l-transparent {
@@ -579,11 +579,11 @@ exports[`border-r-* 1`] = `
579579
}
580580
581581
.border-r-red-500 {
582-
border-right-color: var(--color-red-500, #ef4444);
582+
border-right-color: var(--color-red-500);
583583
}
584584
585585
.border-r-red-500\\/50 {
586-
border-right-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
586+
border-right-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
587587
}
588588
589589
.border-r-transparent {
@@ -700,11 +700,11 @@ exports[`border-s-* 1`] = `
700700
}
701701
702702
.border-s-red-500 {
703-
border-inline-start-color: var(--color-red-500, #ef4444);
703+
border-inline-start-color: var(--color-red-500);
704704
}
705705
706706
.border-s-red-500\\/50 {
707-
border-inline-start-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
707+
border-inline-start-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
708708
}
709709
710710
.border-s-transparent {
@@ -821,11 +821,11 @@ exports[`border-t-* 1`] = `
821821
}
822822
823823
.border-t-red-500 {
824-
border-top-color: var(--color-red-500, #ef4444);
824+
border-top-color: var(--color-red-500);
825825
}
826826
827827
.border-t-red-500\\/50 {
828-
border-top-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
828+
border-top-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
829829
}
830830
831831
.border-t-transparent {
@@ -942,11 +942,11 @@ exports[`border-x-* 1`] = `
942942
}
943943
944944
.border-x-red-500 {
945-
border-inline-color: var(--color-red-500, #ef4444);
945+
border-inline-color: var(--color-red-500);
946946
}
947947
948948
.border-x-red-500\\/50 {
949-
border-inline-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
949+
border-inline-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
950950
}
951951
952952
.border-x-transparent {
@@ -1063,11 +1063,11 @@ exports[`border-y-* 1`] = `
10631063
}
10641064
10651065
.border-y-red-500 {
1066-
border-block-color: var(--color-red-500, #ef4444);
1066+
border-block-color: var(--color-red-500);
10671067
}
10681068
10691069
.border-y-red-500\\/50 {
1070-
border-block-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
1070+
border-block-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
10711071
}
10721072
10731073
.border-y-transparent {

‎packages/tailwindcss/src/at-import.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -438,7 +438,7 @@ test('supports theme(reference) imports', async () => {
438438
),
439439
).resolves.toMatchInlineSnapshot(`
440440
".text-red-500 {
441-
color: var(--color-red-500, red);
441+
color: var(--color-red-500);
442442
}
443443
"
444444
`)

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -402,7 +402,7 @@ describe('theme overrides order', () => {
402402
--color-blue: blue;
403403
}
404404
.bg-blue {
405-
background-color: var(--color-blue, blue);
405+
background-color: var(--color-blue);
406406
}
407407
.bg-red {
408408
background-color: very-red;
@@ -491,19 +491,19 @@ describe('theme overrides order', () => {
491491
--color-slate-500: #100500;
492492
}
493493
.bg-slate-100 {
494-
background-color: var(--color-slate-100, #000100);
494+
background-color: var(--color-slate-100);
495495
}
496496
.bg-slate-200 {
497497
background-color: #200200;
498498
}
499499
.bg-slate-300 {
500-
background-color: var(--color-slate-300, #000300);
500+
background-color: var(--color-slate-300);
501501
}
502502
.bg-slate-400 {
503-
background-color: var(--color-slate-400, #100400);
503+
background-color: var(--color-slate-400);
504504
}
505505
.bg-slate-500 {
506-
background-color: var(--color-slate-500, #100500);
506+
background-color: var(--color-slate-500);
507507
}
508508
.bg-slate-600 {
509509
background-color: #200600;
@@ -742,7 +742,7 @@ describe('default font family compatibility', () => {
742742
--font-family-sans: Sandwich Sans;
743743
}
744744
.font-sans {
745-
font-family: var(--font-family-sans, Sandwich Sans);
745+
font-family: var(--font-family-sans);
746746
}
747747
"
748748
`)
@@ -1021,7 +1021,7 @@ describe('default font family compatibility', () => {
10211021
--font-family-mono: Sandwich Mono;
10221022
}
10231023
.font-mono {
1024-
font-family: var(--font-family-mono, Sandwich Mono);
1024+
font-family: var(--font-family-mono);
10251025
}
10261026
"
10271027
`)
@@ -1476,7 +1476,7 @@ test('blocklisted candidates are not generated', async () => {
14761476
}
14771477
.md\\:bg-white {
14781478
@media (width >= 48rem) {
1479-
background-color: var(--color-white, #fff);
1479+
background-color: var(--color-white);
14801480
}
14811481
}
14821482
"

0 commit comments

Comments
 (0)