wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Add variable fallback to fix Chrome issue (#15003)

Browse source 
This works around an issue in Chrome where `::selection` does not read
from variables defined on `::selection` thus breaking all uses of color
utilities with the selection variant. e.g. `selection::bg-red-200`.

We now add a fallback value of `1` to all uses of
`var(--tw-bg-opacity)`, `var(--tw-text-opacity)`,
`var(--tw-border-opacity)`, etc… since Chrome treats the variable as if
it did not exist because it's not defined on the parent.

In Chrome 131 (until the change is rolled back) existing utilities like
these will not work:
- `selection:text-opacity-50`
- `selection:[--tw-text-opacity:0.5]`

Fixes #15000

---------

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
This commit is contained in:
Jordan Pittman 2024-11-14 13:33:27 -05:00 • committed by GitHub
parent 4de07697bd
commit d093dce0fb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
41 changed files with 323 additions and 313 deletions
Download patch file Download diff file Expand all files Collapse all files

4
integrations/tailwindcss-cli/tests/cli.test.js
View file

@ -262,7 +262,7 @@ describe('Build command', () => {
.btn-after {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.25rem;
@ -313,7 +313,7 @@ describe('Build command', () => {
.btn-after {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.25rem;

26
integrations/tailwindcss-cli/tests/integration.test.js
View file

@ -75,12 +75,12 @@ describe('static build', () => {
css`
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-600 {
--tw-bg-opacity: 1;
background-color: rgb(220 38 38 / var(--tw-bg-opacity));
background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.font-bold {
@ -128,7 +128,7 @@ describe('static build', () => {
css`
.bg-primary {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
`
)
@ -176,7 +176,7 @@ describe('static build', () => {
css`
.bg-primary {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
`
)
@ -224,7 +224,7 @@ describe('static build', () => {
css`
.bg-yellow {
--tw-bg-opacity: 1;
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
background-color: rgb(255 255 0 / var(--tw-bg-opacity, 1));
}
`
)
@ -279,7 +279,7 @@ describe('static build', () => {
css`
.bg-yellow {
--tw-bg-opacity: 1;
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
background-color: rgb(255 255 0 / var(--tw-bg-opacity, 1));
}
`
)
@ -313,7 +313,7 @@ describe('static build', () => {
css`
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
`
)
@ -356,7 +356,7 @@ describe('watcher', () => {
css`
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.font-bold {
font-weight: 700;
@ -405,7 +405,7 @@ describe('watcher', () => {
css`
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.font-bold {
font-weight: 700;
@ -594,7 +594,7 @@ describe('watcher', () => {
.btn {
border-radius: 0.25rem;
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.25rem;
@ -670,7 +670,7 @@ describe('watcher', () => {
css`
.bg-yellow {
--tw-bg-opacity: 1;
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
background-color: rgb(255 255 0 / var(--tw-bg-opacity, 1));
}
`
)
@ -690,7 +690,7 @@ describe('watcher', () => {
css`
.bg-yellow {
--tw-bg-opacity: 1;
background-color: rgb(255 255 119 / var(--tw-bg-opacity));
background-color: rgb(255 255 119 / var(--tw-bg-opacity, 1));
}
`
)
@ -722,7 +722,7 @@ describe('watcher', () => {
css`
.bg-yellow {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
`
)