Use the bg-linear namespace instead

tailwindlabs · Jun 3, 2024 · 1e08ff2 · 1e08ff2
1 parent 88e7c7e
commit 1e08ff2
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 16 deletions.
diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -490,12 +490,46 @@ exports[`getClassList 1`] = `
   "bg-left",
   "bg-left-bottom",
   "bg-left-top",
+  "bg-linear-to-b",
+  "bg-linear-to-bl",
+  "bg-linear-to-br",
+  "bg-linear-to-l",
+  "bg-linear-to-r",
+  "bg-linear-to-t",
+  "bg-linear-to-tl",
+  "bg-linear-to-tr",
   "bg-local",
   "bg-no-repeat",
   "bg-none",
   "bg-origin-border",
   "bg-origin-content",
   "bg-origin-padding",
+  "bg-radial-circle-b",
+  "bg-radial-circle-bl",
+  "bg-radial-circle-br",
+  "bg-radial-circle-c",
+  "bg-radial-circle-closest-corner",
+  "bg-radial-circle-closest-side",
+  "bg-radial-circle-farthest-corner",
+  "bg-radial-circle-farthest-side",
+  "bg-radial-circle-l",
+  "bg-radial-circle-r",
+  "bg-radial-circle-t",
+  "bg-radial-circle-tl",
+  "bg-radial-circle-tr",
+  "bg-radial-ellipse-b",
+  "bg-radial-ellipse-bl",
+  "bg-radial-ellipse-br",
+  "bg-radial-ellipse-c",
+  "bg-radial-ellipse-closest-corner",
+  "bg-radial-ellipse-closest-side",
+  "bg-radial-ellipse-farthest-corner",
+  "bg-radial-ellipse-farthest-side",
+  "bg-radial-ellipse-l",
+  "bg-radial-ellipse-r",
+  "bg-radial-ellipse-t",
+  "bg-radial-ellipse-tl",
+  "bg-radial-ellipse-tr",
   "bg-repeat",
   "bg-repeat-x",
   "bg-repeat-y",

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
@@ -7690,6 +7690,8 @@ test('bg', () => {
 
         // background-image
         'bg-none',
+
+        // Legacy linear gradient version
         'bg-gradient-to-t',
         'bg-gradient-to-tr',
         'bg-gradient-to-r',
@@ -7698,13 +7700,24 @@ test('bg', () => {
         'bg-gradient-to-bl',
         'bg-gradient-to-l',
         'bg-gradient-to-tl',
+
+        // Modern linear-gradient version
+        'bg-linear-to-t',
+        'bg-linear-to-tr',
+        'bg-linear-to-r',
+        'bg-linear-to-br',
+        'bg-linear-to-b',
+        'bg-linear-to-bl',
+        'bg-linear-to-l',
+        'bg-linear-to-tl',
+
         'bg-[url(/image.png)]',
         'bg-[url:--my-url]',
         'bg-[linear-gradient(to_bottom,red,blue)]',
         'bg-[image:--my-gradient]',
-        'bg-gradient-[125deg]',
-        'bg-gradient-[1.3rad]',
-        'bg-gradient-[to_bottom]',
+        'bg-linear-[125deg]',
+        'bg-linear-[1.3rad]',
+        'bg-linear-[to_bottom]',
 
         // background-size
         'bg-auto',
@@ -7813,15 +7826,7 @@ test('bg', () => {
       background-image: var(--my-url);
     }
 
-    .bg-gradient-\\[1\\.3rad\\] {
-      background-image: linear-gradient(74.4845deg, var(--tw-gradient-stops, ));
-    }
-
-    .bg-gradient-\\[125deg\\] {
-      background-image: linear-gradient(125deg, var(--tw-gradient-stops, ));
-    }
-
-    .bg-gradient-\\[to_bottom\\], .bg-gradient-to-b {
+    .bg-gradient-to-b {
       background-image: linear-gradient(to bottom, var(--tw-gradient-stops, ));
     }
 
@@ -7853,6 +7858,46 @@ test('bg', () => {
       background-image: linear-gradient(to top right, var(--tw-gradient-stops, ));
     }
 
+    .bg-linear-\\[1\\.3rad\\] {
+      background-image: linear-gradient(74.4845deg, var(--tw-gradient-stops, ));
+    }
+
+    .bg-linear-\\[125deg\\] {
+      background-image: linear-gradient(125deg, var(--tw-gradient-stops, ));
+    }
+
+    .bg-linear-\\[to_bottom\\], .bg-linear-to-b {
+      background-image: linear-gradient(to bottom, var(--tw-gradient-stops, ));
+    }
+
+    .bg-linear-to-bl {
+      background-image: linear-gradient(to bottom left, var(--tw-gradient-stops, ));
+    }
+
+    .bg-linear-to-br {
+      background-image: linear-gradient(to bottom right, var(--tw-gradient-stops, ));
+    }
+
+    .bg-linear-to-l {
+      background-image: linear-gradient(to left, var(--tw-gradient-stops, ));
+    }
+
+    .bg-linear-to-r {
+      background-image: linear-gradient(to right, var(--tw-gradient-stops, ));
+    }
+
+    .bg-linear-to-t {
+      background-image: linear-gradient(to top, var(--tw-gradient-stops, ));
+    }
+
+    .bg-linear-to-tl {
+      background-image: linear-gradient(to top left, var(--tw-gradient-stops, ));
+    }
+
+    .bg-linear-to-tr {
+      background-image: linear-gradient(to top right, var(--tw-gradient-stops, ));
+    }
+
     .bg-none {
       background-image: none;
     }
@@ -7985,9 +8030,10 @@ test('bg', () => {
       // background-image
       '-bg-none',
       '-bg-gradient-to-br',
-      '-bg-gradient-[125deg]', // This could be made valid maybe
-      '-bg-gradient-[1.3rad]', // This could be made valid maybe
-      '-bg-gradient-[to_bottom]',
+      '-bg-linear-to-br',
+      '-bg-linear-[125deg]', // This could be made valid maybe
+      '-bg-linear-[1.3rad]', // This could be made valid maybe
+      '-bg-linear-[to_bottom]',
 
       // background-size
       '-bg-auto',

diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
@@ -2497,9 +2497,13 @@ export function createUtilities(theme: Theme) {
     staticUtility(`bg-gradient-to-${value}`, [
       ['background-image', `linear-gradient(to ${direction}, var(--tw-gradient-stops,))`],
     ])
+
+    staticUtility(`bg-linear-to-${value}`, [
+      ['background-image', `linear-gradient(to ${direction}, var(--tw-gradient-stops,))`],
+    ])
   }
 
-  utilities.functional('bg-gradient', (candidate) => {
+  utilities.functional('bg-linear', (candidate) => {
     if (candidate.negative || !candidate.value) return
 
     if (candidate.value.kind === 'arbitrary') {