From 08a7a187647999f1f4f8c769ae3daee515948d55 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 22 Nov 2024 08:00:58 -0500 Subject: [PATCH 1/7] Reset `space-x/y-reverse` to `0` wip --- packages/tailwindcss/src/utilities.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index c5d9bdf3c6d4..4cfe09fea672 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -1828,6 +1828,7 @@ export function createUtilities(theme: Theme) { styleRule(':where(& > :not(:last-child))', [ decl('--tw-sort', 'row-gap'), + decl('--tw-space-x-reverse', '0'), decl('margin-inline-start', `calc(${value} * var(--tw-space-x-reverse))`), decl('margin-inline-end', `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`), ]), @@ -1842,6 +1843,7 @@ export function createUtilities(theme: Theme) { atRoot([property('--tw-space-y-reverse', '0', '')]), styleRule(':where(& > :not(:last-child))', [ decl('--tw-sort', 'column-gap'), + decl('--tw-space-y-reverse', '0'), decl('margin-block-start', `calc(${value} * var(--tw-space-y-reverse))`), decl('margin-block-end', `calc(${value} * calc(1 - var(--tw-space-y-reverse)))`), ]), From 80fb2131d92150325e49e46645de60a02f2829d4 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 22 Nov 2024 07:30:22 -0500 Subject: [PATCH 2/7] Update tests wip --- packages/tailwindcss/src/index.test.ts | 1 + packages/tailwindcss/src/utilities.test.ts | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/packages/tailwindcss/src/index.test.ts b/packages/tailwindcss/src/index.test.ts index ece3d78f8324..a45272fef630 100644 --- a/packages/tailwindcss/src/index.test.ts +++ b/packages/tailwindcss/src/index.test.ts @@ -686,6 +686,7 @@ describe('sorting', () => { } :where(.space-x-2 > :not(:last-child)) { + --tw-space-x-reverse: 0; margin-inline-start: calc(var(--spacing-2) * var(--tw-space-x-reverse)); margin-inline-end: calc(var(--spacing-2) * calc(1 - var(--tw-space-x-reverse))); } diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index cca68670174b..7281b1077bc7 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -7866,16 +7866,19 @@ test('space-x', async () => { } :where(.-space-x-4 > :not(:last-child)) { + --tw-space-x-reverse: 0; margin-inline-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-x-reverse)); margin-inline-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-x-reverse))); } :where(.space-x-4 > :not(:last-child)) { + --tw-space-x-reverse: 0; margin-inline-start: calc(var(--spacing-4) * var(--tw-space-x-reverse)); margin-inline-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-x-reverse))); } :where(.space-x-\\[4px\\] > :not(:last-child)) { + --tw-space-x-reverse: 0; margin-inline-start: calc(4px * var(--tw-space-x-reverse)); margin-inline-end: calc(4px * calc(1 - var(--tw-space-x-reverse))); } @@ -7914,16 +7917,19 @@ test('space-y', async () => { } :where(.-space-y-4 > :not(:last-child)) { + --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing-4) * -1) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing-4) * -1) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-4 > :not(:last-child)) { + --tw-space-y-reverse: 0; margin-block-start: calc(var(--spacing-4) * var(--tw-space-y-reverse)); margin-block-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-\\[4px\\] > :not(:last-child)) { + --tw-space-y-reverse: 0; margin-block-start: calc(4px * var(--tw-space-y-reverse)); margin-block-end: calc(4px * calc(1 - var(--tw-space-y-reverse))); } From 65b76658ff6ef075a5b3ff626395104f3c70bfe3 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 22 Nov 2024 08:34:38 -0500 Subject: [PATCH 3/7] Update changelog --- CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9363fa3b4f0e..1ed6978b352e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +### Fixed + +- Reset reverse state when using `space-x-*` and `space-y-*` ([#15094](https://github.com/tailwindlabs/tailwindcss/pull/15094)) ## [4.0.0-beta.1] - 2024-11-21 From 391fb564d56fed648c9ad820fc53ca03e49bec4d Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 22 Nov 2024 08:44:05 -0500 Subject: [PATCH 4/7] Apply same fix to divide-x/y --- packages/tailwindcss/src/utilities.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 4cfe09fea672..a134ea00cb05 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -2192,6 +2192,7 @@ export function createUtilities(theme: Theme) { styleRule(':where(& > :not(:last-child))', [ decl('--tw-sort', 'divide-x-width'), borderProperties(), + decl('--tw-divide-x-reverse', '0'), decl('border-inline-style', 'var(--tw-border-style)'), decl('border-inline-start-width', `calc(${value} * var(--tw-divide-x-reverse))`), decl('border-inline-end-width', `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`), @@ -2212,6 +2213,7 @@ export function createUtilities(theme: Theme) { styleRule(':where(& > :not(:last-child))', [ decl('--tw-sort', 'divide-y-width'), borderProperties(), + decl('--tw-divide-y-reverse', '0'), decl('border-bottom-style', 'var(--tw-border-style)'), decl('border-top-style', 'var(--tw-border-style)'), decl('border-top-width', `calc(${value} * var(--tw-divide-y-reverse))`), From a1800e056333db29a7073373ed1a9cd929294097 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 22 Nov 2024 08:44:13 -0500 Subject: [PATCH 5/7] Update tests --- packages/tailwindcss/src/utilities.test.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 7281b1077bc7..7c59653adeba 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -8007,24 +8007,28 @@ test('divide-x', async () => { ), ).toMatchInlineSnapshot(` ":where(.divide-x > :not(:last-child)) { + --tw-divide-x-reverse: 0; border-inline-style: var(--tw-border-style); border-inline-start-width: calc(1px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } :where(.divide-x-4 > :not(:last-child)) { + --tw-divide-x-reverse: 0; border-inline-style: var(--tw-border-style); border-inline-start-width: calc(4px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); } :where(.divide-x-123 > :not(:last-child)) { + --tw-divide-x-reverse: 0; border-inline-style: var(--tw-border-style); border-inline-start-width: calc(123px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(123px * calc(1 - var(--tw-divide-x-reverse))); } :where(.divide-x-\\[4px\\] > :not(:last-child)) { + --tw-divide-x-reverse: 0; border-inline-style: var(--tw-border-style); border-inline-start-width: calc(4px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse))); @@ -8083,6 +8087,7 @@ test('divide-x with custom default border width', async () => { } :where(.divide-x > :not(:last-child)) { + --tw-divide-x-reverse: 0; border-inline-style: var(--tw-border-style); border-inline-start-width: calc(2px * var(--tw-divide-x-reverse)); border-inline-end-width: calc(2px * calc(1 - var(--tw-divide-x-reverse))); @@ -8122,6 +8127,7 @@ test('divide-y', async () => { ), ).toMatchInlineSnapshot(` ":where(.divide-y > :not(:last-child)) { + --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(1px * var(--tw-divide-y-reverse)); @@ -8129,6 +8135,7 @@ test('divide-y', async () => { } :where(.divide-y-4 > :not(:last-child)) { + --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(4px * var(--tw-divide-y-reverse)); @@ -8136,6 +8143,7 @@ test('divide-y', async () => { } :where(.divide-y-123 > :not(:last-child)) { + --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(123px * var(--tw-divide-y-reverse)); @@ -8143,6 +8151,7 @@ test('divide-y', async () => { } :where(.divide-y-\\[4px\\] > :not(:last-child)) { + --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(4px * var(--tw-divide-y-reverse)); @@ -8202,6 +8211,7 @@ test('divide-y with custom default border width', async () => { } :where(.divide-y > :not(:last-child)) { + --tw-divide-y-reverse: 0; border-bottom-style: var(--tw-border-style); border-top-style: var(--tw-border-style); border-top-width: calc(2px * var(--tw-divide-y-reverse)); From 87c8c58878f13df8461a4cdbe397bc4246ef1f40 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 22 Nov 2024 08:45:21 -0500 Subject: [PATCH 6/7] Update changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1ed6978b352e..19ef9eb3e427 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed -- Reset reverse state when using `space-x-*` and `space-y-*` ([#15094](https://github.com/tailwindlabs/tailwindcss/pull/15094)) +- Reset reverse state when using `space-x/y-*` and `divide-x/y-*` ([#15094](https://github.com/tailwindlabs/tailwindcss/pull/15094)) ## [4.0.0-beta.1] - 2024-11-21 From 3849de82f54df6910d819c390c07a36e13b04392 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 22 Nov 2024 08:51:28 -0500 Subject: [PATCH 7/7] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 19ef9eb3e427..151262dda384 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed -- Reset reverse state when using `space-x/y-*` and `divide-x/y-*` ([#15094](https://github.com/tailwindlabs/tailwindcss/pull/15094)) +- Ensure `space-x/y-*` and `divide-x/y-*` with variants can undo `space-x/y-reverse` and `divide-x/y-reverse` ([#15094](https://github.com/tailwindlabs/tailwindcss/pull/15094)) ## [4.0.0-beta.1] - 2024-11-21