Skip to content

Commit 2428f8f

Browse files
thecrypticacethecrypticace
authored
[v4] Support negative values for {col,row}-{start,end} utilities (tailwindlabs#13780)
* Support negative values for `{col,row}-{start,end}` utilities * Update changelog
1 parent 04906c8 commit 2428f8f

File tree

4 files changed

+115
-36
lines changed

4 files changed

+115
-36
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1010
### Fixed
1111

1212
- Use `length` data type for `background-size` instead of `background-position` ([#13771](https://github.com/tailwindlabs/tailwindcss/pull/13771))
13+
- Support negative values for `{col,row}-{start,end}` utilities ([#13780](https://github.com/tailwindlabs/tailwindcss/pull/13780))
1314

1415
## [4.0.0-alpha.15] - 2024-05-08
1516

‎packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,32 @@ exports[`getClassList 1`] = `
66
"-bottom-1",
77
"-bottom-3",
88
"-bottom-4",
9+
"-col-end-1",
10+
"-col-end-10",
11+
"-col-end-11",
12+
"-col-end-12",
13+
"-col-end-13",
14+
"-col-end-2",
15+
"-col-end-3",
16+
"-col-end-4",
17+
"-col-end-5",
18+
"-col-end-6",
19+
"-col-end-7",
20+
"-col-end-8",
21+
"-col-end-9",
22+
"-col-start-1",
23+
"-col-start-10",
24+
"-col-start-11",
25+
"-col-start-12",
26+
"-col-start-13",
27+
"-col-start-2",
28+
"-col-start-3",
29+
"-col-start-4",
30+
"-col-start-5",
31+
"-col-start-6",
32+
"-col-start-7",
33+
"-col-start-8",
34+
"-col-start-9",
935
"-end-0.5",
1036
"-end-1",
1137
"-end-3",
@@ -118,6 +144,32 @@ exports[`getClassList 1`] = `
118144
"-rotate-z-45",
119145
"-rotate-z-6",
120146
"-rotate-z-90",
147+
"-row-end-1",
148+
"-row-end-10",
149+
"-row-end-11",
150+
"-row-end-12",
151+
"-row-end-13",
152+
"-row-end-2",
153+
"-row-end-3",
154+
"-row-end-4",
155+
"-row-end-5",
156+
"-row-end-6",
157+
"-row-end-7",
158+
"-row-end-8",
159+
"-row-end-9",
160+
"-row-start-1",
161+
"-row-start-10",
162+
"-row-start-11",
163+
"-row-start-12",
164+
"-row-start-13",
165+
"-row-start-2",
166+
"-row-start-3",
167+
"-row-start-4",
168+
"-row-start-5",
169+
"-row-start-6",
170+
"-row-start-7",
171+
"-row-start-8",
172+
"-row-start-9",
121173
"-scale-0",
122174
"-scale-100",
123175
"-scale-105",

‎packages/tailwindcss/src/utilities.test.ts‎

Lines changed: 54 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -701,9 +701,13 @@ test('col', () => {
701701
})
702702

703703
test('col-start', () => {
704-
expect(run(['col-start-auto', 'col-start-4', 'col-start-99', 'col-start-[123]']))
704+
expect(run(['col-start-auto', 'col-start-4', 'col-start-99', 'col-start-[123]', '-col-start-4']))
705705
.toMatchInlineSnapshot(`
706-
".col-start-4 {
706+
".-col-start-4 {
707+
grid-column-start: calc(4 * -1);
708+
}
709+
710+
.col-start-4 {
707711
grid-column-start: 4;
708712
}
709713
@@ -719,28 +723,33 @@ test('col-start', () => {
719723
grid-column-start: auto;
720724
}"
721725
`)
722-
expect(run(['col-start', '-col-start-4', 'col-start-unknown'])).toEqual('')
726+
expect(run(['col-start', 'col-start-unknown'])).toEqual('')
723727
})
724728

725729
test('col-end', () => {
726-
expect(run(['col-end-auto', 'col-end-4', 'col-end-99', 'col-end-[123]'])).toMatchInlineSnapshot(`
727-
".col-end-4 {
728-
grid-column-end: 4;
729-
}
730+
expect(run(['col-end-auto', 'col-end-4', 'col-end-99', 'col-end-[123]', '-col-end-4']))
731+
.toMatchInlineSnapshot(`
732+
".-col-end-4 {
733+
grid-column-end: calc(4 * -1);
734+
}
730735
731-
.col-end-99 {
732-
grid-column-end: 99;
733-
}
736+
.col-end-4 {
737+
grid-column-end: 4;
738+
}
734739
735-
.col-end-\\[123\\] {
736-
grid-column-end: 123;
737-
}
740+
.col-end-99 {
741+
grid-column-end: 99;
742+
}
738743
739-
.col-end-auto {
740-
grid-column-end: auto;
741-
}"
742-
`)
743-
expect(run(['col-end', '-col-end-4', 'col-end-unknown'])).toEqual('')
744+
.col-end-\\[123\\] {
745+
grid-column-end: 123;
746+
}
747+
748+
.col-end-auto {
749+
grid-column-end: auto;
750+
}"
751+
`)
752+
expect(run(['col-end', 'col-end-unknown'])).toEqual('')
744753
})
745754

746755
test('row', () => {
@@ -782,9 +791,13 @@ test('row', () => {
782791
})
783792

784793
test('row-start', () => {
785-
expect(run(['row-start-auto', 'row-start-4', 'row-start-99', 'row-start-[123]']))
794+
expect(run(['row-start-auto', 'row-start-4', 'row-start-99', 'row-start-[123]', '-row-start-4']))
786795
.toMatchInlineSnapshot(`
787-
".row-start-4 {
796+
".-row-start-4 {
797+
grid-row-start: calc(4 * -1);
798+
}
799+
800+
.row-start-4 {
788801
grid-row-start: 4;
789802
}
790803
@@ -800,28 +813,33 @@ test('row-start', () => {
800813
grid-row-start: auto;
801814
}"
802815
`)
803-
expect(run(['row-start', '-row-start-4', 'row-start-unknown'])).toEqual('')
816+
expect(run(['row-start', 'row-start-unknown'])).toEqual('')
804817
})
805818

806819
test('row-end', () => {
807-
expect(run(['row-end-auto', 'row-end-4', 'row-end-99', 'row-end-[123]'])).toMatchInlineSnapshot(`
808-
".row-end-4 {
809-
grid-row-end: 4;
810-
}
820+
expect(run(['row-end-auto', 'row-end-4', 'row-end-99', 'row-end-[123]', '-row-end-4']))
821+
.toMatchInlineSnapshot(`
822+
".-row-end-4 {
823+
grid-row-end: calc(4 * -1);
824+
}
811825
812-
.row-end-99 {
813-
grid-row-end: 99;
814-
}
826+
.row-end-4 {
827+
grid-row-end: 4;
828+
}
815829
816-
.row-end-\\[123\\] {
817-
grid-row-end: 123;
818-
}
830+
.row-end-99 {
831+
grid-row-end: 99;
832+
}
819833
820-
.row-end-auto {
821-
grid-row-end: auto;
822-
}"
823-
`)
824-
expect(run(['row-end', '-row-end-4', 'row-end-unknown'])).toEqual('')
834+
.row-end-\\[123\\] {
835+
grid-row-end: 123;
836+
}
837+
838+
.row-end-auto {
839+
grid-row-end: auto;
840+
}"
841+
`)
842+
expect(run(['row-end', 'row-end-unknown'])).toEqual('')
825843
})
826844

827845
test('float', () => {

‎packages/tailwindcss/src/utilities.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -653,6 +653,7 @@ export function createUtilities(theme: Theme) {
653653
*/
654654
staticUtility('col-start-auto', [['grid-column-start', 'auto']])
655655
functionalUtility('col-start', {
656+
supportsNegative: true,
656657
handleBareValue: ({ value }) => {
657658
if (!Number.isInteger(Number(value))) return null
658659
return value
@@ -666,6 +667,7 @@ export function createUtilities(theme: Theme) {
666667
*/
667668
staticUtility('col-end-auto', [['grid-column-end', 'auto']])
668669
functionalUtility('col-end', {
670+
supportsNegative: true,
669671
handleBareValue: ({ value }) => {
670672
if (!Number.isInteger(Number(value))) return null
671673
return value
@@ -683,13 +685,15 @@ export function createUtilities(theme: Theme) {
683685

684686
suggest('col-start', () => [
685687
{
688+
supportsNegative: true,
686689
values: Array.from({ length: 13 }, (_, i) => `${i + 1}`),
687690
valueThemeKeys: ['--grid-column-start'],
688691
},
689692
])
690693

691694
suggest('col-end', () => [
692695
{
696+
supportsNegative: true,
693697
values: Array.from({ length: 13 }, (_, i) => `${i + 1}`),
694698
valueThemeKeys: ['--grid-column-end'],
695699
},
@@ -718,6 +722,7 @@ export function createUtilities(theme: Theme) {
718722
*/
719723
staticUtility('row-start-auto', [['grid-row-start', 'auto']])
720724
functionalUtility('row-start', {
725+
supportsNegative: true,
721726
handleBareValue: ({ value }) => {
722727
if (!Number.isInteger(Number(value))) return null
723728
return value
@@ -731,6 +736,7 @@ export function createUtilities(theme: Theme) {
731736
*/
732737
staticUtility('row-end-auto', [['grid-row-end', 'auto']])
733738
functionalUtility('row-end', {
739+
supportsNegative: true,
734740
handleBareValue: ({ value }) => {
735741
if (!Number.isInteger(Number(value))) return null
736742
return value
@@ -748,13 +754,15 @@ export function createUtilities(theme: Theme) {
748754

749755
suggest('row-start', () => [
750756
{
757+
supportsNegative: true,
751758
values: Array.from({ length: 13 }, (_, i) => `${i + 1}`),
752759
valueThemeKeys: ['--grid-row-start'],
753760
},
754761
])
755762

756763
suggest('row-end', () => [
757764
{
765+
supportsNegative: true,
758766
values: Array.from({ length: 13 }, (_, i) => `${i + 1}`),
759767
valueThemeKeys: ['--grid-row-end'],
760768
},

0 commit comments

Comments
 (0)