Add ::backdrop to universal defaults (#8526)

* Add `::backdrop` to universal defaults

* Update changelog

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.js

@@ -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/collapse-adjacent-rules.test.css

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

tests/import-syntax.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/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

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

tests/kitchen-sink.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;

tests/kitchen-sink.test.js

@@ -69,7 +69,8 @@ test('it works', () => {
       }
       *,
       ::before,
-      ::after {
+      ::after,
+      ::backdrop {
         margin: 10px;
       }
     }
@@ -82,7 +83,8 @@ test('it works', () => {
       }
       *,
       ::before,
-      ::after {
+      ::after,
+      ::backdrop {
         padding: 5px;
       }
       .foo .bg-black {

tests/plugins/divide.test.js

@@ -10,7 +10,8 @@ it('should add the divide styles for divide-y and a default border color', () =>
     expect(result.css).toMatchCss(css`
       *,
       ::before,
-      ::after {
+      ::after,
+      ::backdrop {
         --tw-border-spacing-x: 0;
         --tw-border-spacing-y: 0;
         --tw-translate-x: 0;
@@ -76,7 +77,8 @@ it('should add the divide styles for divide-x and a default border color', () =>
     expect(result.css).toMatchCss(css`
       *,
       ::before,
-      ::after {
+      ::after,
+      ::backdrop {
         --tw-border-spacing-x: 0;
         --tw-border-spacing-y: 0;
         --tw-translate-x: 0;
@@ -142,7 +144,8 @@ it('should add the divide styles for divide-y-reverse and a default border color
     expect(result.css).toMatchCss(css`
       *,
       ::before,
-      ::after {
+      ::after,
+      ::backdrop {
         --tw-border-spacing-x: 0;
         --tw-border-spacing-y: 0;
         --tw-translate-x: 0;
@@ -206,7 +209,8 @@ it('should add the divide styles for divide-x-reverse and a default border color
     expect(result.css).toMatchCss(css`
       *,
       ::before,
-      ::after {
+      ::after,
+      ::backdrop {
         --tw-border-spacing-x: 0;
         --tw-border-spacing-y: 0;
         --tw-translate-x: 0;
@@ -270,7 +274,8 @@ it('should only inject the base styles once if we use divide and border at the s
     expect(result.css).toMatchCss(css`
       *,
       ::before,
-      ::after {
+      ::after,
+      ::backdrop {
         --tw-border-spacing-x: 0;
         --tw-border-spacing-y: 0;
         --tw-translate-x: 0;

tests/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/resolve-defaults-at-rules.test.js

@@ -16,7 +16,8 @@ test('basic utilities', async () => {
     expect(result.css).toMatchFormattedCss(css`
       *,
       ::before,
-      ::after {
+      ::after,
+      ::backdrop {
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;
@@ -67,7 +68,8 @@ test('with pseudo-class variants', async () => {
     expect(result.css).toMatchFormattedCss(css`
       *,
       ::before,
-      ::after {
+      ::after,
+      ::backdrop {
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;
@@ -116,7 +118,8 @@ test('with pseudo-element variants', async () => {
     expect(result.css).toMatchFormattedCss(css`
       *,
       ::before,
-      ::after {
+      ::after,
+      ::backdrop {
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;
@@ -161,7 +164,8 @@ test('with multi-class variants', async () => {
     expect(result.css).toMatchFormattedCss(css`
       *,
       ::before,
-      ::after {
+      ::after,
+      ::backdrop {
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;
@@ -206,7 +210,8 @@ test('with multi-class pseudo-element variants', async () => {
     expect(result.css).toMatchFormattedCss(css`
       *,
       ::before,
-      ::after {
+      ::after,
+      ::backdrop {
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;
@@ -257,7 +262,8 @@ test('with multi-class pseudo-element and pseudo-class variants', async () => {
     expect(result.css).toMatchFormattedCss(css`
       *,
       ::before,
-      ::after {
+      ::after,
+      ::backdrop {
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;
@@ -344,7 +350,8 @@ test('with apply', async () => {
     expect(result.css).toMatchFormattedCss(css`
       *,
       ::before,
-      ::after {
+      ::after,
+      ::backdrop {
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;
@@ -540,7 +547,8 @@ test('with shadows', async () => {
     expect(result.css).toMatchFormattedCss(css`
       *,
       ::before,
-      ::after {
+      ::after,
+      ::backdrop {
         --tw-ring-inset: ;
         --tw-ring-offset-width: 0px;
         --tw-ring-offset-color: #fff;
@@ -598,7 +606,8 @@ test('when no utilities that need the defaults are used', async () => {
     expect(result.css).toMatchFormattedCss(css`
       *,
       ::before,
-      ::after {
+      ::after,
+      ::backdrop {
         --tw-translate-x: 0;
         --tw-translate-y: 0;
         --tw-rotate: 0;

tests/util/defaults.js

@@ -9,7 +9,8 @@ export function defaults({ defaultRingColor = `rgb(59 130 246 / 0.5)` } = {}) {
   return css`
     *,
     ::before,
-    ::after {
+    ::after,
+    ::backdrop {
       --tw-border-spacing-x: 0;
       --tw-border-spacing-y: 0;
       --tw-translate-x: 0;

tests/variants.test.css

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