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]>
tailwindlabs · Nov 14, 2024 · d093dce · d093dce
1 parent 4de0769
commit d093dce
Show file tree

Hide file tree

Showing 41 changed files with 323 additions and 313 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Bump versions for security vulnerabilities ([#14697](https://github.com/tailwindlabs/tailwindcss/pull/14697))
 - Ensure the TypeScript types for the `boxShadow` theme configuration allows arrays ([#14856](https://github.com/tailwindlabs/tailwindcss/pull/14856))
+- 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))
 
 ## [3.4.14] - 2024-10-15
 

diff --git a/integrations/parcel/tests/integration.test.js b/integrations/parcel/tests/integration.test.js
@@ -74,7 +74,7 @@ describe('static build', () => {
     expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(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));
       }
     `)
   })
@@ -124,7 +124,7 @@ describe('static build', () => {
     expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(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));
       }
     `)
   })
@@ -170,7 +170,7 @@ describe('watcher', () => {
     expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(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;
@@ -218,7 +218,7 @@ describe('watcher', () => {
     expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(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;
@@ -361,7 +361,7 @@ describe('watcher', () => {
     expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(css`
       .btn {
         --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));
         border-radius: 0.25rem;
         padding: 0.25rem 0.5rem;
       }

diff --git a/integrations/postcss-cli/tests/integration.test.js b/integrations/postcss-cli/tests/integration.test.js
@@ -64,7 +64,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;
@@ -113,7 +113,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;
@@ -252,7 +252,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;

diff --git a/integrations/rollup-sass/tests/integration.test.js b/integrations/rollup-sass/tests/integration.test.js
@@ -64,7 +64,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;
@@ -113,7 +113,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;
@@ -249,7 +249,7 @@ describe('watcher', () => {
       css`
         .btn {
           --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));
           border-radius: 0.25rem;
           padding: 0.25rem 0.5rem;
         }
@@ -329,7 +329,7 @@ describe('watcher', () => {
       css`
         .btn {
           --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));
           border-radius: 0.25rem;
           padding: 0.25rem 0.5rem;
         }

diff --git a/integrations/rollup/tests/integration.test.js b/integrations/rollup/tests/integration.test.js
@@ -65,7 +65,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));
         }
       `
     )
@@ -111,7 +111,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));
         }
       `
     )
@@ -154,7 +154,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;
@@ -203,7 +203,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;
@@ -340,7 +340,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;

diff --git a/integrations/tailwindcss-cli/tests/cli.test.js b/integrations/tailwindcss-cli/tests/cli.test.js
@@ -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;

diff --git a/integrations/tailwindcss-cli/tests/integration.test.js b/integrations/tailwindcss-cli/tests/integration.test.js
@@ -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));
         }
       `
     )

diff --git a/integrations/vite/tests/integration.test.js b/integrations/vite/tests/integration.test.js
@@ -78,7 +78,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));
         }
       `
     )
@@ -122,7 +122,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));
         }
       `
     )
@@ -173,7 +173,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;
@@ -226,7 +226,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;
@@ -379,7 +379,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;

diff --git a/integrations/webpack-4/tests/integration.test.js b/integrations/webpack-4/tests/integration.test.js
@@ -61,7 +61,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));
         }
       `
     )
@@ -105,7 +105,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));
         }
       `
     )
@@ -151,7 +151,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;
@@ -203,7 +203,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;
@@ -345,7 +345,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;