Skip to content

Commit d093dce

Browse files
thecrypticaceadamwathan
thecrypticace
and
adamwathan
authored
Add variable fallback to fix Chrome issue (#15003)
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 <[email protected]>
1 parent 4de0769 commit d093dce

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+323
-313
lines changed

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1111

1212
- Bump versions for security vulnerabilities ([#14697](https://github.com/tailwindlabs/tailwindcss/pull/14697))
1313
- Ensure the TypeScript types for the `boxShadow` theme configuration allows arrays ([#14856](https://github.com/tailwindlabs/tailwindcss/pull/14856))
14+
- Set fallback for opacity variables to ensure setting colors with the `selection:*` variant works in Chrome 131 ([#15003](https://github.com/tailwindlabs/tailwindcss/pull/15003))
1415

1516
## [3.4.14] - 2024-10-15
1617

‎integrations/parcel/tests/integration.test.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ describe('static build', () => {
7474
expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(css`
7575
.bg-primary {
7676
--tw-bg-opacity: 1;
77-
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
77+
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
7878
}
7979
`)
8080
})
@@ -124,7 +124,7 @@ describe('static build', () => {
124124
expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(css`
125125
.bg-primary {
126126
--tw-bg-opacity: 1;
127-
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
127+
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
128128
}
129129
`)
130130
})
@@ -170,7 +170,7 @@ describe('watcher', () => {
170170
expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(css`
171171
.bg-red-500 {
172172
--tw-bg-opacity: 1;
173-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
173+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
174174
}
175175
.font-bold {
176176
font-weight: 700;
@@ -218,7 +218,7 @@ describe('watcher', () => {
218218
expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(css`
219219
.bg-red-500 {
220220
--tw-bg-opacity: 1;
221-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
221+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
222222
}
223223
.font-bold {
224224
font-weight: 700;
@@ -361,7 +361,7 @@ describe('watcher', () => {
361361
expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(css`
362362
.btn {
363363
--tw-bg-opacity: 1;
364-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
364+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
365365
border-radius: 0.25rem;
366366
padding: 0.25rem 0.5rem;
367367
}

‎integrations/postcss-cli/tests/integration.test.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ describe('watcher', () => {
6464
css`
6565
.bg-red-500 {
6666
--tw-bg-opacity: 1;
67-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
67+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
6868
}
6969
.font-bold {
7070
font-weight: 700;
@@ -113,7 +113,7 @@ describe('watcher', () => {
113113
css`
114114
.bg-red-500 {
115115
--tw-bg-opacity: 1;
116-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
116+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
117117
}
118118
.font-bold {
119119
font-weight: 700;
@@ -252,7 +252,7 @@ describe('watcher', () => {
252252
.btn {
253253
border-radius: 0.25rem;
254254
--tw-bg-opacity: 1;
255-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
255+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
256256
padding-left: 0.5rem;
257257
padding-right: 0.5rem;
258258
padding-top: 0.25rem;

‎integrations/rollup-sass/tests/integration.test.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ describe('watcher', () => {
6464
css`
6565
.bg-red-500 {
6666
--tw-bg-opacity: 1;
67-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
67+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
6868
}
6969
.font-bold {
7070
font-weight: 700;
@@ -113,7 +113,7 @@ describe('watcher', () => {
113113
css`
114114
.bg-red-500 {
115115
--tw-bg-opacity: 1;
116-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
116+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
117117
}
118118
.font-bold {
119119
font-weight: 700;
@@ -249,7 +249,7 @@ describe('watcher', () => {
249249
css`
250250
.btn {
251251
--tw-bg-opacity: 1;
252-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
252+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
253253
border-radius: 0.25rem;
254254
padding: 0.25rem 0.5rem;
255255
}
@@ -329,7 +329,7 @@ describe('watcher', () => {
329329
css`
330330
.btn {
331331
--tw-bg-opacity: 1;
332-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
332+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
333333
border-radius: 0.25rem;
334334
padding: 0.25rem 0.5rem;
335335
}

‎integrations/rollup/tests/integration.test.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ describe('static build', () => {
6565
css`
6666
.bg-primary {
6767
--tw-bg-opacity: 1;
68-
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
68+
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
6969
}
7070
`
7171
)
@@ -111,7 +111,7 @@ describe('static build', () => {
111111
css`
112112
.bg-primary {
113113
--tw-bg-opacity: 1;
114-
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
114+
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
115115
}
116116
`
117117
)
@@ -154,7 +154,7 @@ describe('watcher', () => {
154154
css`
155155
.bg-red-500 {
156156
--tw-bg-opacity: 1;
157-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
157+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
158158
}
159159
.font-bold {
160160
font-weight: 700;
@@ -203,7 +203,7 @@ describe('watcher', () => {
203203
css`
204204
.bg-red-500 {
205205
--tw-bg-opacity: 1;
206-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
206+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
207207
}
208208
.font-bold {
209209
font-weight: 700;
@@ -340,7 +340,7 @@ describe('watcher', () => {
340340
.btn {
341341
border-radius: 0.25rem;
342342
--tw-bg-opacity: 1;
343-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
343+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
344344
padding-left: 0.5rem;
345345
padding-right: 0.5rem;
346346
padding-top: 0.25rem;

‎integrations/tailwindcss-cli/tests/cli.test.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,7 @@ describe('Build command', () => {
262262
263263
.btn-after {
264264
--tw-bg-opacity: 1;
265-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
265+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
266266
padding-left: 0.5rem;
267267
padding-right: 0.5rem;
268268
padding-top: 0.25rem;
@@ -313,7 +313,7 @@ describe('Build command', () => {
313313
314314
.btn-after {
315315
--tw-bg-opacity: 1;
316-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
316+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
317317
padding-left: 0.5rem;
318318
padding-right: 0.5rem;
319319
padding-top: 0.25rem;

‎integrations/tailwindcss-cli/tests/integration.test.js

+13-13
Original file line numberDiff line numberDiff line change
@@ -75,12 +75,12 @@ describe('static build', () => {
7575
css`
7676
.bg-red-500 {
7777
--tw-bg-opacity: 1;
78-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
78+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
7979
}
8080
8181
.bg-red-600 {
8282
--tw-bg-opacity: 1;
83-
background-color: rgb(220 38 38 / var(--tw-bg-opacity));
83+
background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
8484
}
8585
8686
.font-bold {
@@ -128,7 +128,7 @@ describe('static build', () => {
128128
css`
129129
.bg-primary {
130130
--tw-bg-opacity: 1;
131-
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
131+
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
132132
}
133133
`
134134
)
@@ -176,7 +176,7 @@ describe('static build', () => {
176176
css`
177177
.bg-primary {
178178
--tw-bg-opacity: 1;
179-
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
179+
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
180180
}
181181
`
182182
)
@@ -224,7 +224,7 @@ describe('static build', () => {
224224
css`
225225
.bg-yellow {
226226
--tw-bg-opacity: 1;
227-
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
227+
background-color: rgb(255 255 0 / var(--tw-bg-opacity, 1));
228228
}
229229
`
230230
)
@@ -279,7 +279,7 @@ describe('static build', () => {
279279
css`
280280
.bg-yellow {
281281
--tw-bg-opacity: 1;
282-
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
282+
background-color: rgb(255 255 0 / var(--tw-bg-opacity, 1));
283283
}
284284
`
285285
)
@@ -313,7 +313,7 @@ describe('static build', () => {
313313
css`
314314
.bg-red-500 {
315315
--tw-bg-opacity: 1;
316-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
316+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
317317
}
318318
`
319319
)
@@ -356,7 +356,7 @@ describe('watcher', () => {
356356
css`
357357
.bg-red-500 {
358358
--tw-bg-opacity: 1;
359-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
359+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
360360
}
361361
.font-bold {
362362
font-weight: 700;
@@ -405,7 +405,7 @@ describe('watcher', () => {
405405
css`
406406
.bg-red-500 {
407407
--tw-bg-opacity: 1;
408-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
408+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
409409
}
410410
.font-bold {
411411
font-weight: 700;
@@ -594,7 +594,7 @@ describe('watcher', () => {
594594
.btn {
595595
border-radius: 0.25rem;
596596
--tw-bg-opacity: 1;
597-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
597+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
598598
padding-left: 0.5rem;
599599
padding-right: 0.5rem;
600600
padding-top: 0.25rem;
@@ -670,7 +670,7 @@ describe('watcher', () => {
670670
css`
671671
.bg-yellow {
672672
--tw-bg-opacity: 1;
673-
background-color: rgb(255 255 0 / var(--tw-bg-opacity));
673+
background-color: rgb(255 255 0 / var(--tw-bg-opacity, 1));
674674
}
675675
`
676676
)
@@ -690,7 +690,7 @@ describe('watcher', () => {
690690
css`
691691
.bg-yellow {
692692
--tw-bg-opacity: 1;
693-
background-color: rgb(255 255 119 / var(--tw-bg-opacity));
693+
background-color: rgb(255 255 119 / var(--tw-bg-opacity, 1));
694694
}
695695
`
696696
)
@@ -722,7 +722,7 @@ describe('watcher', () => {
722722
css`
723723
.bg-yellow {
724724
--tw-bg-opacity: 1;
725-
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
725+
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
726726
}
727727
`
728728
)

‎integrations/vite/tests/integration.test.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ describe('static build', () => {
7878
css`
7979
.bg-primary {
8080
--tw-bg-opacity: 1;
81-
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
81+
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
8282
}
8383
`
8484
)
@@ -122,7 +122,7 @@ describe('static build', () => {
122122
css`
123123
.bg-primary {
124124
--tw-bg-opacity: 1;
125-
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
125+
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
126126
}
127127
`
128128
)
@@ -173,7 +173,7 @@ describe('watcher', () => {
173173
css`
174174
.bg-red-500 {
175175
--tw-bg-opacity: 1;
176-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
176+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
177177
}
178178
.font-bold {
179179
font-weight: 700;
@@ -226,7 +226,7 @@ describe('watcher', () => {
226226
css`
227227
.bg-red-500 {
228228
--tw-bg-opacity: 1;
229-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
229+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
230230
}
231231
.font-bold {
232232
font-weight: 700;
@@ -379,7 +379,7 @@ describe('watcher', () => {
379379
.btn {
380380
border-radius: 0.25rem;
381381
--tw-bg-opacity: 1;
382-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
382+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
383383
padding-left: 0.5rem;
384384
padding-right: 0.5rem;
385385
padding-top: 0.25rem;

‎integrations/webpack-4/tests/integration.test.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ describe('static build', () => {
6161
css`
6262
.bg-primary {
6363
--tw-bg-opacity: 1;
64-
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
64+
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
6565
}
6666
`
6767
)
@@ -105,7 +105,7 @@ describe('static build', () => {
105105
css`
106106
.bg-primary {
107107
--tw-bg-opacity: 1;
108-
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
108+
background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
109109
}
110110
`
111111
)
@@ -151,7 +151,7 @@ describe('watcher', () => {
151151
css`
152152
.bg-red-500 {
153153
--tw-bg-opacity: 1;
154-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
154+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
155155
}
156156
.font-bold {
157157
font-weight: 700;
@@ -203,7 +203,7 @@ describe('watcher', () => {
203203
css`
204204
.bg-red-500 {
205205
--tw-bg-opacity: 1;
206-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
206+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
207207
}
208208
.font-bold {
209209
font-weight: 700;
@@ -345,7 +345,7 @@ describe('watcher', () => {
345345
.btn {
346346
border-radius: 0.25rem;
347347
--tw-bg-opacity: 1;
348-
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
348+
background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
349349
padding-left: 0.5rem;
350350
padding-right: 0.5rem;
351351
padding-top: 0.25rem;

0 commit comments

Comments
 (0)