mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
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 <4323180+adamwathan@users.noreply.github.com>
This commit is contained in:
Adam Wathan
GitHub
parent
c50de9384a
commit
7175605c61
@ -34,6 +34,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
- Remove fixed line-height theme values and derive `leading-*` utilites from `--spacing-*` scale ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857))
|
||||
- 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))
|
||||
- Remove default `--spacing-*` scale in favor of `--spacing` multiplier ([#14857](https://github.com/tailwindlabs/tailwindcss/pull/14857))
|
||||
- Remove `var(…)` fallbacks from theme values in utilities ([#14881](https://github.com/tailwindlabs/tailwindcss/pull/14881))
|
||||
|
||||
## [4.0.0-alpha.31] - 2024-10-29
|
||||
|
||||
|
||||
@ -167,7 +167,7 @@ describe.each([
|
||||
candidate`hocus:underline`,
|
||||
css`
|
||||
.text-primary {
|
||||
color: var(--color-primary, black);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
`,
|
||||
])
|
||||
@ -207,7 +207,7 @@ describe.each([
|
||||
await fs.expectFileToContain('project-a/dist/out.css', [
|
||||
css`
|
||||
.text-primary {
|
||||
color: var(--color-primary, red);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
`,
|
||||
])
|
||||
|
||||
@ -404,7 +404,7 @@ test(
|
||||
candidate`hocus:underline`,
|
||||
css`
|
||||
.text-primary {
|
||||
color: var(--color-primary, black);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
`,
|
||||
])
|
||||
@ -446,7 +446,7 @@ test(
|
||||
await fs.expectFileToContain('project-a/dist/out.css', [
|
||||
css`
|
||||
.text-primary {
|
||||
color: var(--color-primary, red);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
`,
|
||||
])
|
||||
|
||||
@ -334,7 +334,7 @@ for (let transformer of ['postcss', 'lightningcss']) {
|
||||
candidate`flex`,
|
||||
css`
|
||||
.text-primary {
|
||||
color: var(--color-primary, black);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
`,
|
||||
])
|
||||
@ -356,7 +356,7 @@ for (let transformer of ['postcss', 'lightningcss']) {
|
||||
|
||||
expect(styles).toContain(css`
|
||||
.text-primary {
|
||||
color: var(--color-primary, red);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
`)
|
||||
})
|
||||
|
||||
@ -541,12 +541,12 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
|
||||
|
||||
@layer utilities {
|
||||
.text-2xl {
|
||||
font-size: var(--font-size-2xl, 1.5rem);
|
||||
line-height: var(--tw-leading, var(--font-size-2xl--line-height, 2rem));
|
||||
font-size: var(--font-size-2xl);
|
||||
line-height: var(--tw-leading, var(--font-size-2xl--line-height));
|
||||
}
|
||||
|
||||
.text-black\\/50 {
|
||||
color: color-mix(in oklch, var(--color-black, #000) 50%, transparent);
|
||||
color: color-mix(in oklch, var(--color-black) 50%, transparent);
|
||||
}
|
||||
|
||||
.underline {
|
||||
|
||||
@ -100,7 +100,7 @@ test('@apply can be used without emitting the theme in the CSS file', async () =
|
||||
|
||||
expect(result.css.trim()).toMatchInlineSnapshot(`
|
||||
".foo {
|
||||
color: var(--color-red-500, oklch(.637 .237 25.331));
|
||||
color: var(--color-red-500);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
|
||||
@ -362,11 +362,11 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
|
||||
}
|
||||
|
||||
.w-4 {
|
||||
width: calc(var(--spacing, .25rem) * 4);
|
||||
width: calc(var(--spacing) * 4);
|
||||
}
|
||||
|
||||
.bg-red-500 {
|
||||
background-color: var(--color-red-500, oklch(.637 .237 25.331));
|
||||
background-color: var(--color-red-500);
|
||||
}
|
||||
|
||||
.shadow-sm {
|
||||
|
||||
@ -95,11 +95,11 @@ exports[`border-* 1`] = `
|
||||
}
|
||||
|
||||
.border-red-500 {
|
||||
border-color: var(--color-red-500, #ef4444);
|
||||
border-color: var(--color-red-500);
|
||||
}
|
||||
|
||||
.border-red-500\\/50 {
|
||||
border-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
|
||||
border-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
|
||||
.border-transparent {
|
||||
@ -216,11 +216,11 @@ exports[`border-b-* 1`] = `
|
||||
}
|
||||
|
||||
.border-b-red-500 {
|
||||
border-bottom-color: var(--color-red-500, #ef4444);
|
||||
border-bottom-color: var(--color-red-500);
|
||||
}
|
||||
|
||||
.border-b-red-500\\/50 {
|
||||
border-bottom-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
|
||||
border-bottom-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
|
||||
.border-b-transparent {
|
||||
@ -337,11 +337,11 @@ exports[`border-e-* 1`] = `
|
||||
}
|
||||
|
||||
.border-e-red-500 {
|
||||
border-inline-end-color: var(--color-red-500, #ef4444);
|
||||
border-inline-end-color: var(--color-red-500);
|
||||
}
|
||||
|
||||
.border-e-red-500\\/50 {
|
||||
border-inline-end-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
|
||||
border-inline-end-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
|
||||
.border-e-transparent {
|
||||
@ -458,11 +458,11 @@ exports[`border-l-* 1`] = `
|
||||
}
|
||||
|
||||
.border-l-red-500 {
|
||||
border-left-color: var(--color-red-500, #ef4444);
|
||||
border-left-color: var(--color-red-500);
|
||||
}
|
||||
|
||||
.border-l-red-500\\/50 {
|
||||
border-left-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
|
||||
border-left-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
|
||||
.border-l-transparent {
|
||||
@ -579,11 +579,11 @@ exports[`border-r-* 1`] = `
|
||||
}
|
||||
|
||||
.border-r-red-500 {
|
||||
border-right-color: var(--color-red-500, #ef4444);
|
||||
border-right-color: var(--color-red-500);
|
||||
}
|
||||
|
||||
.border-r-red-500\\/50 {
|
||||
border-right-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
|
||||
border-right-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
|
||||
.border-r-transparent {
|
||||
@ -700,11 +700,11 @@ exports[`border-s-* 1`] = `
|
||||
}
|
||||
|
||||
.border-s-red-500 {
|
||||
border-inline-start-color: var(--color-red-500, #ef4444);
|
||||
border-inline-start-color: var(--color-red-500);
|
||||
}
|
||||
|
||||
.border-s-red-500\\/50 {
|
||||
border-inline-start-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
|
||||
border-inline-start-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
|
||||
.border-s-transparent {
|
||||
@ -821,11 +821,11 @@ exports[`border-t-* 1`] = `
|
||||
}
|
||||
|
||||
.border-t-red-500 {
|
||||
border-top-color: var(--color-red-500, #ef4444);
|
||||
border-top-color: var(--color-red-500);
|
||||
}
|
||||
|
||||
.border-t-red-500\\/50 {
|
||||
border-top-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
|
||||
border-top-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
|
||||
.border-t-transparent {
|
||||
@ -942,11 +942,11 @@ exports[`border-x-* 1`] = `
|
||||
}
|
||||
|
||||
.border-x-red-500 {
|
||||
border-inline-color: var(--color-red-500, #ef4444);
|
||||
border-inline-color: var(--color-red-500);
|
||||
}
|
||||
|
||||
.border-x-red-500\\/50 {
|
||||
border-inline-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
|
||||
border-inline-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
|
||||
.border-x-transparent {
|
||||
@ -1063,11 +1063,11 @@ exports[`border-y-* 1`] = `
|
||||
}
|
||||
|
||||
.border-y-red-500 {
|
||||
border-block-color: var(--color-red-500, #ef4444);
|
||||
border-block-color: var(--color-red-500);
|
||||
}
|
||||
|
||||
.border-y-red-500\\/50 {
|
||||
border-block-color: color-mix(in oklch, var(--color-red-500, #ef4444) 50%, transparent);
|
||||
border-block-color: color-mix(in oklch, var(--color-red-500) 50%, transparent);
|
||||
}
|
||||
|
||||
.border-y-transparent {
|
||||
|
||||
@ -438,7 +438,7 @@ test('supports theme(reference) imports', async () => {
|
||||
),
|
||||
).resolves.toMatchInlineSnapshot(`
|
||||
".text-red-500 {
|
||||
color: var(--color-red-500, red);
|
||||
color: var(--color-red-500);
|
||||
}
|
||||
"
|
||||
`)
|
||||
|
||||
@ -402,7 +402,7 @@ describe('theme overrides order', () => {
|
||||
--color-blue: blue;
|
||||
}
|
||||
.bg-blue {
|
||||
background-color: var(--color-blue, blue);
|
||||
background-color: var(--color-blue);
|
||||
}
|
||||
.bg-red {
|
||||
background-color: very-red;
|
||||
@ -491,19 +491,19 @@ describe('theme overrides order', () => {
|
||||
--color-slate-500: #100500;
|
||||
}
|
||||
.bg-slate-100 {
|
||||
background-color: var(--color-slate-100, #000100);
|
||||
background-color: var(--color-slate-100);
|
||||
}
|
||||
.bg-slate-200 {
|
||||
background-color: #200200;
|
||||
}
|
||||
.bg-slate-300 {
|
||||
background-color: var(--color-slate-300, #000300);
|
||||
background-color: var(--color-slate-300);
|
||||
}
|
||||
.bg-slate-400 {
|
||||
background-color: var(--color-slate-400, #100400);
|
||||
background-color: var(--color-slate-400);
|
||||
}
|
||||
.bg-slate-500 {
|
||||
background-color: var(--color-slate-500, #100500);
|
||||
background-color: var(--color-slate-500);
|
||||
}
|
||||
.bg-slate-600 {
|
||||
background-color: #200600;
|
||||
@ -742,7 +742,7 @@ describe('default font family compatibility', () => {
|
||||
--font-family-sans: Sandwich Sans;
|
||||
}
|
||||
.font-sans {
|
||||
font-family: var(--font-family-sans, Sandwich Sans);
|
||||
font-family: var(--font-family-sans);
|
||||
}
|
||||
"
|
||||
`)
|
||||
@ -1021,7 +1021,7 @@ describe('default font family compatibility', () => {
|
||||
--font-family-mono: Sandwich Mono;
|
||||
}
|
||||
.font-mono {
|
||||
font-family: var(--font-family-mono, Sandwich Mono);
|
||||
font-family: var(--font-family-mono);
|
||||
}
|
||||
"
|
||||
`)
|
||||
@ -1476,7 +1476,7 @@ test('blocklisted candidates are not generated', async () => {
|
||||
}
|
||||
.md\\:bg-white {
|
||||
@media (width >= 48rem) {
|
||||
background-color: var(--color-white, #fff);
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
}
|
||||
"
|
||||
|
||||
@ -49,7 +49,7 @@ describe('compiling CSS', () => {
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\\:bg-black {
|
||||
background-color: var(--color-black, #000);
|
||||
background-color: var(--color-black);
|
||||
}
|
||||
}
|
||||
}"
|
||||
@ -241,30 +241,30 @@ describe('@apply', () => {
|
||||
.foo {
|
||||
--tw-translate-x: 100%;
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
animation: var(--animate-spin, spin 1s linear infinite);
|
||||
background-color: var(--color-red-500, #ef4444);
|
||||
animation: var(--animate-spin);
|
||||
background-color: var(--color-red-500);
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.foo:hover {
|
||||
background-color: var(--color-blue-500, #3b82f6);
|
||||
background-color: var(--color-blue-500);
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 768px) {
|
||||
.foo {
|
||||
background-color: var(--color-green-500, #22c55e);
|
||||
background-color: var(--color-green-500);
|
||||
}
|
||||
}
|
||||
|
||||
.foo:hover:focus {
|
||||
background-color: var(--color-red-200, #fecaca);
|
||||
background-color: var(--color-red-200);
|
||||
}
|
||||
|
||||
@media (width >= 768px) {
|
||||
.foo:hover:focus {
|
||||
background-color: var(--color-green-200, #bbf7d0);
|
||||
background-color: var(--color-green-200);
|
||||
}
|
||||
}
|
||||
|
||||
@ -577,7 +577,7 @@ describe('important', () => {
|
||||
}
|
||||
|
||||
.animate-spin\\! {
|
||||
animation: var(--animate-spin, spin 1s linear infinite) !important;
|
||||
animation: var(--animate-spin) !important;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
@ -623,15 +623,15 @@ describe('sorting', () => {
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: var(--spacing-1, .25rem);
|
||||
padding: var(--spacing-1);
|
||||
}
|
||||
|
||||
.px-1 {
|
||||
padding-inline: var(--spacing-1, .25rem);
|
||||
padding-inline: var(--spacing-1);
|
||||
}
|
||||
|
||||
.pl-1 {
|
||||
padding-left: var(--spacing-1, .25rem);
|
||||
padding-left: var(--spacing-1);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
@ -680,16 +680,16 @@ describe('sorting', () => {
|
||||
}
|
||||
|
||||
.mx-0 {
|
||||
margin-inline: var(--spacing-0, 0px);
|
||||
margin-inline: var(--spacing-0);
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: var(--spacing-4, 1rem);
|
||||
gap: var(--spacing-4);
|
||||
}
|
||||
|
||||
:where(.space-x-2 > :not(:last-child)) {
|
||||
margin-inline-start: calc(var(--spacing-2, .5rem) * var(--tw-space-x-reverse));
|
||||
margin-inline-end: calc(var(--spacing-2, .5rem) * calc(1 - var(--tw-space-x-reverse)));
|
||||
margin-inline-start: calc(var(--spacing-2) * var(--tw-space-x-reverse));
|
||||
margin-inline-end: calc(var(--spacing-2) * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
@supports (-moz-orient: inline) {
|
||||
@ -749,51 +749,51 @@ describe('sorting', () => {
|
||||
}
|
||||
|
||||
.mx-3 {
|
||||
margin-inline: var(--spacing-3, 3px);
|
||||
margin-inline: var(--spacing-3);
|
||||
}
|
||||
|
||||
.ms-1 {
|
||||
margin-inline-start: var(--spacing-1, 1px);
|
||||
margin-inline-start: var(--spacing-1);
|
||||
}
|
||||
|
||||
.me-2 {
|
||||
margin-inline-end: var(--spacing-2, 2px);
|
||||
margin-inline-end: var(--spacing-2);
|
||||
}
|
||||
|
||||
.scroll-mx-3 {
|
||||
scroll-margin-inline: var(--spacing-3, 3px);
|
||||
scroll-margin-inline: var(--spacing-3);
|
||||
}
|
||||
|
||||
.scroll-ms-1 {
|
||||
scroll-margin-inline-start: var(--spacing-1, 1px);
|
||||
scroll-margin-inline-start: var(--spacing-1);
|
||||
}
|
||||
|
||||
.scroll-me-2 {
|
||||
scroll-margin-inline-end: var(--spacing-2, 2px);
|
||||
scroll-margin-inline-end: var(--spacing-2);
|
||||
}
|
||||
|
||||
.scroll-px-3 {
|
||||
scroll-padding-inline: var(--spacing-3, 3px);
|
||||
scroll-padding-inline: var(--spacing-3);
|
||||
}
|
||||
|
||||
.scroll-ps-1 {
|
||||
scroll-padding-inline-start: var(--spacing-1, 1px);
|
||||
scroll-padding-inline-start: var(--spacing-1);
|
||||
}
|
||||
|
||||
.scroll-pe-2 {
|
||||
scroll-padding-inline-end: var(--spacing-2, 2px);
|
||||
scroll-padding-inline-end: var(--spacing-2);
|
||||
}
|
||||
|
||||
.px-3 {
|
||||
padding-inline: var(--spacing-3, 3px);
|
||||
padding-inline: var(--spacing-3);
|
||||
}
|
||||
|
||||
.ps-1 {
|
||||
padding-inline-start: var(--spacing-1, 1px);
|
||||
padding-inline-start: var(--spacing-1);
|
||||
}
|
||||
|
||||
.pe-2 {
|
||||
padding-inline-end: var(--spacing-2, 2px);
|
||||
padding-inline-end: var(--spacing-2);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
@ -996,7 +996,7 @@ describe('Parsing themes values from CSS', () => {
|
||||
}
|
||||
|
||||
.accent-red-500 {
|
||||
accent-color: var(--color-red-500, red);
|
||||
accent-color: var(--color-red-500);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
@ -1019,7 +1019,7 @@ describe('Parsing themes values from CSS', () => {
|
||||
}
|
||||
|
||||
.accent-red-500 {
|
||||
accent-color: var(--color-red-500, #f10);
|
||||
accent-color: var(--color-red-500);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
@ -1045,11 +1045,11 @@ describe('Parsing themes values from CSS', () => {
|
||||
}
|
||||
|
||||
.accent-blue-500 {
|
||||
accent-color: var(--color-blue-500, #00f);
|
||||
accent-color: var(--color-blue-500);
|
||||
}
|
||||
|
||||
.accent-red-500 {
|
||||
accent-color: var(--color-red-500, red);
|
||||
accent-color: var(--color-red-500);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
@ -1074,11 +1074,11 @@ describe('Parsing themes values from CSS', () => {
|
||||
}
|
||||
|
||||
.w-1\\/2 {
|
||||
width: var(--width-1\\/2, 75%);
|
||||
width: var(--width-1\\/2);
|
||||
}
|
||||
|
||||
.w-75\\% {
|
||||
width: var(--width-75\\%, 50%);
|
||||
width: var(--width-75\\%);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
@ -1111,11 +1111,11 @@ describe('Parsing themes values from CSS', () => {
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: var(--font-size-lg, 20px);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.accent-red {
|
||||
accent-color: var(--color-red, red);
|
||||
accent-color: var(--color-red);
|
||||
}
|
||||
|
||||
@keyframes foo {
|
||||
@ -1164,11 +1164,11 @@ describe('Parsing themes values from CSS', () => {
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: var(--font-size-sm, 13px);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.accent-green {
|
||||
accent-color: var(--color-green, #0f0);
|
||||
accent-color: var(--color-green);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
@ -1199,7 +1199,7 @@ describe('Parsing themes values from CSS', () => {
|
||||
}
|
||||
|
||||
.accent-green {
|
||||
accent-color: var(--color-green, #0f0);
|
||||
accent-color: var(--color-green);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
@ -1237,7 +1237,7 @@ describe('Parsing themes values from CSS', () => {
|
||||
}
|
||||
|
||||
.animate-foobar {
|
||||
animation: var(--animate-foobar, foobar 1s infinite);
|
||||
animation: var(--animate-foobar);
|
||||
}
|
||||
|
||||
@keyframes foobar {
|
||||
@ -1268,11 +1268,11 @@ describe('Parsing themes values from CSS', () => {
|
||||
}
|
||||
|
||||
.bg-potato {
|
||||
background-color: var(--color-potato, #ac855b);
|
||||
background-color: var(--color-potato);
|
||||
}
|
||||
|
||||
.bg-tomato {
|
||||
background-color: var(--color-tomato, #e10c04);
|
||||
background-color: var(--color-tomato);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
@ -1293,7 +1293,7 @@ describe('Parsing themes values from CSS', () => {
|
||||
),
|
||||
).toMatchInlineSnapshot(`
|
||||
".bg-potato {
|
||||
background-color: var(--color-potato, #c794aa);
|
||||
background-color: var(--color-potato);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
@ -1318,7 +1318,7 @@ describe('Parsing themes values from CSS', () => {
|
||||
}
|
||||
|
||||
.bg-potato {
|
||||
background-color: var(--color-potato, #c794aa);
|
||||
background-color: var(--color-potato);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
@ -1348,15 +1348,15 @@ describe('Parsing themes values from CSS', () => {
|
||||
}
|
||||
|
||||
.bg-avocado {
|
||||
background-color: var(--color-avocado, #c0cc6d);
|
||||
background-color: var(--color-avocado);
|
||||
}
|
||||
|
||||
.bg-potato {
|
||||
background-color: var(--color-potato, #ac855b);
|
||||
background-color: var(--color-potato);
|
||||
}
|
||||
|
||||
.bg-tomato {
|
||||
background-color: var(--color-tomato, #e10c04);
|
||||
background-color: var(--color-tomato);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
@ -1532,7 +1532,7 @@ describe('Parsing themes values from CSS', () => {
|
||||
}
|
||||
|
||||
.bg-potato {
|
||||
background-color: var(--color-potato, #ac855b);
|
||||
background-color: var(--color-potato);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
@ -1574,7 +1574,7 @@ describe('Parsing themes values from CSS', () => {
|
||||
),
|
||||
).toMatchInlineSnapshot(`
|
||||
".bg-potato {
|
||||
background-color: var(--color-potato, #efb46b);
|
||||
background-color: var(--color-potato);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
@ -1625,11 +1625,11 @@ describe('Parsing themes values from CSS', () => {
|
||||
}
|
||||
|
||||
.bg-potato {
|
||||
background-color: var(--color-potato, #ac855b);
|
||||
background-color: var(--color-potato);
|
||||
}
|
||||
|
||||
.bg-tomato {
|
||||
background-color: var(--color-tomato, tomato);
|
||||
background-color: var(--color-tomato);
|
||||
}"
|
||||
`)
|
||||
})
|
||||
@ -1671,7 +1671,7 @@ describe('Parsing themes values from CSS', () => {
|
||||
}
|
||||
|
||||
.text-orange {
|
||||
color: var(--color-orange, orange);
|
||||
color: var(--color-orange);
|
||||
}
|
||||
|
||||
.text-red {
|
||||
@ -1717,7 +1717,7 @@ describe('Parsing themes values from CSS', () => {
|
||||
}
|
||||
|
||||
.text-orange {
|
||||
color: var(--color-orange, orange);
|
||||
color: var(--color-orange);
|
||||
}
|
||||
|
||||
.text-red {
|
||||
|
||||
@ -91,7 +91,7 @@ test('CSS variables output by the theme are prefixed', async () => {
|
||||
--tw-breakpoint-sm: 640px;
|
||||
}
|
||||
.tw\\:text-red {
|
||||
color: var(--tw-color-red, #f00);
|
||||
color: var(--tw-color-red);
|
||||
}
|
||||
"
|
||||
`)
|
||||
@ -219,7 +219,7 @@ test('a prefix can be configured via @import theme(…)', async () => {
|
||||
]),
|
||||
).toMatchInlineSnapshot(`
|
||||
".tw\\:bg-potato {
|
||||
background-color: var(--tw-color-potato, #7a4724);
|
||||
background-color: var(--tw-color-potato);
|
||||
}
|
||||
.tw\\:custom {
|
||||
color: red;
|
||||
@ -279,27 +279,27 @@ test('a prefix can be configured via @import prefix(…)', async () => {
|
||||
|
||||
expect(compiler.build(['tw:underline', 'tw:bg-potato', 'tw:hover:line-through', 'tw:custom']))
|
||||
.toMatchInlineSnapshot(`
|
||||
":root {
|
||||
--tw-color-potato: #7a4724;
|
||||
}
|
||||
.tw\\:bg-potato {
|
||||
background-color: var(--tw-color-potato, #7a4724);
|
||||
}
|
||||
.tw\\:custom {
|
||||
color: red;
|
||||
}
|
||||
.tw\\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.tw\\:hover\\:line-through {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
text-decoration-line: line-through;
|
||||
":root {
|
||||
--tw-color-potato: #7a4724;
|
||||
}
|
||||
.tw\\:bg-potato {
|
||||
background-color: var(--tw-color-potato);
|
||||
}
|
||||
.tw\\:custom {
|
||||
color: red;
|
||||
}
|
||||
.tw\\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.tw\\:hover\\:line-through {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
text-decoration-line: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
"
|
||||
`)
|
||||
"
|
||||
`)
|
||||
|
||||
// Non-prefixed utilities are ignored
|
||||
compiler = await compile(input, {
|
||||
|
||||
@ -144,7 +144,7 @@ export class Theme {
|
||||
return null
|
||||
}
|
||||
|
||||
return `var(${this.#prefixKey(themeKey)}, ${this.values.get(themeKey)?.value})`
|
||||
return `var(${this.#prefixKey(themeKey)})`
|
||||
}
|
||||
|
||||
resolve(
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user