[v4] Support arbitrary gradient angles

[thecrypticace]

This makes things like bg-gradient-[125deg] and bg-gradient-[1.3rad] work. Now the output will be:

.bg-gradient-\[1\.3rad\] {
  background-image: linear-gradient(1.3rad, var(--tw-gradient-stops, ));
}

.bg-gradient-\[125deg\] {
  background-image: linear-gradient(125deg, var(--tw-gradient-stops, ));
}

[adamwathan]

Wonder if we should do this under a bg-linear namespace instead of bg-gradient but keep gradient for BC? That way we could also do bg-conic and bg-radial as well 🤔

[thecrypticace]

You know… I'm totally on board with that.

[RobinMalfait]

Nice!

2 questions:

1. For the bg-radial examples, will we do that in a new PR or in the same PR?
2. This currently still allows you to type bg-gradient-[123deg]. Should we infer the angle data type in the 'bg' plugin and just return early so we don't fallback to background-color?

Something like:

diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index 78d653b9d..53ac9a584 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -2532,9 +2532,13 @@ export function createUtilities(theme: Theme) {
           'bg-size',
           'length',
           'url',
+          'angle',
         ])
 
       switch (type) {
+        // Explicitly unsupported
+        case 'angle':
+          return
         case 'percentage':
         case 'position': {
           return [decl('background-position', value)]

[RobinMalfait]

Just for completeness so we don't forget:

The last one I mentioned, where we infer the angle and mark it as not supported is a band-aid solution. Instead, we should bail earlier because we already know that it was invalid. bg-foo-bar-baz-[123deg] is not valid if bg-foo-bar-baz doesn't exist as a plugin root.

[thecrypticace]

Just for completeness so we don't forget:

The last one I mentioned, where we infer the angle and mark it as not supported is a band-aid solution. Instead, we should bail earlier because we already know that it was invalid. bg-foo-bar-baz-[123deg] is not valid if bg-foo-bar-baz doesn't exist as a plugin root.

Yeah we need to do the proper fix but in a separate PR. It also doesn't need to land before this one so I'm gonna go ahead and merge this in. 👍

[adamwathan]

Just move that one changelog thing but otherwise rock and roll 🤘