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 2024-11-05 15:44:21 -05:00 • committed by GitHub
parent c50de9384a
commit 7175605c61
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 478 additions and 477 deletions

View file

@ -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);
}
`,
])

View file

@ -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);
}
`,
])

View file

@ -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);
}
`)
})