From 8d66d94182232be94a78eed059ae715f9b43df8f Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Mon, 3 Jun 2024 11:34:27 -0400
Subject: [PATCH] [v3] Support negative values for `{col,row}-{start,end}`
 utilities (#13781)

* Support negative values for `{col,row}-{start,end}` utilities

* Add tests

* Update changelog
---
 CHANGELOG.md                  |  1 +
 src/corePlugins.js            | 16 ++++++++++++----
 tests/negative-prefix.test.js | 24 ++++++++++++++++++++++++
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c6a3f5fb1f18..24a1d4c9429f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Make it possible to use multiple `<alpha-value>` placeholders in a single color definition ([#13740](https://github.com/tailwindlabs/tailwindcss/pull/13740))
 - Don't prefix classes in arbitrary values of `has-*`, `group-has-*`, and `peer-has-*` variants ([#13770](https://github.com/tailwindlabs/tailwindcss/pull/13770))
+- Support negative values for `{col,row}-{start,end}` utilities ([#13781](https://github.com/tailwindlabs/tailwindcss/pull/13781))
 
 ## [3.4.3] - 2024-03-27
 
diff --git a/src/corePlugins.js b/src/corePlugins.js
index 6046591855f0..0c3f96b1751f 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -741,11 +741,19 @@ export let corePlugins = {
   zIndex: createUtilityPlugin('zIndex', [['z', ['zIndex']]], { supportsNegativeValues: true }),
   order: createUtilityPlugin('order', undefined, { supportsNegativeValues: true }),
   gridColumn: createUtilityPlugin('gridColumn', [['col', ['gridColumn']]]),
-  gridColumnStart: createUtilityPlugin('gridColumnStart', [['col-start', ['gridColumnStart']]]),
-  gridColumnEnd: createUtilityPlugin('gridColumnEnd', [['col-end', ['gridColumnEnd']]]),
+  gridColumnStart: createUtilityPlugin('gridColumnStart', [['col-start', ['gridColumnStart']]], {
+    supportsNegativeValues: true,
+  }),
+  gridColumnEnd: createUtilityPlugin('gridColumnEnd', [['col-end', ['gridColumnEnd']]], {
+    supportsNegativeValues: true,
+  }),
   gridRow: createUtilityPlugin('gridRow', [['row', ['gridRow']]]),
-  gridRowStart: createUtilityPlugin('gridRowStart', [['row-start', ['gridRowStart']]]),
-  gridRowEnd: createUtilityPlugin('gridRowEnd', [['row-end', ['gridRowEnd']]]),
+  gridRowStart: createUtilityPlugin('gridRowStart', [['row-start', ['gridRowStart']]], {
+    supportsNegativeValues: true,
+  }),
+  gridRowEnd: createUtilityPlugin('gridRowEnd', [['row-end', ['gridRowEnd']]], {
+    supportsNegativeValues: true,
+  }),
 
   float: ({ addUtilities }) => {
     addUtilities({
diff --git a/tests/negative-prefix.test.js b/tests/negative-prefix.test.js
index dcecd3c5be3a..805f011d2d0d 100644
--- a/tests/negative-prefix.test.js
+++ b/tests/negative-prefix.test.js
@@ -360,3 +360,27 @@ test('addUtilities without negative prefix + variant + negative prefix in conten
 
   expect(result.css).toMatchCss(css``)
 })
+
+test('negative col/row-start/end utilities', () => {
+  let config = {
+    content: [{ raw: html`<div class="-col-start-4 -col-end-4 -row-start-4 -row-end-4"></div>` }],
+    corePlugins: { preflight: false },
+  }
+
+  return run('@tailwind utilities;', config).then((result) => {
+    expect(result.css).toMatchCss(css`
+      .-col-start-4 {
+        grid-column-start: -4;
+      }
+      .-col-end-4 {
+        grid-column-end: -4;
+      }
+      .-row-start-4 {
+        grid-row-start: -4;
+      }
+      .-row-end-4 {
+        grid-row-end: -4;
+      }
+    `)
+  })
+})