Skip to content

Commit 4f40076

Browse files
adamwathanadamwathan
authored
Add ::backdrop to universal defaults (#8526)
* Add `::backdrop` to universal defaults * Update changelog
1 parent 14f6574 commit 4f40076

16 files changed

+162
-72
lines changed

‎CHANGELOG.md

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

‎src/lib/resolveDefaultsAtRules.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ export default function resolveDefaultsAtRules({ tailwindConfig }) {
134134
source: universal.source,
135135
})
136136

137-
universalRule.selectors = ['*', '::before', '::after']
137+
universalRule.selectors = ['*', '::before', '::after', '::backdrop']
138138

139139
universalRule.append(universal.nodes)
140140
universal.before(universalRule)

‎tests/basic-usage.test.css

+91-37
Large diffs are not rendered by default.

‎tests/basic-usage.test.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,8 @@ test('default ring color can be a function', () => {
151151
expect(result.css).toMatchFormattedCss(css`
152152
*,
153153
::before,
154-
::after {
154+
::after,
155+
::backdrop {
155156
--tw-border-spacing-x: 0;
156157
--tw-border-spacing-y: 0;
157158
--tw-translate-x: 0;

‎tests/collapse-adjacent-rules.test.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
}
1010
*,
1111
::before,
12-
::after {
12+
::after,
13+
::backdrop {
1314
--tw-border-spacing-x: 0;
1415
--tw-border-spacing-y: 0;
1516
--tw-translate-x: 0;

‎tests/import-syntax.test.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ h1 {
33
}
44
*,
55
::before,
6-
::after {
6+
::after,
7+
::backdrop {
78
--tw-border-spacing-x: 0;
89
--tw-border-spacing-y: 0;
910
--tw-translate-x: 0;

‎tests/important-boolean.test.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
*,
22
::before,
3-
::after {
3+
::after,
4+
::backdrop {
45
--tw-border-spacing-x: 0;
56
--tw-border-spacing-y: 0;
67
--tw-translate-x: 0;

‎tests/important-modifier-prefix.test.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
*,
22
::before,
3-
::after {
3+
::after,
4+
::backdrop {
45
--tw-border-spacing-x: 0;
56
--tw-border-spacing-y: 0;
67
--tw-translate-x: 0;

‎tests/important-selector.test.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
*,
22
::before,
3-
::after {
3+
::after,
4+
::backdrop {
45
--tw-border-spacing-x: 0;
56
--tw-border-spacing-y: 0;
67
--tw-translate-x: 0;

‎tests/kitchen-sink.test.css

+19-8
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,8 @@ div {
138138
}
139139
*,
140140
::before,
141-
::after {
141+
::after,
142+
::backdrop {
142143
--tw-border-spacing-x: 0;
143144
--tw-border-spacing-y: 0;
144145
--tw-translate-x: 0;
@@ -215,14 +216,16 @@ div {
215216
.test-apply-font-variant {
216217
--tw-ordinal: ordinal;
217218
--tw-numeric-spacing: tabular-nums;
218-
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
219+
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
220+
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
219221
}
220222
.custom-component {
221223
background: #123456;
222224
}
223225
*,
224226
::before,
225-
::after {
227+
::after,
228+
::backdrop {
226229
padding: 5px;
227230
}
228231
.foo .bg-black {
@@ -234,10 +237,14 @@ div {
234237
.scale-50 {
235238
--tw-scale-x: 0.5;
236239
--tw-scale-y: 0.5;
237-
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));
240+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
241+
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
242+
scaleY(var(--tw-scale-y));
238243
}
239244
.transform {
240-
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));
245+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
246+
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
247+
scaleY(var(--tw-scale-y));
241248
}
242249
.grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
243250
grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
@@ -293,7 +300,8 @@ div {
293300
}
294301
*,
295302
::before,
296-
::after {
303+
::after,
304+
::backdrop {
297305
margin: 10px;
298306
}
299307
.first\:pt-0:first-child {
@@ -330,7 +338,9 @@ div {
330338
.hover\:scale-75:hover {
331339
--tw-scale-x: 0.75;
332340
--tw-scale-y: 0.75;
333-
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));
341+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
342+
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
343+
scaleY(var(--tw-scale-y));
334344
}
335345
.hover\:font-bold:hover {
336346
font-weight: 700;
@@ -436,7 +446,8 @@ div {
436446
}
437447
.sm\:tabular-nums {
438448
--tw-numeric-spacing: tabular-nums;
439-
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
449+
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
450+
var(--tw-numeric-spacing) var(--tw-numeric-fraction);
440451
}
441452
.sm\:custom-util {
442453
background: #abcdef;

‎tests/kitchen-sink.test.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,8 @@ test('it works', () => {
6969
}
7070
*,
7171
::before,
72-
::after {
72+
::after,
73+
::backdrop {
7374
margin: 10px;
7475
}
7576
}
@@ -82,7 +83,8 @@ test('it works', () => {
8283
}
8384
*,
8485
::before,
85-
::after {
86+
::after,
87+
::backdrop {
8688
padding: 5px;
8789
}
8890
.foo .bg-black {

‎tests/plugins/divide.test.js

+10-5
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ it('should add the divide styles for divide-y and a default border color', () =>
1010
expect(result.css).toMatchCss(css`
1111
*,
1212
::before,
13-
::after {
13+
::after,
14+
::backdrop {
1415
--tw-border-spacing-x: 0;
1516
--tw-border-spacing-y: 0;
1617
--tw-translate-x: 0;
@@ -76,7 +77,8 @@ it('should add the divide styles for divide-x and a default border color', () =>
7677
expect(result.css).toMatchCss(css`
7778
*,
7879
::before,
79-
::after {
80+
::after,
81+
::backdrop {
8082
--tw-border-spacing-x: 0;
8183
--tw-border-spacing-y: 0;
8284
--tw-translate-x: 0;
@@ -142,7 +144,8 @@ it('should add the divide styles for divide-y-reverse and a default border color
142144
expect(result.css).toMatchCss(css`
143145
*,
144146
::before,
145-
::after {
147+
::after,
148+
::backdrop {
146149
--tw-border-spacing-x: 0;
147150
--tw-border-spacing-y: 0;
148151
--tw-translate-x: 0;
@@ -206,7 +209,8 @@ it('should add the divide styles for divide-x-reverse and a default border color
206209
expect(result.css).toMatchCss(css`
207210
*,
208211
::before,
209-
::after {
212+
::after,
213+
::backdrop {
210214
--tw-border-spacing-x: 0;
211215
--tw-border-spacing-y: 0;
212216
--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
270274
expect(result.css).toMatchCss(css`
271275
*,
272276
::before,
273-
::after {
277+
::after,
278+
::backdrop {
274279
--tw-border-spacing-x: 0;
275280
--tw-border-spacing-y: 0;
276281
--tw-translate-x: 0;

‎tests/prefix.test.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
*,
22
::before,
3-
::after {
3+
::after,
4+
::backdrop {
45
--tw-border-spacing-x: 0;
56
--tw-border-spacing-y: 0;
67
--tw-translate-x: 0;

‎tests/resolve-defaults-at-rules.test.js

+18-9
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ test('basic utilities', async () => {
1616
expect(result.css).toMatchFormattedCss(css`
1717
*,
1818
::before,
19-
::after {
19+
::after,
20+
::backdrop {
2021
--tw-translate-x: 0;
2122
--tw-translate-y: 0;
2223
--tw-rotate: 0;
@@ -67,7 +68,8 @@ test('with pseudo-class variants', async () => {
6768
expect(result.css).toMatchFormattedCss(css`
6869
*,
6970
::before,
70-
::after {
71+
::after,
72+
::backdrop {
7173
--tw-translate-x: 0;
7274
--tw-translate-y: 0;
7375
--tw-rotate: 0;
@@ -116,7 +118,8 @@ test('with pseudo-element variants', async () => {
116118
expect(result.css).toMatchFormattedCss(css`
117119
*,
118120
::before,
119-
::after {
121+
::after,
122+
::backdrop {
120123
--tw-translate-x: 0;
121124
--tw-translate-y: 0;
122125
--tw-rotate: 0;
@@ -161,7 +164,8 @@ test('with multi-class variants', async () => {
161164
expect(result.css).toMatchFormattedCss(css`
162165
*,
163166
::before,
164-
::after {
167+
::after,
168+
::backdrop {
165169
--tw-translate-x: 0;
166170
--tw-translate-y: 0;
167171
--tw-rotate: 0;
@@ -206,7 +210,8 @@ test('with multi-class pseudo-element variants', async () => {
206210
expect(result.css).toMatchFormattedCss(css`
207211
*,
208212
::before,
209-
::after {
213+
::after,
214+
::backdrop {
210215
--tw-translate-x: 0;
211216
--tw-translate-y: 0;
212217
--tw-rotate: 0;
@@ -257,7 +262,8 @@ test('with multi-class pseudo-element and pseudo-class variants', async () => {
257262
expect(result.css).toMatchFormattedCss(css`
258263
*,
259264
::before,
260-
::after {
265+
::after,
266+
::backdrop {
261267
--tw-translate-x: 0;
262268
--tw-translate-y: 0;
263269
--tw-rotate: 0;
@@ -344,7 +350,8 @@ test('with apply', async () => {
344350
expect(result.css).toMatchFormattedCss(css`
345351
*,
346352
::before,
347-
::after {
353+
::after,
354+
::backdrop {
348355
--tw-translate-x: 0;
349356
--tw-translate-y: 0;
350357
--tw-rotate: 0;
@@ -540,7 +547,8 @@ test('with shadows', async () => {
540547
expect(result.css).toMatchFormattedCss(css`
541548
*,
542549
::before,
543-
::after {
550+
::after,
551+
::backdrop {
544552
--tw-ring-inset: ;
545553
--tw-ring-offset-width: 0px;
546554
--tw-ring-offset-color: #fff;
@@ -598,7 +606,8 @@ test('when no utilities that need the defaults are used', async () => {
598606
expect(result.css).toMatchFormattedCss(css`
599607
*,
600608
::before,
601-
::after {
609+
::after,
610+
::backdrop {
602611
--tw-translate-x: 0;
603612
--tw-translate-y: 0;
604613
--tw-rotate: 0;

‎tests/util/defaults.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ export function defaults({ defaultRingColor = `rgb(59 130 246 / 0.5)` } = {}) {
99
return css`
1010
*,
1111
::before,
12-
::after {
12+
::after,
13+
::backdrop {
1314
--tw-border-spacing-x: 0;
1415
--tw-border-spacing-y: 0;
1516
--tw-translate-x: 0;

‎tests/variants.test.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
*,
22
::before,
3-
::after {
3+
::after,
4+
::backdrop {
45
--tw-border-spacing-x: 0;
56
--tw-border-spacing-y: 0;
67
--tw-translate-x: 0;

0 commit comments

Comments
 (0)