Skip to content

Do not crash when migrating empty classes#20205

Merged
RobinMalfait merged 4 commits into
mainfrom
fix/issue-20204
Jun 7, 2026
Merged

Do not crash when migrating empty classes#20205
RobinMalfait merged 4 commits into
mainfrom
fix/issue-20204

Conversation

@RobinMalfait
Copy link
Copy Markdown
Member

This PR fixes a crash while using npx @tailwindcss/upgrade when migrating classes with no body inside of an @layer utilities.

When running npx @tailwindcss/upgrade, one thing we do is migrate the CSS from:

@layer utilities {
  .foo {
    color: red;
  }
}

To:

@utility foo {
  color: red;
}

We already have some logic that leaves non-classe (IDs, attribute selectors, ...) alone. But if we are migrating a class that has no body, then we will migrate that as well:

@layer utilities {
  .empty {
  }
}

Is turned into:

@utility empty {
}

But later in the migration process this will result in an error because a @utility has to have at least some nodes.

Ideally, you don't even have CSS that has empty rules since it doesn't have any effect in the browser (except of making your CSS file bigger), but it could be that you don't have control over this file, so a fix is still valid.

This PR solves that by leaving those rules alone, and keep them in an @layer utilities.

Fixes: #20204

Test plan

  1. Added a dedicated test for this usecase

@RobinMalfait RobinMalfait requested a review from a team as a code owner June 7, 2026 19:44
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented Jun 7, 2026

Confidence Score: 5/5

Safe to merge — the change is a narrow, well-tested guard that keeps empty rules out of the migration path without touching any non-empty rule handling.

The fix is minimal and targeted: a new isEmpty predicate gates the class-collection walk, the cleanup condition is tightened to preserve empty rules in the defaults clone, and a dedicated test covers all four empty-rule variants (truly empty, comment-above, comment-inside, comment-below). No existing tests regress; the snapshot format change is purely cosmetic.

No files require special attention.

Reviews (2): Last reviewed commit: "update changelog" | Re-trigger Greptile

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jun 7, 2026

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 5ef0ec88-0ce6-4a52-add9-6a77b5380b9f

📥 Commits

Reviewing files that changed from the base of the PR and between a070fef and 041845f.

📒 Files selected for processing (1)
  • CHANGELOG.md

Walkthrough

This PR enhances the migrateAtLayerUtilities codemod: it adds an isEmpty() helper to skip rules/containers with no nodes or only comment nodes when collecting utility class names, removes contiguous trailing comment nodes alongside removed rules, refines cleanup to treat default and non-default @layer utilities clones differently (removing empty wrappers/rules only from non-default clones), and normalizes raws.before on the default clone. Test snapshots and the local migrate helper were updated to reflect the normalized output formatting.

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Do not crash when migrating empty classes' clearly and concisely summarizes the main change: preventing crashes when handling empty class rules during migration.
Description check ✅ Passed The description is well-detailed and directly related to the changeset, explaining the bug, the problem scenario, the solution, and linking to the relevant issue.
Linked Issues check ✅ Passed The PR directly addresses issue #20204 by preventing empty class rules from being migrated into empty @utility blocks, implementing the required fix to handle empty rules without crashing.
Out of Scope Changes check ✅ Passed All changes are focused on the specific issue: adding an isEmpty helper, refining cleanup logic for empty nodes, and adding a test case for empty classes, with no unrelated modifications.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Comment @coderabbitai help to get the list of available commands and usage tips.

@RobinMalfait RobinMalfait merged commit 68fcdf1 into main Jun 7, 2026
7 checks passed
@RobinMalfait RobinMalfait deleted the fix/issue-20204 branch June 7, 2026 19:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

@tailwindcss/upgrade throws Error: @utility no-default-hover-elevate is empty. Utilities should include at least one property.

1 participant