Skip to content

Commit 9033d62

Browse files
adamwathanadamwathan
authored
Always generate -webkit-backdrop-filter property (#13997)
* Always generate -webkit-backdrop-filter property * Update changelog --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
1 parent 074736c commit 9033d62

File tree

3 files changed

+42
-2
lines changed

3 files changed

+42
-2
lines changed

‎CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1313
- Use no value instead of `blur(0px)` for `backdrop-blur-none` and `blur-none` utilities ([#13830](https://github.com/tailwindlabs/tailwindcss/pull/13830))
1414
- Add `.mts` and `.cts` config file detection ([#13940](https://github.com/tailwindlabs/tailwindcss/pull/13940))
1515
- Don't generate utilities like `px-1` unnecessarily when using utilities like `px-1.5` ([#13959](https://github.com/tailwindlabs/tailwindcss/pull/13959))
16+
- Always generate `-webkit-backdrop-filter` for `backdrop-*` utilities ([#13997](https://github.com/tailwindlabs/tailwindcss/pull/13997))
1617

1718
## [3.4.4] - 2024-06-05
1819

‎src/corePlugins.js

+14-1
Original file line numberDiff line numberDiff line change
@@ -2753,6 +2753,7 @@ export let corePlugins = {
27532753
return {
27542754
'--tw-backdrop-blur': value.trim() === '' ? ' ' : `blur(${value})`,
27552755
'@defaults backdrop-filter': {},
2756+
'-webkit-backdrop-filter': cssBackdropFilterValue,
27562757
'backdrop-filter': cssBackdropFilterValue,
27572758
}
27582759
},
@@ -2768,6 +2769,7 @@ export let corePlugins = {
27682769
return {
27692770
'--tw-backdrop-brightness': `brightness(${value})`,
27702771
'@defaults backdrop-filter': {},
2772+
'-webkit-backdrop-filter': cssBackdropFilterValue,
27712773
'backdrop-filter': cssBackdropFilterValue,
27722774
}
27732775
},
@@ -2783,6 +2785,7 @@ export let corePlugins = {
27832785
return {
27842786
'--tw-backdrop-contrast': `contrast(${value})`,
27852787
'@defaults backdrop-filter': {},
2788+
'-webkit-backdrop-filter': cssBackdropFilterValue,
27862789
'backdrop-filter': cssBackdropFilterValue,
27872790
}
27882791
},
@@ -2798,6 +2801,7 @@ export let corePlugins = {
27982801
return {
27992802
'--tw-backdrop-grayscale': `grayscale(${value})`,
28002803
'@defaults backdrop-filter': {},
2804+
'-webkit-backdrop-filter': cssBackdropFilterValue,
28012805
'backdrop-filter': cssBackdropFilterValue,
28022806
}
28032807
},
@@ -2813,6 +2817,7 @@ export let corePlugins = {
28132817
return {
28142818
'--tw-backdrop-hue-rotate': `hue-rotate(${value})`,
28152819
'@defaults backdrop-filter': {},
2820+
'-webkit-backdrop-filter': cssBackdropFilterValue,
28162821
'backdrop-filter': cssBackdropFilterValue,
28172822
}
28182823
},
@@ -2828,6 +2833,7 @@ export let corePlugins = {
28282833
return {
28292834
'--tw-backdrop-invert': `invert(${value})`,
28302835
'@defaults backdrop-filter': {},
2836+
'-webkit-backdrop-filter': cssBackdropFilterValue,
28312837
'backdrop-filter': cssBackdropFilterValue,
28322838
}
28332839
},
@@ -2843,6 +2849,7 @@ export let corePlugins = {
28432849
return {
28442850
'--tw-backdrop-opacity': `opacity(${value})`,
28452851
'@defaults backdrop-filter': {},
2852+
'-webkit-backdrop-filter': cssBackdropFilterValue,
28462853
'backdrop-filter': cssBackdropFilterValue,
28472854
}
28482855
},
@@ -2858,6 +2865,7 @@ export let corePlugins = {
28582865
return {
28592866
'--tw-backdrop-saturate': `saturate(${value})`,
28602867
'@defaults backdrop-filter': {},
2868+
'-webkit-backdrop-filter': cssBackdropFilterValue,
28612869
'backdrop-filter': cssBackdropFilterValue,
28622870
}
28632871
},
@@ -2873,6 +2881,7 @@ export let corePlugins = {
28732881
return {
28742882
'--tw-backdrop-sepia': `sepia(${value})`,
28752883
'@defaults backdrop-filter': {},
2884+
'-webkit-backdrop-filter': cssBackdropFilterValue,
28762885
'backdrop-filter': cssBackdropFilterValue,
28772886
}
28782887
},
@@ -2896,9 +2905,13 @@ export let corePlugins = {
28962905
addUtilities({
28972906
'.backdrop-filter': {
28982907
'@defaults backdrop-filter': {},
2908+
'-webkit-backdrop-filter': cssBackdropFilterValue,
28992909
'backdrop-filter': cssBackdropFilterValue,
29002910
},
2901-
'.backdrop-filter-none': { 'backdrop-filter': 'none' },
2911+
'.backdrop-filter-none': {
2912+
'-webkit-backdrop-filter': 'none',
2913+
'backdrop-filter': 'none',
2914+
},
29022915
})
29032916
},
29042917

‎tests/arbitrary-values.test.css

+27-1
Original file line numberDiff line numberDiff line change
@@ -1055,54 +1055,81 @@
10551055
}
10561056
.backdrop-blur-\[11px\] {
10571057
--tw-backdrop-blur: blur(11px);
1058+
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
1059+
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
1060+
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
10581061
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
10591062
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
10601063
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
10611064
}
10621065
.backdrop-brightness-\[1\.23\] {
10631066
--tw-backdrop-brightness: brightness(1.23);
1067+
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
1068+
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
1069+
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
10641070
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
10651071
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
10661072
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
10671073
}
10681074
.backdrop-contrast-\[0\.87\] {
10691075
--tw-backdrop-contrast: contrast(0.87);
1076+
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
1077+
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
1078+
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
10701079
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
10711080
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
10721081
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
10731082
}
10741083
.backdrop-grayscale-\[0\.42\] {
10751084
--tw-backdrop-grayscale: grayscale(0.42);
1085+
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
1086+
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
1087+
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
10761088
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
10771089
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
10781090
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
10791091
}
10801092
.backdrop-hue-rotate-\[1\.57rad\] {
10811093
--tw-backdrop-hue-rotate: hue-rotate(1.57rad);
1094+
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
1095+
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
1096+
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
10821097
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
10831098
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
10841099
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
10851100
}
10861101
.backdrop-invert-\[0\.66\] {
10871102
--tw-backdrop-invert: invert(0.66);
1103+
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
1104+
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
1105+
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
10881106
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
10891107
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
10901108
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
10911109
}
10921110
.backdrop-opacity-\[22\%\] {
10931111
--tw-backdrop-opacity: opacity(22%);
1112+
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
1113+
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
1114+
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
10941115
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
10951116
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
10961117
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
10971118
}
10981119
.backdrop-saturate-\[144\%\] {
10991120
--tw-backdrop-saturate: saturate(144%);
1121+
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
1122+
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
1123+
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
11001124
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
11011125
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
11021126
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
11031127
}
11041128
.backdrop-sepia-\[0\.38\] {
11051129
--tw-backdrop-sepia: sepia(0.38);
1130+
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
1131+
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
1132+
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
11061133
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
11071134
var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
11081135
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -1144,4 +1171,3 @@
11441171
grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
11451172
}
11461173
}
1147-

0 commit comments

Comments
 (0)