[Prettier Plugin] Multiline sorting (suggestion)

[willhindson]

Hi! Absolutely love TWCSS and am glad to see automatic class sorting is being tackled :)

I just wanted to mention that for my workflow, at least, I could not work with all classes on a single line — everything becomes much more readable when you separate related classes onto multiple lines, such as:

<h1
  className="
    block
    absolute
    top-1/2 left-1/2
    -translate-x-1/2 -translate-y-1/2
    w-full
    aspect-square
    text-red text-lg
  "
>

Of course this requires quite a bit of manual work from my part, which is ok for me given that it makes everything so much easier to read. I imagine implementing automatic sorting and indenting in this way would be quite a challenge but I just thought I'd throw it out there as a consideration and see if others work this way. It would be incredible if it could be automated. Thanks!

[achan-godaddy]

if you use other frameworks that support multi-line this looks like it already works to some degree, ie:

            <div
              className={`mt-12
                          sm:mt-16
                          lg:col-span-6
                          lg:mt-0`}
            >

the indentation is a bit of extra effort but the sorting at least works. If everything auto indented that would be perfect.

[willhindson]

Thanks for the reply,

I tried out the plugin with my multiline formatting and while sometimes it works on individual lines, more often than not it's inconsistent and bumps some properties seemingly randomly across lines, which is understandable given the complexity, I would imagine.

For my use case, at least, it's probably going to be more hassle than help right now, but I look forward to seeing further developments :)

Extra bonus issue—when using conditional classes in React like this (I certainly wouldn't expect this to be easily parsable 😅

<h2
  className={classNames(
    'block',
    'mb-8 md:mb-16',
    'font-atm text-red text-center text-xxxl leading-none',
    // Only animate when in view
    inView && 'motion-safe:animate-text-morph',
  )}
>
  Title
</h2>

Then of course, the more complex the css, I might choose to break individual properties with, say, 4 different breakpoints onto their own line — difficult to make these kind of decisions automatically I would imagine.

[red-meadow]

We miss this feature very much. From the perspective of our team, multi-line class greatly improves readability (unless your front-end components are too big, which is bad practice anyway). But we can't use the plugin and have to sort classes manually.

For us, the ideal solution would be the following:

1. If class is single-line, sort it in place. Otherwise:
2. Sort classes like now and group them by categories (layout, border, decoration, modifiers, etc.).
3. Put the classes of each category on a new line.
4. If the line length is too big (this should be configured), split the classes of this category into several lines.

[kongmoumou]

Really want this feature~

[Titech8]

hello please i need help, I can't seem to style it with Tailwind.

i have thys problem

Rebuilding...
SyntaxError: Unexpected token, expected "," (14:19)
at unexpected (C:\Users\TITE\PycharmProjects\pythonProject1\logistique\theme\static_src\node_modules\sucrase\dist\parser\traverser\util.js:99:15)
at expect (C:\Users\TITE\PycharmProjects\pythonProject1\logistique\theme\static_src\node_modules\sucrase\dist\parser\traverser\util.js:86:5)
at parseObj (C:\Users\TITE\PycharmProjects\pythonProject1\logistique\theme\static_src\node_modules\sucrase\dist\parser\traverser\expression.js:759:20)
at parseExprAtom (C:\Users\TITE\PycharmProjects\pythonProject1\logistique\theme\static_src\node_modules\sucrase\dist\parser\traverser\expression.js:553:7)
at parseExprSubscripts (C:\Users\TITE\PycharmProjects\pythonProject1\logistique\theme\static_src\node_modules\sucrase\dist\parser\traverser\expression.js:276:20)
2:20)
57:20)
at baseParseMaybeAssign (C:\Users\TITE\PycharmProjects\pythonProject1\logistique\theme\static_src\node_modules\sucrase\dist\parser\traverser\expression.js:142:20)
at tsParseMaybeAssignWithoutJSX (C:\Users\TITE\PycharmProjects\pythonProject1\logistique\theme\static_src\node_modules\sucrase\dist\parser\plugins\typescript.js:1580:45) {
pos: 281,
loc: Loc { line: 14, column: 19 }
}
57:20)
at baseParseMaybeAssign (C:\Users\TITE\PycharmProjects\pythonProject1\logistique\theme\static_src\node_modules\sucrase\dist\parser\traverser\expression.js:142:20)
at tsParseMaybeAssignWithoutJSX (C:\Users\TITE\PycharmProjects\pythonProject1\logistique\theme\static_src\node_modules\sucrase\dist\parser\plugins\typescript.js:1580:45) {
pos: 281,
loc: Loc { line: 14, column: 19 }
}

[Der-Alex]

I think multiline utility classes should also be able in other areas. For example, I have a Vue application where I use @apply in the <style> part:

As you can see, default css values respect the multiline style ( see grid-template-areas ). Unfortunately this does not work for @apply, although it is possible to define the utilities in multiple lines.

This would be a great improvement for readability!