Skip to content

Ensure individual logical property utilities are sorted later than left/right pair utilities #14777

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adamwathan merged 2 commits into from
Oct 24, 2024
Merged

Ensure individual logical property utilities are sorted later than left/right pair utilities #14777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3ce4b13
Ensure individual logical property utilities are sorted later than le…
adamwathan Oct 24, 2024
76b3d1d
Update changelog
adamwathan Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

## [Unreleased]

- Nothing yet!
### Fixed

- Ensure individual logical property utilities are sorted later than left/right pair utilities ([#14777](https://github.com/tailwindlabs/tailwindcss/pull/14777))

## [4.0.0-alpha.29] - 2024-10-23

Expand Down
94 changes: 94 additions & 0 deletions packages/tailwindcss/src/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -674,6 +674,100 @@ describe('sorting', () => {
`)
})

it('should sort individual logical properties later than left/right pairs', async () => {
expect(
await compileCss(
css`
@theme {
--spacing-1: 1px;
--spacing-2: 2px;
--spacing-3: 3px;
}
@tailwind utilities;
`,
[
// scroll-margin
'scroll-ms-1',
'scroll-me-2',
'scroll-mx-3',

// scroll-padding
'scroll-ps-1',
'scroll-pe-2',
'scroll-px-3',

// margin
'ms-1',
'me-2',
'mx-3',

// padding
'ps-1',
'pe-2',
'px-3',
].sort(() => Math.random() - 0.5),
),
).toMatchInlineSnapshot(`
":root {
--spacing-1: 1px;
--spacing-2: 2px;
--spacing-3: 3px;
}

.mx-3 {
margin-left: var(--spacing-3, 3px);
margin-right: var(--spacing-3, 3px);
}

.ms-1 {
margin-inline-start: var(--spacing-1, 1px);
}

.me-2 {
margin-inline-end: var(--spacing-2, 2px);
}

.scroll-mx-3 {
scroll-margin-left: var(--spacing-3, 3px);
scroll-margin-right: var(--spacing-3, 3px);
}

.scroll-ms-1 {
scroll-margin-inline-start: var(--spacing-1, 1px);
}

.scroll-me-2 {
scroll-margin-inline-end: var(--spacing-2, 2px);
}

.scroll-px-3 {
scroll-padding-left: var(--spacing-3, 3px);
scroll-padding-right: var(--spacing-3, 3px);
}

.scroll-ps-1 {
scroll-padding-inline-start: var(--spacing-1, 1px);
}

.scroll-pe-2 {
scroll-padding-inline-end: var(--spacing-2, 2px);
}

.px-3 {
padding-left: var(--spacing-3, 3px);
padding-right: var(--spacing-3, 3px);
}

.ps-1 {
padding-inline-start: var(--spacing-1, 1px);
}

.pe-2 {
padding-inline-end: var(--spacing-2, 2px);
}"
`)
})

it('should move variants to the end while sorting', async () => {
expect(
await run(
Expand Down
4 changes: 4 additions & 0 deletions packages/tailwindcss/src/property-order.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,8 @@ export default [
'scroll-snap-align',
'scroll-snap-stop',
'scroll-margin',
'scroll-margin-inline',
'scroll-margin-block',
'scroll-margin-inline-start',
'scroll-margin-inline-end',
'scroll-margin-top',
Expand All @@ -107,6 +109,8 @@ export default [
'scroll-margin-left',

'scroll-padding',
'scroll-padding-inline',
'scroll-padding-block',
'scroll-padding-inline-start',
'scroll-padding-inline-end',
'scroll-padding-top',
Expand Down
12 changes: 6 additions & 6 deletions packages/tailwindcss/src/sort.test.ts
View file
Open in desktop
Copy link
Member

@philipp-spiess philipp-spiess Oct 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’m not sure I understand the changes in this file. Why was x and y swapped?

Copy link
Member Author

@adamwathan adamwathan Oct 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a side effect of px-* and py-* not previously sorting based on padding-inline and padding-block respectively.

For individual sides we sort in TRBL order, so since top comes before right, py-* came before px-*.

Now that we sort based on inline and block, px-* comes first because inline is before block in our sort order.

This actually fixes an inconsistency where margin and padding utilities were sorted differently already because margin was already doing this and padding wasn't:

<!-- Currently -->
<div class="mx-3 my-2"></div>
<div class="py-2 px-3"></div>

<!-- After this PR -->
<div class="mx-3 my-2"></div>
<div class="px-3 py-2"></div>

Copy link
Member

@philipp-spiess philipp-spiess Oct 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yeah gotcha this makes sense 👍

Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@ function loadDesign() {

const table = [
// Utilities
['px-3 p-1 py-3', 'p-1 py-3 px-3'],
['py-3 p-1 px-3', 'p-1 px-3 py-3'],

// Utilities with variants
['px-3 focus:hover:p-3 hover:p-1 py-3', 'py-3 px-3 hover:p-1 focus:hover:p-3'],
['px-3 focus:hover:p-3 hover:p-1 py-3', 'px-3 py-3 hover:p-1 focus:hover:p-3'],

// Utilities with important
['px-3 py-4! p-1', 'p-1 py-4! px-3'],
['py-4! px-3 p-1', 'p-1 py-4! px-3'],
['px-3 py-4! p-1', 'p-1 px-3 py-4!'],
['py-4! px-3 p-1', 'p-1 px-3 py-4!'],

// User CSS order is the same and moved to the front
['b p-1 a', 'b a p-1'],
Expand All @@ -48,11 +48,11 @@ test('can sort classes deterministically across multiple class lists', async ()
let classes = [
[
'a-class px-3 p-1 b-class py-3 bg-red-500 bg-blue-500',
'a-class b-class bg-blue-500 bg-red-500 p-1 py-3 px-3',
'a-class b-class bg-blue-500 bg-red-500 p-1 px-3 py-3',
],
[
'px-3 b-class p-1 py-3 bg-blue-500 a-class bg-red-500',
'b-class a-class bg-blue-500 bg-red-500 p-1 py-3 px-3',
'b-class a-class bg-blue-500 bg-red-500 p-1 px-3 py-3',
],
]

Expand Down
36 changes: 30 additions & 6 deletions packages/tailwindcss/src/utilities.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1743,13 +1743,21 @@ export function createUtilities(theme: Theme) {
functionalUtility('scroll-mx', {
supportsNegative: true,
themeKeys: ['--scroll-margin', '--spacing'],
handle: (value) => [decl('scroll-margin-left', value), decl('scroll-margin-right', value)],
handle: (value) => [
decl('--tw-sort', 'scroll-margin-inline'),
decl('scroll-margin-left', value),
decl('scroll-margin-right', value),
],
})

functionalUtility('scroll-my', {
supportsNegative: true,
themeKeys: ['--scroll-margin', '--spacing'],
handle: (value) => [decl('scroll-margin-top', value), decl('scroll-margin-bottom', value)],
handle: (value) => [
decl('--tw-sort', 'scroll-margin-block'),
decl('scroll-margin-top', value),
decl('scroll-margin-bottom', value),
],
})

functionalUtility('scroll-ms', {
Expand Down Expand Up @@ -1798,13 +1806,21 @@ export function createUtilities(theme: Theme) {
functionalUtility('scroll-px', {
supportsNegative: true,
themeKeys: ['--scroll-padding', '--spacing'],
handle: (value) => [decl('scroll-padding-left', value), decl('scroll-padding-right', value)],
handle: (value) => [
decl('--tw-sort', 'scroll-padding-inline'),
decl('scroll-padding-left', value),
decl('scroll-padding-right', value),
],
})

functionalUtility('scroll-py', {
supportsNegative: true,
themeKeys: ['--scroll-padding', '--spacing'],
handle: (value) => [decl('scroll-padding-top', value), decl('scroll-padding-bottom', value)],
handle: (value) => [
decl('--tw-sort', 'scroll-padding-block'),
decl('scroll-padding-top', value),
decl('scroll-padding-bottom', value),
],
})

functionalUtility('scroll-ps', {
Expand Down Expand Up @@ -2960,12 +2976,20 @@ export function createUtilities(theme: Theme) {

functionalUtility('px', {
themeKeys: ['--padding', '--spacing'],
handle: (value) => [decl('padding-left', value), decl('padding-right', value)],
handle: (value) => [
decl('--tw-sort', 'padding-inline'),
decl('padding-left', value),
decl('padding-right', value),
],
})

functionalUtility('py', {
themeKeys: ['--padding', '--spacing'],
handle: (value) => [decl('padding-top', value), decl('padding-bottom', value)],
handle: (value) => [
decl('--tw-sort', 'padding-block'),
decl('padding-top', value),
decl('padding-bottom', value),
],
})

functionalUtility('pt', {
Expand Down