Skip to content

Conversation

@marcoroth
Copy link
Owner

@marcoroth marcoroth commented Jan 18, 2026

The tailwind-class-sorter was silently corrupting class names in attributes when ERB was used for interpolating class names. For example:

Input:

<div class="foo-<%= bar %>-100">

Output:

<div class="foo--100 <%= bar %>">

This happened because the sorter separated all literal nodes from ERB nodes and joined them together, losing the ERB's position within the class name.

This pull request adds detection for string interpolation patterns and skips sorting when they're found:

  • Case 1: literal → ERB → literal with no whitespace at boundaries
    e.g., foo-<%= bar %>-100

  • Case 2: ERB at start followed by literal without leading whitespace
    e.g., <%= prefix %>-blue-500

  • Case 3: Literal ending with hyphen followed by ERB at end
    e.g., bg-<%= suffix %>

When interpolation is detected, sorting is skipped for that attribute value to prevent silent corruption. Classes inside nested conditionals are still sorted correctly.

Resolves #879

@pkg-pr-new
Copy link

pkg-pr-new bot commented Jan 18, 2026

npx https://pkg.pr.new/@herb-tools/formatter@1085
npx https://pkg.pr.new/@herb-tools/language-server@1085
npx https://pkg.pr.new/@herb-tools/linter@1085

commit: 44a5d0a

@github-actions
Copy link

github-actions bot commented Jan 18, 2026

🌿 Interactive Playground and Documentation Preview

A preview deployment has been built for this pull request. Try out the changes live in the interactive playground:


🌱 Grown from commit 44a5d0a

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Formatter: tailwind-class-sorter silently corrupts interpolation within class names

2 participants