[v4] Support negative values for {col,row}-{start,end} utilities (#13780)
* Support negative values for `{col,row}-{start,end}` utilities
* Update changelog
This commit is contained in:
Jordan Pittman
GitHub
parent
04906c847e
commit
2428f8f48c
4 changed files with 115 additions and 36 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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', () => {
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue