Skip to content

Fix sorting of classes that have undefined declarations #16995

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
merged 1 commit into from
Mar 6, 2025
Merged

Fix sorting of classes that have undefined declarations #16995

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- _Experimental_: Add `user-valid` and `user-invalid` variants ([#12370](https://github.com/tailwindlabs/tailwindcss/pull/12370))
- _Experimental_: Add `wrap-anywhere`, `wrap-break-word`, and `wrap-normal` utilities ([#12128](https://github.com/tailwindlabs/tailwindcss/pull/12128))

### Fixed

- Ensure utilities are sorted based on their actual property order ([#16995](https://github.com/tailwindlabs/tailwindcss/pull/16995))

## [4.0.11] - 2025-03-06

### Fixed
Expand Down
4 changes: 3 additions & 1 deletion packages/tailwindcss/src/compile.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,7 +326,9 @@ function getPropertySort(nodes: AstNode[]) {
let node = q.shift()!
if (node.kind === 'declaration') {
// Empty strings should still be counted, e.g.: `--tw-foo:;` is valid
if (node.value !== undefined) count++
if (node.value === undefined) continue

count++

if (seenTwSort) continue

Expand Down
37 changes: 37 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 @@ -1051,6 +1051,43 @@ describe('sorting', () => {
}"
`)
})

// https://github.com/tailwindlabs/tailwindcss/issues/16973
it('should not take undefined values into account when sorting', async () => {
expect(
await compileCss(
css`
@theme {
--text-sm: 0.875rem;
--text-sm--line-height: calc(1.25 / 0.875);
}
@tailwind utilities;
@utility fancy-text {
font-size: var(--text-4xl);
line-height: var(--text-4xl--line-height);
font-weight: var(--font-weight-bold);
}
`,
['fancy-text', 'text-sm'],
),
).toMatchInlineSnapshot(`
":root, :host {
--text-sm: .875rem;
--text-sm--line-height: calc(1.25 / .875);
}

.fancy-text {
font-size: var(--text-4xl);
line-height: var(--text-4xl--line-height);
font-weight: var(--font-weight-bold);
}

.text-sm {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}"
`)
})
})

describe('Parsing theme values from CSS', () => {
Expand Down
14 changes: 7 additions & 7 deletions packages/tailwindcss/src/utilities.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15036,11 +15036,6 @@ test('text', async () => {
--leading-snug: 1.375;
}

.text-sm {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}

.text-\\[10px\\]\\/none {
font-size: 10px;
line-height: 1;
Expand Down Expand Up @@ -15071,6 +15066,11 @@ test('text', async () => {
line-height: calc(var(--spacing) * 6);
}

.text-sm {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}

Comment on lines +15069 to +15073
Copy link
Member Author

Choose a reason for hiding this comment

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

This now uses alphabetical sorting becuase it has the same number of props as the arbitrary text classes

.text-sm\\/6 {
font-size: var(--text-sm);
line-height: calc(var(--spacing) * 6);
Expand Down Expand Up @@ -16748,11 +16748,11 @@ describe('custom utilities', () => {
expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
"@layer utilities {
.text-sm {
font-size: var(--text-sm, .875rem);
line-height: var(--tw-leading, var(--text-sm--line-height, 1.25rem));
font-size: var(--text-sm, .8755rem);
line-height: var(--text-sm--line-height, 1.255rem);
text-rendering: optimizeLegibility;
font-size: var(--text-sm, .875rem);
line-height: var(--tw-leading, var(--text-sm--line-height, 1.25rem));
Comment on lines 16751 to +16755
Copy link
Member Author

Choose a reason for hiding this comment

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

This diff is weird but that's because of lightning flatting. What happens ehre is the custom new text-sm utility is now rendered before the core text-sm. The new prop text-rendering: optimizeLegibility; is still added, the rest is intended behavior here since you can't overwrite core utilities.

}
}"
`)
Expand Down