Support negative values for {col,row}-{start,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', () => {
@@ -782,7 +791,7 @@ test('row', () => {
 })
 
 test('row-start', () => {
-  expect(run(['row-start-auto', 'row-start-4', 'row-start-99', 'row-start-[123]']))
+  expect(run(['row-start-auto', 'row-start-4', 'row-start-99', 'row-start-[123]', '-row-start-4']))
     .toMatchInlineSnapshot(`
       ".row-start-4 {
         grid-row-start: 4;
@@ -800,11 +809,12 @@ test('row-start', () => {
         grid-row-start: auto;
       }"
     `)
-  expect(run(['row-start', '-row-start-4', 'row-start-unknown'])).toEqual('')
+  expect(run(['row-start', 'row-start-unknown'])).toEqual('')
 })
 
 test('row-end', () => {
-  expect(run(['row-end-auto', 'row-end-4', 'row-end-99', 'row-end-[123]'])).toMatchInlineSnapshot(`
+  expect(run(['row-end-auto', 'row-end-4', 'row-end-99', 'row-end-[123]', '-row-end-4']))
+    .toMatchInlineSnapshot(`
     ".row-end-4 {
       grid-row-end: 4;
     }
@@ -821,7 +831,7 @@ test('row-end', () => {
       grid-row-end: auto;
     }"
   `)
-  expect(run(['row-end', '-row-end-4', 'row-end-unknown'])).toEqual('')
+  expect(run(['row-end', 'row-end-unknown'])).toEqual('')
 })
 
 test('float', () => {

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
@@ -683,13 +685,15 @@ export function createUtilities(theme: Theme) {
 
   suggest('col-start', () => [
     {
+      supportsNegative: true,
       values: Array.from({ length: 13 }, (_, i) => `${i + 1}`),
       valueThemeKeys: ['--grid-column-start'],
     },
   ])
 
   suggest('col-end', () => [
     {
+      supportsNegative: true,
       values: Array.from({ length: 13 }, (_, i) => `${i + 1}`),
       valueThemeKeys: ['--grid-column-end'],
     },
@@ -718,6 +722,7 @@ export function createUtilities(theme: Theme) {
    */
   staticUtility('row-start-auto', [['grid-row-start', 'auto']])
   functionalUtility('row-start', {
+    supportsNegative: true,
     handleBareValue: ({ value }) => {
       if (!Number.isInteger(Number(value))) return null
       return value
@@ -731,6 +736,7 @@ export function createUtilities(theme: Theme) {
    */
   staticUtility('row-end-auto', [['grid-row-end', 'auto']])
   functionalUtility('row-end', {
+    supportsNegative: true,
     handleBareValue: ({ value }) => {
       if (!Number.isInteger(Number(value))) return null
       return value
@@ -748,13 +754,15 @@ export function createUtilities(theme: Theme) {
 
   suggest('row-start', () => [
     {
+      supportsNegative: true,
       values: Array.from({ length: 13 }, (_, i) => `${i + 1}`),
       valueThemeKeys: ['--grid-row-start'],
     },
   ])
 
   suggest('row-end', () => [
     {
+      supportsNegative: true,
       values: Array.from({ length: 13 }, (_, i) => `${i + 1}`),
       valueThemeKeys: ['--grid-row-end'],
     },