From f6e36c2847cda472f3d5f539edf26625bc29448b Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 18 Jun 2021 16:31:14 +0200
Subject: [PATCH] Fix stacking context issue (#4700)

* add no-op transform, filter, backdrop-filter utilities

* update tests
---
 src/plugins/backdropFilter.js           | 1 +
 src/plugins/filter.js                   | 1 +
 src/plugins/transform.js                | 3 +++
 tests/jit/basic-usage.test.css          | 9 +++++++++
 tests/jit/kitchen-sink.test.css         | 3 +++
 tests/jit/raw-content.test.css          | 9 +++++++++
 tests/jit/relative-purge-paths.test.css | 9 +++++++++
 7 files changed, 35 insertions(+)

diff --git a/src/plugins/backdropFilter.js b/src/plugins/backdropFilter.js
index a0f85df39b48..a02f19a140ac 100644
--- a/src/plugins/backdropFilter.js
+++ b/src/plugins/backdropFilter.js
@@ -27,6 +27,7 @@ export default function () {
       })
       addUtilities(
         {
+          '.backdrop-filter': { 'backdrop-filter': 'var(--tw-backdrop-filter)' },
           '.backdrop-filter-none': { 'backdrop-filter': 'none' },
         },
         variants('backdropFilter')
diff --git a/src/plugins/filter.js b/src/plugins/filter.js
index d7904fd1356c..017e5d560b11 100644
--- a/src/plugins/filter.js
+++ b/src/plugins/filter.js
@@ -27,6 +27,7 @@ export default function () {
       })
       addUtilities(
         {
+          '.filter': { filter: 'var(--tw-filter)' },
           '.filter-none': { filter: 'none' },
         },
         variants('filter')
diff --git a/src/plugins/transform.js b/src/plugins/transform.js
index d9feb149c142..0cd2c46b56b8 100644
--- a/src/plugins/transform.js
+++ b/src/plugins/transform.js
@@ -23,6 +23,9 @@ export default function () {
       })
       addUtilities(
         {
+          '.transform': {
+            transform: 'var(--tw-transform)',
+          },
           '.transform-cpu': {
             '--tw-transform': [
               'translateX(var(--tw-translate-x))',
diff --git a/tests/jit/basic-usage.test.css b/tests/jit/basic-usage.test.css
index 1f0ea66f772e..e4ceeffd38cd 100644
--- a/tests/jit/basic-usage.test.css
+++ b/tests/jit/basic-usage.test.css
@@ -265,6 +265,9 @@
   --tw-scale-y: 0.95;
   transform: var(--tw-transform);
 }
+.transform {
+  transform: var(--tw-transform);
+}
 .transform-gpu {
   --tw-transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)
     rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
@@ -733,6 +736,9 @@
   --tw-sepia: sepia(100%);
   filter: var(--tw-filter);
 }
+.filter {
+  filter: var(--tw-filter);
+}
 .filter-none {
   filter: none;
 }
@@ -772,6 +778,9 @@
   --tw-backdrop-sepia: sepia(100%);
   backdrop-filter: var(--tw-backdrop-filter);
 }
+.backdrop-filter {
+  backdrop-filter: var(--tw-backdrop-filter);
+}
 .backdrop-filter-none {
   backdrop-filter: none;
 }
diff --git a/tests/jit/kitchen-sink.test.css b/tests/jit/kitchen-sink.test.css
index 29b7610b37f8..38f26fcdd515 100644
--- a/tests/jit/kitchen-sink.test.css
+++ b/tests/jit/kitchen-sink.test.css
@@ -303,6 +303,9 @@ div {
   --tw-scale-y: 0.5;
   transform: var(--tw-transform);
 }
+.transform {
+  transform: var(--tw-transform);
+}
 .grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
   grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
 }
diff --git a/tests/jit/raw-content.test.css b/tests/jit/raw-content.test.css
index 7558ed492d16..771694661428 100644
--- a/tests/jit/raw-content.test.css
+++ b/tests/jit/raw-content.test.css
@@ -218,6 +218,9 @@
   --tw-scale-y: 0.95;
   transform: var(--tw-transform);
 }
+.transform {
+  transform: var(--tw-transform);
+}
 .transform-gpu {
   --tw-transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)
     rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
@@ -664,6 +667,9 @@
   --tw-sepia: sepia(100%);
   filter: var(--tw-filter);
 }
+.filter {
+  filter: var(--tw-filter);
+}
 .filter-none {
   filter: none;
 }
@@ -703,6 +709,9 @@
   --tw-backdrop-sepia: sepia(100%);
   backdrop-filter: var(--tw-backdrop-filter);
 }
+.backdrop-filter {
+  backdrop-filter: var(--tw-backdrop-filter);
+}
 .backdrop-filter-none {
   backdrop-filter: none;
 }
diff --git a/tests/jit/relative-purge-paths.test.css b/tests/jit/relative-purge-paths.test.css
index 00acb8255323..d73226c6094a 100644
--- a/tests/jit/relative-purge-paths.test.css
+++ b/tests/jit/relative-purge-paths.test.css
@@ -265,6 +265,9 @@
   --tw-scale-y: 0.95;
   transform: var(--tw-transform);
 }
+.transform {
+  transform: var(--tw-transform);
+}
 .transform-gpu {
   --tw-transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)
     rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
@@ -711,6 +714,9 @@
   --tw-sepia: sepia(100%);
   filter: var(--tw-filter);
 }
+.filter {
+  filter: var(--tw-filter);
+}
 .filter-none {
   filter: none;
 }
@@ -750,6 +756,9 @@
   --tw-backdrop-sepia: sepia(100%);
   backdrop-filter: var(--tw-backdrop-filter);
 }
+.backdrop-filter {
+  backdrop-filter: var(--tw-backdrop-filter);
+}
 .backdrop-filter-none {
   backdrop-filter: none;
 }