From ffed3002429d428f1463ce4c29e3ccf532b667de Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Fri, 12 Jul 2024 19:22:02 -0400 Subject: [PATCH 1/2] Always generate -webkit-backdrop-filter property --- src/corePlugins.js | 15 ++++++++++++++- tests/arbitrary-values.test.css | 28 +++++++++++++++++++++++++++- 2 files changed, 41 insertions(+), 2 deletions(-) diff --git a/src/corePlugins.js b/src/corePlugins.js index be2a106c2333..f3441f4b88a3 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -2753,6 +2753,7 @@ export let corePlugins = { return { '--tw-backdrop-blur': value.trim() === '' ? ' ' : `blur(${value})`, '@defaults backdrop-filter': {}, + '-webkit-backdrop-filter': cssBackdropFilterValue, 'backdrop-filter': cssBackdropFilterValue, } }, @@ -2768,6 +2769,7 @@ export let corePlugins = { return { '--tw-backdrop-brightness': `brightness(${value})`, '@defaults backdrop-filter': {}, + '-webkit-backdrop-filter': cssBackdropFilterValue, 'backdrop-filter': cssBackdropFilterValue, } }, @@ -2783,6 +2785,7 @@ export let corePlugins = { return { '--tw-backdrop-contrast': `contrast(${value})`, '@defaults backdrop-filter': {}, + '-webkit-backdrop-filter': cssBackdropFilterValue, 'backdrop-filter': cssBackdropFilterValue, } }, @@ -2798,6 +2801,7 @@ export let corePlugins = { return { '--tw-backdrop-grayscale': `grayscale(${value})`, '@defaults backdrop-filter': {}, + '-webkit-backdrop-filter': cssBackdropFilterValue, 'backdrop-filter': cssBackdropFilterValue, } }, @@ -2813,6 +2817,7 @@ export let corePlugins = { return { '--tw-backdrop-hue-rotate': `hue-rotate(${value})`, '@defaults backdrop-filter': {}, + '-webkit-backdrop-filter': cssBackdropFilterValue, 'backdrop-filter': cssBackdropFilterValue, } }, @@ -2828,6 +2833,7 @@ export let corePlugins = { return { '--tw-backdrop-invert': `invert(${value})`, '@defaults backdrop-filter': {}, + '-webkit-backdrop-filter': cssBackdropFilterValue, 'backdrop-filter': cssBackdropFilterValue, } }, @@ -2843,6 +2849,7 @@ export let corePlugins = { return { '--tw-backdrop-opacity': `opacity(${value})`, '@defaults backdrop-filter': {}, + '-webkit-backdrop-filter': cssBackdropFilterValue, 'backdrop-filter': cssBackdropFilterValue, } }, @@ -2858,6 +2865,7 @@ export let corePlugins = { return { '--tw-backdrop-saturate': `saturate(${value})`, '@defaults backdrop-filter': {}, + '-webkit-backdrop-filter': cssBackdropFilterValue, 'backdrop-filter': cssBackdropFilterValue, } }, @@ -2873,6 +2881,7 @@ export let corePlugins = { return { '--tw-backdrop-sepia': `sepia(${value})`, '@defaults backdrop-filter': {}, + '-webkit-backdrop-filter': cssBackdropFilterValue, 'backdrop-filter': cssBackdropFilterValue, } }, @@ -2896,9 +2905,13 @@ export let corePlugins = { addUtilities({ '.backdrop-filter': { '@defaults backdrop-filter': {}, + '-webkit-backdrop-filter': cssBackdropFilterValue, 'backdrop-filter': cssBackdropFilterValue, }, - '.backdrop-filter-none': { 'backdrop-filter': 'none' }, + '.backdrop-filter-none': { + '-webkit-backdrop-filter': 'none', + 'backdrop-filter': 'none', + }, }) }, diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index 5a03f38dbf1b..32d7110828a8 100644 --- a/tests/arbitrary-values.test.css +++ b/tests/arbitrary-values.test.css @@ -1055,54 +1055,81 @@ } .backdrop-blur-\[11px\] { --tw-backdrop-blur: blur(11px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-brightness-\[1\.23\] { --tw-backdrop-brightness: brightness(1.23); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-contrast-\[0\.87\] { --tw-backdrop-contrast: contrast(0.87); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-grayscale-\[0\.42\] { --tw-backdrop-grayscale: grayscale(0.42); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-hue-rotate-\[1\.57rad\] { --tw-backdrop-hue-rotate: hue-rotate(1.57rad); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-invert-\[0\.66\] { --tw-backdrop-invert: invert(0.66); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-opacity-\[22\%\] { --tw-backdrop-opacity: opacity(22%); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-saturate-\[144\%\] { --tw-backdrop-saturate: saturate(144%); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-sepia-\[0\.38\] { --tw-backdrop-sepia: sepia(0.38); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); @@ -1144,4 +1171,3 @@ grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px; } } - From 447914371a233ceda6fadc5627729db667fdd2b5 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Fri, 12 Jul 2024 20:45:27 -0400 Subject: [PATCH 2/2] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 66cbea645812..61ab957dbb55 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Use no value instead of `blur(0px)` for `backdrop-blur-none` and `blur-none` utilities ([#13830](https://github.com/tailwindlabs/tailwindcss/pull/13830)) - Add `.mts` and `.cts` config file detection ([#13940](https://github.com/tailwindlabs/tailwindcss/pull/13940)) - Don't generate utilities like `px-1` unnecessarily when using utilities like `px-1.5` ([#13959](https://github.com/tailwindlabs/tailwindcss/pull/13959)) +- Always generate `-webkit-backdrop-filter` for `backdrop-*` utilities ([#13997](https://github.com/tailwindlabs/tailwindcss/pull/13997)) ## [3.4.4] - 2024-06-05