From 5ed5f19a950232dfcf0107874bea07716e676122 Mon Sep 17 00:00:00 2001
From: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Date: Wed, 11 Sep 2024 16:04:42 -0400
Subject: [PATCH] WIP

---
 packages/tailwindcss/src/utilities.ts | 25 ++++++++++++++++++++-----
 packages/tailwindcss/tests/ui.spec.ts | 15 +++++++++++++++
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
index f05880a7f..baa1643c2 100644
--- a/packages/tailwindcss/src/utilities.ts
+++ b/packages/tailwindcss/src/utilities.ts
@@ -603,6 +603,9 @@ export function createUtilities(theme: Theme) {
   /**
    * @css `grid-column`
    */
+
+  let gridColumnProperties = () => atRoot([property('--tw-col-start'), property('--tw-col-end')])
+
   staticUtility('col-auto', [['grid-column', 'auto']])
   functionalUtility('col', {
     themeKeys: ['--grid-column'],
@@ -614,13 +617,19 @@ export function createUtilities(theme: Theme) {
       if (!Number.isInteger(Number(value))) return null
       return value
     },
-    handle: (value) => [decl('grid-column', `span ${value} / span ${value}`)],
+    handle: (value) => [
+      gridColumnProperties(),
+      decl('grid-column', `var(--tw-col-start, span ${value}) / var(--tw-col-end, span ${value})`),
+    ],
   })
 
   /**
    * @css `grid-column-start`
    */
-  staticUtility('col-start-auto', [['grid-column-start', 'auto']])
+  staticUtility('col-start-auto', [
+    ['--tw-col-start', 'auto'],
+    ['grid-column-start', 'auto'],
+  ])
   functionalUtility('col-start', {
     supportsNegative: true,
     handleBareValue: ({ value }) => {
@@ -628,13 +637,16 @@ export function createUtilities(theme: Theme) {
       return value
     },
     themeKeys: ['--grid-column-start'],
-    handle: (value) => [decl('grid-column-start', value)],
+    handle: (value) => [decl('--tw-col-start', value), decl('grid-column-start', value)],
   })
 
   /**
    * @css `grid-column-end`
    */
-  staticUtility('col-end-auto', [['grid-column-end', 'auto']])
+  staticUtility('col-end-auto', [
+    // ['--tw-col-end', 'auto'],
+    ['grid-column-end', 'auto'],
+  ])
   functionalUtility('col-end', {
     supportsNegative: true,
     handleBareValue: ({ value }) => {
@@ -642,7 +654,10 @@ export function createUtilities(theme: Theme) {
       return value
     },
     themeKeys: ['--grid-column-end'],
-    handle: (value) => [decl('grid-column-end', value)],
+    handle: (value) => [
+      // decl('--tw-col-end', value),
+      decl('grid-column-end', value),
+    ],
   })
 
   suggest('col-span', () => [
diff --git a/packages/tailwindcss/tests/ui.spec.ts b/packages/tailwindcss/tests/ui.spec.ts
index 03555eebf..4f7dad01c 100644
--- a/packages/tailwindcss/tests/ui.spec.ts
+++ b/packages/tailwindcss/tests/ui.spec.ts
@@ -287,6 +287,21 @@ test('content-none persists when conditionally styling a pseudo-element', async
   expect(await getPropertyValue(['#x', '::after'], 'content')).toEqual('none')
 })
 
+test('col-start/end are preserved when overriding col-span', async ({ page }) => {
+  let { getPropertyValue } = await render(
+    page,
+    html`<div class="grid grid-cols-12">
+      <div id="x" class="col-start-3 col-end-7 hover:col-span-7 hover:col-start-4">Hello world</div>
+    </div>`,
+  )
+
+  expect(await getPropertyValue('#x', 'grid-column')).toEqual('3 / 7')
+
+  await page.locator('#x').hover()
+
+  expect(await getPropertyValue('#x', 'grid-column')).toEqual('3 / 7')
+})
+
 // ---
 
 const preflight = fs.readFileSync(path.resolve(__dirname, '..', 'preflight.css'), 'utf-8')