archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Reset reverse state in space-x/y-* and divide-x/y-* (#15094)

Browse Source 
We weren't resetting the `--tw-space-x-reverse` and
`--tw-space-y-reverse` state in the `space-x/y-{number}` utilities which
broke code assuming that `md:space-x-3` would no longer be reversed.
This PR fixes that.

---------

Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
This commit is contained in:
Jordan Pittman 2024-11-22 08:52:11 -05:00 committed by GitHub
parent c5a0b5481f
commit 92bf26ba1a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 22 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Fixed
- Use configured `--letter-spacing` values for custom font size utilities ([#15099](https://github.com/tailwindlabs/tailwindcss/pull/15099))
- 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

1
packages/tailwindcss/src/index.test.ts
View File

@ -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)));
}

16
packages/tailwindcss/src/utilities.test.ts
View File

@ -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)));
}
@ -8001,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)));
@ -8077,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)));
@ -8116,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));
@ -8123,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));
@ -8130,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));
@ -8137,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));
@ -8196,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));

4
packages/tailwindcss/src/utilities.ts
View File

@ -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', '<number>')]),
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)))`),
]),
@ -2190,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)))`),
@ -2210,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))`),