Suport negative values for col-start/col-end utilities

Author: thecrypticace

packages/tailwindcss/src/utilities.test.ts

@@ -701,9 +701,13 @@ test('col', () => {
 })
 
 test('col-start', () => {
-  expect(run(['col-start-auto', 'col-start-4', 'col-start-99', 'col-start-[123]']))
+  expect(run(['col-start-auto', 'col-start-4', 'col-start-99', 'col-start-[123]', '-col-start-4']))
     .toMatchInlineSnapshot(`
-      ".col-start-4 {
+      ".-col-start-4 {
+        grid-column-start: calc(4 * -1);
+      }
+
+      .col-start-4 {
         grid-column-start: 4;
       }
 
@@ -719,28 +723,33 @@ test('col-start', () => {
         grid-column-start: auto;
       }"
     `)
-  expect(run(['col-start', '-col-start-4', 'col-start-unknown'])).toEqual('')
+  expect(run(['col-start', 'col-start-unknown'])).toEqual('')
 })
 
 test('col-end', () => {
-  expect(run(['col-end-auto', 'col-end-4', 'col-end-99', 'col-end-[123]'])).toMatchInlineSnapshot(`
-    ".col-end-4 {
-      grid-column-end: 4;
-    }
+  expect(run(['col-end-auto', 'col-end-4', 'col-end-99', 'col-end-[123]', '-col-end-4']))
+    .toMatchInlineSnapshot(`
+      ".-col-end-4 {
+        grid-column-end: calc(4 * -1);
+      }
 
-    .col-end-99 {
-      grid-column-end: 99;
-    }
+      .col-end-4 {
+        grid-column-end: 4;
+      }
 
-    .col-end-\\[123\\] {
-      grid-column-end: 123;
-    }
+      .col-end-99 {
+        grid-column-end: 99;
+      }
 
-    .col-end-auto {
-      grid-column-end: auto;
-    }"
-  `)
-  expect(run(['col-end', '-col-end-4', 'col-end-unknown'])).toEqual('')
+      .col-end-\\[123\\] {
+        grid-column-end: 123;
+      }
+
+      .col-end-auto {
+        grid-column-end: auto;
+      }"
+    `)
+  expect(run(['col-end', 'col-end-unknown'])).toEqual('')
 })
 
 test('row', () => {

packages/tailwindcss/src/utilities.ts

@@ -653,6 +653,7 @@ export function createUtilities(theme: Theme) {
    */
   staticUtility('col-start-auto', [['grid-column-start', 'auto']])
   functionalUtility('col-start', {
+    supportsNegative: true,
     handleBareValue: ({ value }) => {
       if (!Number.isInteger(Number(value))) return null
       return value
@@ -666,6 +667,7 @@ export function createUtilities(theme: Theme) {
    */
   staticUtility('col-end-auto', [['grid-column-end', 'auto']])
   functionalUtility('col-end', {
+    supportsNegative: true,
     handleBareValue: ({ value }) => {
       if (!Number.isInteger(Number(value))) return null
       return value