From 21d5e05344b69b95a7cabac663f1f8b9dd1d3b79 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 3 Jun 2024 11:21:25 -0400 Subject: [PATCH 1/3] Support negative values for `{col,row}-{start,end}` utilities --- src/corePlugins.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) 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({ From 4968ab48928195da5699f3bb7654a377c50b6c8c Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 3 Jun 2024 11:27:28 -0400 Subject: [PATCH 2/3] Add tests --- tests/negative-prefix.test.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) 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`
` }], + 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; + } + `) + }) +}) From 5c1617943da13458e6b37bf45f5b2005c12c4126 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Mon, 3 Jun 2024 11:32:17 -0400 Subject: [PATCH 3/3] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) 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 `` 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