[v3] Support negative values for {col,row}-{start,end} utilities (#…

…13781) * Support negative values for `{col,row}-{start,end}` utilities * Add tests * Update changelog
tailwindlabs · Jun 3, 2024 · 8d66d94 · 8d66d94
1 parent 669109e
commit 8d66d94
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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;
+      }
+    `)
+  })
+})