Update default drop-shadow-* values to use a single shadow

[thecrypticace]

This PR updates the default drop-shadow-* values to use a single shadow instead of multiple shadows.

This ensures that the usage with drop-shadow(var(--drop-shadow-xl)) is correct because the drop-shadow(…) needs to encode a single drop shadow.

[RobinMalfait]

I think we need to do the same in here:

Otherwise this won't work. Let's add drop-shadow to the list of tests.

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
index b16c6f125..e6120023c 100644
--- a/packages/tailwindcss/src/utilities.test.ts
+++ b/packages/tailwindcss/src/utilities.test.ts
@@ -13639,6 +13639,7 @@ test('filter', async () => {
         'invert',
         'invert-0',
         'invert-[var(--value)]',
+        'drop-shadow',
         'drop-shadow-xl',
         'drop-shadow-[0_0_red]',
         'saturate-0',
@@ -13692,6 +13693,11 @@ test('filter', async () => {
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
     }
 
+    .drop-shadow {
+      --tw-drop-shadow: drop-shadow(var(--drop-shadow));
+      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+    }
+
     .drop-shadow-\\[0_0_red\\] {
       --tw-drop-shadow: drop-shadow(0 0 red);
       filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );

[RobinMalfait]

Can't add a suggestion/comment on untouched lines so had to do it this way 😅

[philipp-spiess]

Change looks good but need to update the PR description 🙈

[dmitrc]

@thecrypticace, given the new format for generated drop-shadow filters embeds just a single shadow via CSS var, what is the guidance for setting up utilities with multiple shadows?

Is my understanding correct that you can't really do it via @theme anymore and need to roll an entirely custom @utility including all of the filter boilerplate?

@theme {
  --drop-shadow-*: initial;
  --custom-drop-shadow-foo: drop-shadow(...) drop-shadow(...);
}

@utility drop-shadow-* {
  --tw-drop-shadow: --value(--custom-drop-shadow-*);
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,)
    var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,)
    var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}