add failing test for grid-row-start and grid-row-end

packages/tailwindcss/src/utilities.test.ts

@@ -1357,9 +1357,28 @@ test('row', async () => {
 
 test('row-start', async () => {
   expect(
-    await run(['row-start-auto', 'row-start-4', 'row-start-99', 'row-start-[123]', '-row-start-4']),
+    await compileCss(
+      css`
+        @theme {
+          --grid-row-start-custom: 1 row-start;
+        }
+        @tailwind utilities;
+      `,
+      [
+        'row-start-auto',
+        'row-start-4',
+        'row-start-99',
+        'row-start-[123]',
+        '-row-start-4',
+        'row-start-custom',
+      ],
+    ),
   ).toMatchInlineSnapshot(`
-    ".-row-start-4 {
+    ":root, :host {
+      --grid-row-start-custom: 1 row-start;
+    }
+
+    .-row-start-4 {
       grid-row-start: calc(4 * -1);
     }
 
@@ -1377,6 +1396,10 @@ test('row-start', async () => {
 
     .row-start-auto {
       grid-row-start: auto;
+    }
+
+    .row-start-custom {
+      grid-row-start: var(--grid-row-start-custom);
     }"
   `)
   expect(
@@ -1394,28 +1417,45 @@ test('row-start', async () => {
 })
 
 test('row-end', async () => {
-  expect(await run(['row-end-auto', 'row-end-4', 'row-end-99', 'row-end-[123]', '-row-end-4']))
-    .toMatchInlineSnapshot(`
-      ".-row-end-4 {
-        grid-row-end: calc(4 * -1);
-      }
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --grid-row-end-custom: 1 row-end;
+        }
+        @tailwind utilities;
+      `,
+      ['row-end-auto', 'row-end-4', 'row-end-99', 'row-end-[123]', '-row-end-4', 'row-end-custom'],
+    ),
+  ).toMatchInlineSnapshot(`
+    ":root, :host {
+      --grid-row-end-custom: 1 row-end;
+    }
 
-      .row-end-4 {
-        grid-row-end: 4;
-      }
+    .-row-end-4 {
+      grid-row-end: calc(4 * -1);
+    }
 
-      .row-end-99 {
-        grid-row-end: 99;
-      }
+    .row-end-4 {
+      grid-row-end: 4;
+    }
 
-      .row-end-\\[123\\] {
-        grid-row-end: 123;
-      }
+    .row-end-99 {
+      grid-row-end: 99;
+    }
 
-      .row-end-auto {
-        grid-row-end: auto;
-      }"
-    `)
+    .row-end-\\[123\\] {
+      grid-row-end: 123;
+    }
+
+    .row-end-auto {
+      grid-row-end: auto;
+    }
+
+    .row-end-custom {
+      grid-row-end: var(--grid-row-end-custom);
+    }"
+  `)
   expect(
     await run([
       'row-end',