Fix stacking context issue (tailwindlabs#4700)

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

* update tests

Author: RobinMalfait

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')

src/plugins/filter.js

@@ -27,6 +27,7 @@ export default function () {
       })
       addUtilities(
         {
+          '.filter': { filter: 'var(--tw-filter)' },
           '.filter-none': { filter: 'none' },
         },
         variants('filter')

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))',

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;
 }

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;
 }

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;
 }

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;
 }