add dedicated color stop position tests

Author: RobinMalfait

tests/plugins/gradientColorStops.test.js

@@ -127,4 +127,77 @@ crosscheck(({ stable, oxide }) => {
       `)
     })
   })
+
+  test('gradient color stop position', () => {
+    let config = {
+      content: [
+        {
+          raw: html`
+            <div>
+              <div
+                class="bg-gradient-to-r from-red-500 from-50 via-pink-500 via-75 to-violet-400 to-80"
+              ></div>
+              <div class="from-10 from-[14%]"></div>
+              <div class="via-10 via-[14%]"></div>
+              <div class="to-10 to-[14%]"></div>
+            </div>
+          `,
+        },
+      ],
+      theme: {},
+    }
+
+    return run('@tailwind utilities', config).then((result) => {
+      expect(result.css).toMatchFormattedCss(css`
+        .bg-gradient-to-r {
+          background-image: linear-gradient(to right, var(--tw-gradient-stops));
+        }
+        .from-red-500 {
+          --tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
+          --tw-gradient-from-position: ;
+          --tw-gradient-to: #ef444400 var(--tw-gradient-from-position);
+          --tw-gradient-to-position: ;
+          --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+        }
+        .from-10 {
+          --tw-gradient-from-position: 10%;
+        }
+        .from-50 {
+          --tw-gradient-from-position: 50%;
+        }
+        .from-\[14\%\] {
+          --tw-gradient-from-position: 14%;
+        }
+        .via-pink-500 {
+          --tw-gradient-via-position: ;
+          --tw-gradient-to: #ec489900 var(--tw-gradient-to-position);
+          --tw-gradient-to-position: ;
+          --tw-gradient-stops: var(--tw-gradient-from), #ec4899 var(--tw-gradient-via-position),
+            var(--tw-gradient-to);
+        }
+        .via-10 {
+          --tw-gradient-via-position: 10%;
+        }
+        .via-75 {
+          --tw-gradient-via-position: 75%;
+        }
+        .via-\[14\%\] {
+          --tw-gradient-via-position: 14%;
+        }
+        .to-violet-400 {
+          --tw-gradient-to: #a78bfa var(--tw-gradient-to-position);
+          --tw-gradient-to-position: ;
+        }
+        .to-10 {
+          --tw-gradient-to-position: 10%;
+        }
+        .to-80 {
+          --tw-gradient-to-position: 80%;
+        }
+        .to-\[14\%\] {
+          --tw-gradient-to-position: 14%;
+        }
+      `)
+    })
+  })
 })