diff --git a/CHANGELOG.md b/CHANGELOG.md index d36544f29be2..b40b12bdebd4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Use `length` data type for `background-size` instead of `background-position` ([#13771](https://github.com/tailwindlabs/tailwindcss/pull/13771)) +- Support negative values for `{col,row}-{start,end}` utilities ([#13780](https://github.com/tailwindlabs/tailwindcss/pull/13780)) ## [4.0.0-alpha.15] - 2024-05-08 diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 8978f5123b5e..4148944de0bd 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -6,6 +6,32 @@ exports[`getClassList 1`] = ` "-bottom-1", "-bottom-3", "-bottom-4", + "-col-end-1", + "-col-end-10", + "-col-end-11", + "-col-end-12", + "-col-end-13", + "-col-end-2", + "-col-end-3", + "-col-end-4", + "-col-end-5", + "-col-end-6", + "-col-end-7", + "-col-end-8", + "-col-end-9", + "-col-start-1", + "-col-start-10", + "-col-start-11", + "-col-start-12", + "-col-start-13", + "-col-start-2", + "-col-start-3", + "-col-start-4", + "-col-start-5", + "-col-start-6", + "-col-start-7", + "-col-start-8", + "-col-start-9", "-end-0.5", "-end-1", "-end-3", @@ -118,6 +144,32 @@ exports[`getClassList 1`] = ` "-rotate-z-45", "-rotate-z-6", "-rotate-z-90", + "-row-end-1", + "-row-end-10", + "-row-end-11", + "-row-end-12", + "-row-end-13", + "-row-end-2", + "-row-end-3", + "-row-end-4", + "-row-end-5", + "-row-end-6", + "-row-end-7", + "-row-end-8", + "-row-end-9", + "-row-start-1", + "-row-start-10", + "-row-start-11", + "-row-start-12", + "-row-start-13", + "-row-start-2", + "-row-start-3", + "-row-start-4", + "-row-start-5", + "-row-start-6", + "-row-start-7", + "-row-start-8", + "-row-start-9", "-scale-0", "-scale-100", "-scale-105", diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 55e22481743a..4df5a02731c6 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -701,9 +701,13 @@ test('col', () => { }) test('col-start', () => { - expect(run(['col-start-auto', 'col-start-4', 'col-start-99', 'col-start-[123]'])) + expect(run(['col-start-auto', 'col-start-4', 'col-start-99', 'col-start-[123]', '-col-start-4'])) .toMatchInlineSnapshot(` - ".col-start-4 { + ".-col-start-4 { + grid-column-start: calc(4 * -1); + } + + .col-start-4 { grid-column-start: 4; } @@ -719,28 +723,33 @@ test('col-start', () => { grid-column-start: auto; }" `) - expect(run(['col-start', '-col-start-4', 'col-start-unknown'])).toEqual('') + expect(run(['col-start', 'col-start-unknown'])).toEqual('') }) test('col-end', () => { - expect(run(['col-end-auto', 'col-end-4', 'col-end-99', 'col-end-[123]'])).toMatchInlineSnapshot(` - ".col-end-4 { - grid-column-end: 4; - } + expect(run(['col-end-auto', 'col-end-4', 'col-end-99', 'col-end-[123]', '-col-end-4'])) + .toMatchInlineSnapshot(` + ".-col-end-4 { + grid-column-end: calc(4 * -1); + } - .col-end-99 { - grid-column-end: 99; - } + .col-end-4 { + grid-column-end: 4; + } - .col-end-\\[123\\] { - grid-column-end: 123; - } + .col-end-99 { + grid-column-end: 99; + } - .col-end-auto { - grid-column-end: auto; - }" - `) - expect(run(['col-end', '-col-end-4', 'col-end-unknown'])).toEqual('') + .col-end-\\[123\\] { + grid-column-end: 123; + } + + .col-end-auto { + grid-column-end: auto; + }" + `) + expect(run(['col-end', 'col-end-unknown'])).toEqual('') }) test('row', () => { @@ -782,9 +791,13 @@ test('row', () => { }) test('row-start', () => { - expect(run(['row-start-auto', 'row-start-4', 'row-start-99', 'row-start-[123]'])) + expect(run(['row-start-auto', 'row-start-4', 'row-start-99', 'row-start-[123]', '-row-start-4'])) .toMatchInlineSnapshot(` - ".row-start-4 { + ".-row-start-4 { + grid-row-start: calc(4 * -1); + } + + .row-start-4 { grid-row-start: 4; } @@ -800,28 +813,33 @@ test('row-start', () => { grid-row-start: auto; }" `) - expect(run(['row-start', '-row-start-4', 'row-start-unknown'])).toEqual('') + expect(run(['row-start', 'row-start-unknown'])).toEqual('') }) test('row-end', () => { - expect(run(['row-end-auto', 'row-end-4', 'row-end-99', 'row-end-[123]'])).toMatchInlineSnapshot(` - ".row-end-4 { - grid-row-end: 4; - } + expect(run(['row-end-auto', 'row-end-4', 'row-end-99', 'row-end-[123]', '-row-end-4'])) + .toMatchInlineSnapshot(` + ".-row-end-4 { + grid-row-end: calc(4 * -1); + } - .row-end-99 { - grid-row-end: 99; - } + .row-end-4 { + grid-row-end: 4; + } - .row-end-\\[123\\] { - grid-row-end: 123; - } + .row-end-99 { + grid-row-end: 99; + } - .row-end-auto { - grid-row-end: auto; - }" - `) - expect(run(['row-end', '-row-end-4', 'row-end-unknown'])).toEqual('') + .row-end-\\[123\\] { + grid-row-end: 123; + } + + .row-end-auto { + grid-row-end: auto; + }" + `) + expect(run(['row-end', 'row-end-unknown'])).toEqual('') }) test('float', () => { diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index a5b9da8622f9..18d5c515bc9f 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -653,6 +653,7 @@ export function createUtilities(theme: Theme) { */ staticUtility('col-start-auto', [['grid-column-start', 'auto']]) functionalUtility('col-start', { + supportsNegative: true, handleBareValue: ({ value }) => { if (!Number.isInteger(Number(value))) return null return value @@ -666,6 +667,7 @@ export function createUtilities(theme: Theme) { */ staticUtility('col-end-auto', [['grid-column-end', 'auto']]) functionalUtility('col-end', { + supportsNegative: true, handleBareValue: ({ value }) => { if (!Number.isInteger(Number(value))) return null return value @@ -683,6 +685,7 @@ export function createUtilities(theme: Theme) { suggest('col-start', () => [ { + supportsNegative: true, values: Array.from({ length: 13 }, (_, i) => `${i + 1}`), valueThemeKeys: ['--grid-column-start'], }, @@ -690,6 +693,7 @@ export function createUtilities(theme: Theme) { suggest('col-end', () => [ { + supportsNegative: true, values: Array.from({ length: 13 }, (_, i) => `${i + 1}`), valueThemeKeys: ['--grid-column-end'], }, @@ -718,6 +722,7 @@ export function createUtilities(theme: Theme) { */ staticUtility('row-start-auto', [['grid-row-start', 'auto']]) functionalUtility('row-start', { + supportsNegative: true, handleBareValue: ({ value }) => { if (!Number.isInteger(Number(value))) return null return value @@ -731,6 +736,7 @@ export function createUtilities(theme: Theme) { */ staticUtility('row-end-auto', [['grid-row-end', 'auto']]) functionalUtility('row-end', { + supportsNegative: true, handleBareValue: ({ value }) => { if (!Number.isInteger(Number(value))) return null return value @@ -748,6 +754,7 @@ export function createUtilities(theme: Theme) { suggest('row-start', () => [ { + supportsNegative: true, values: Array.from({ length: 13 }, (_, i) => `${i + 1}`), valueThemeKeys: ['--grid-row-start'], }, @@ -755,6 +762,7 @@ export function createUtilities(theme: Theme) { suggest('row-end', () => [ { + supportsNegative: true, values: Array.from({ length: 13 }, (_, i) => `${i + 1}`), valueThemeKeys: ['--grid-row-end'], },