Add ::backdrop to universal defaults (#8526)

* Add `::backdrop` to universal defaults

* Update changelog

Author: adamwathan

CHANGELOG.md

@@ -44,7 +44,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add new `border-spacing` utilities ([#7102](https://github.com/tailwindlabs/tailwindcss/pull/7102))
 - Add `enabled` variant ([#7905](https://github.com/tailwindlabs/tailwindcss/pull/7905))
 - Add TypeScript types for the `tailwind.config.js` file ([#7891](https://github.com/tailwindlabs/tailwindcss/pull/7891))
-- Add `backdrop` variant ([#7924](https://github.com/tailwindlabs/tailwindcss/pull/7924))
+- Add `backdrop` variant ([#7924](https://github.com/tailwindlabs/tailwindcss/pull/7924), [#8526](https://github.com/tailwindlabs/tailwindcss/pull/8526))
 - Add `grid-flow-dense` utility ([#8193](https://github.com/tailwindlabs/tailwindcss/pull/8193))
 - Add `mix-blend-plus-lighter` utility ([#8288](https://github.com/tailwindlabs/tailwindcss/pull/8288))
 - Add arbitrary variants ([#8299](https://github.com/tailwindlabs/tailwindcss/pull/8299))

src/lib/resolveDefaultsAtRules.js

@@ -134,7 +134,7 @@ export default function resolveDefaultsAtRules({ tailwindConfig }) {
           source: universal.source,
         })
 
-        universalRule.selectors = ['*', '::before', '::after']
+        universalRule.selectors = ['*', '::before', '::after', '::backdrop']
 
         universalRule.append(universal.nodes)
         universal.before(universalRule)

tests/basic-usage.test.css

@@ -151,7 +151,8 @@ test('default ring color can be a function', () => {
     expect(result.css).toMatchFormattedCss(css`
       *,
       ::before,
-      ::after {
+      ::after,
+      ::backdrop {
         --tw-border-spacing-x: 0;
         --tw-border-spacing-y: 0;
         --tw-translate-x: 0;

tests/basic-usage.test.js

@@ -9,7 +9,8 @@
 }
 *,
 ::before,
-::after {
+::after,
+::backdrop {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;

tests/collapse-adjacent-rules.test.css

@@ -3,7 +3,8 @@ h1 {
 }
 *,
 ::before,
-::after {
+::after,
+::backdrop {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;

tests/import-syntax.test.css

@@ -1,6 +1,7 @@
 *,
 ::before,
-::after {
+::after,
+::backdrop {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;

tests/important-boolean.test.css

@@ -1,6 +1,7 @@
 *,
 ::before,
-::after {
+::after,
+::backdrop {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;

tests/important-modifier-prefix.test.css

@@ -1,6 +1,7 @@
 *,
 ::before,
-::after {
+::after,
+::backdrop {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;

tests/important-selector.test.css

@@ -138,7 +138,8 @@ div {
 }
 *,
 ::before,
-::after {
+::after,
+::backdrop {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -215,14 +216,16 @@ div {
 .test-apply-font-variant {
   --tw-ordinal: ordinal;
   --tw-numeric-spacing: tabular-nums;
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
+    var(--tw-numeric-spacing) var(--tw-numeric-fraction);
 }
 .custom-component {
   background: #123456;
 }
 *,
 ::before,
-::after {
+::after,
+::backdrop {
   padding: 5px;
 }
 .foo .bg-black {
@@ -234,10 +237,14 @@ div {
 .scale-50 {
   --tw-scale-x: 0.5;
   --tw-scale-y: 0.5;
-  transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
+    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
+    scaleY(var(--tw-scale-y));
 }
 .transform {
-  transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
+    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
+    scaleY(var(--tw-scale-y));
 }
 .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;
@@ -293,7 +300,8 @@ div {
 }
 *,
 ::before,
-::after {
+::after,
+::backdrop {
   margin: 10px;
 }
 .first\:pt-0:first-child {
@@ -330,7 +338,9 @@ div {
 .hover\:scale-75:hover {
   --tw-scale-x: 0.75;
   --tw-scale-y: 0.75;
-  transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
+    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
+    scaleY(var(--tw-scale-y));
 }
 .hover\:font-bold:hover {
   font-weight: 700;
@@ -436,7 +446,8 @@ div {
   }
   .sm\:tabular-nums {
     --tw-numeric-spacing: tabular-nums;
-    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
+      var(--tw-numeric-spacing) var(--tw-numeric-fraction);
   }
   .sm\:custom-util {
     background: #abcdef;