[FEATURE] Multi-line classes

[TonisPiip]

Using tailwind in django templates, so there's a lot of classes. It's easier to keep them broken into several lines for easier readability.

<a
  href="foo"
  class="
    inline-flex items-center p-4
    bg-white hover:bg-gray-200
    text-sm font-medium text-gray-500 hover:text-gray-700
  ">

Currently djlint will want to put all of the classes into a single massive class string.
Can we get a config rule to not remove class newlines?

[christopherpickering]

Good idea, prettier keeps them all in one chunk as well, and it also gets on my nerves when they are so long.

[wgordon17]

This would be such a quality of life improvement! 🙌

[christopherpickering]

@TonisPiip @wgordon17
Hey, thanks for this. I'm thinking on doing one of several things. Can you let me know what you'd prefer?

I will add one new flag that will do one of the following:

1. break classes when max line length is hit
2. single class per line
3. cluster x# of classes and then line break (for example, 3 classes per line etc)

or a better idea?

I don't think keeping existing line breaks will be an option here.

Some examples:

1

max line 120:
<a
  href="foo"
  class="
    inline-flex items-center p-4 another class something inline-flex items-center p-4 another class something something
    bg-white hover:bg-gray-200 blah blah ok another class bg-white hover:bg-gray-200 blah blah ok another class asdf
    text-sm font-medium text-gray-500 hover:text-gray-700 text-sm font-medium text-gray-500 hover:text-gray-700
  ">

2

this is a mess
<a href="foo"
   class="
    inline-flex
    items-center
    p-4
    another
    class
    something
    inline-flex
    items-center
    p-4
    another
    class
    something
    something">

3

this is maybe cool

three classes per line
<a
  href="foo"
  class="
    inline-flex items-center p-4
    another class something 
    inline-flex items-center p-4 
    another class something 
    something bg-white hover:bg-gray-200 
    blah blah ok
    another class bg-white
    hover:bg-gray-200 blah blah
    ok another class
    asdf text-sm font-medium
    text-gray-500 hover:text-gray-700 text-sm
    font-medium text-gray-500 hover:text-gray-700
  ">

3 also lets us do # 2 :)

[TonisPiip]

Hmmm... none of the above?

1. Kinda OK, but doesn't allow grouping by
2. Jesus Christ no, that's too much
3. Looks the best, but the still doesn't preserve the grouping that the developer wrote.

Can we just preserve the user chosen number and placement of linebreaks, and just indent them to match?

so

<a
  href="foo"  class="flex items-center p-4
                   bg-white hover:bg-gray-200
                   text-sm font-medium text-gray-500 hover:text-gray-700">

->

<a
  href="foo" 
  class="flex items-center p-4
         bg-white hover:bg-gray-200
         text-sm font-medium text-gray-500 hover:text-gray-700"
> 

[christopherpickering]

That works for organized developers, but what about messy guys like me who just copy and paste junk and hope it gets formatted? 😁

[aalekseev]

Maybe if we sort them and group by letter? Something like if I have class="px-12 bg-white grid border gap-2 ml-12 pl-2" it would do. I do think that as like this it is a bit too dependent on the tailwind conventions 😅

class="bg-white border
       gap-2 grid
       ml-12
       pl-2 px-12"

[christopherpickering]

@aalekseev cool idea 🚀 but yeah probably too tailwindy... we must be getting closer to the answer tho

[TonisPiip]

I like the sorting, by alpha, but that's very TW dependtant, and should be an optional option.

But if we're talking about things which aren't classes, just any multi-line attrebute, I suspect that indentation isn't going to effect anything, but putting things into multiple lines at "random" places might. For example when using hyperscript.

I feel that the native approach (or a bool in config) should be that is doesn't remove or add \ns in tag attributes, just indents them to the same level of the tag key (class or _ or whatever)

And once that's done, things will look pertty normal, even if it's a messy copy-paste. And if we want, we can have another option which is just for class that can have "max-len, max num, sorted" options.

[TonisPiip]

I feel this linter/formater doesn't need to be black levels of unflexable opinionated formating, as we already have options for if newlines should be after an {% endblock %} for example.

That reminds me, there should be an option (or by default) that if there's a {% block %} in a attribute, it shouldn't add the newline, makes things quite funky, which is also kinda related to this, newlines inside values should be considered part of the value, other whitespace... not so much.

[wgordon17]

IMO, I think it feels more natural to match other configuration options, which are line-length based (max_attribute_length and max_line_length).

Also, having a break after X number of classes might cause issues, especially with some classes potentially being insanely long 😱

[christopherpickering]

@wgordon17 you are sugesting no new config option, just starting to wrap classes that are over the max attribute length/line length?

[wgordon17]

Well, that's an option...but I really just meant matching the existing configuration concept. I.e., create a max_class_length (or something) that clips/wraps based on line length.

[TonisPiip]

max_attribute_length and max_line_length are both good, but the core of this issue is to preserve (and indent) multi line class values without wrecking them.

[firdaus-aziz]

hyperscript

Glad I'm not the only one having problem with how DjLint is formatting HyperScript.

This is how I write my Hyperscript (in data-script) and wish it to be preserved

<button type="button"
        class="btn btn-light"
        data-script="on click 
                     remove .d-none .d-md-block from #nav 
                     then add .d-none .d-md-block to #main 
                     then add .d-none to #header">
    show nav
</button>

This is currently how its being formatted. FYI using Vscode with DjLint extension.

<button type="button"
        class="btn btn-light"
        data-script="on click remove .d-none .d-md-block from #nav then add .d-none .d-md-block to #main then add .d-none to #header">
    show nav
</button>

[christopherpickering]

Hey, following back up this.

I'm thinking I will add 2 flags:

1. --preserve-attribute-breaks
2. not sure yet... something about max elements/line... tbd if more ppl comment here. I will leave the issue open for that.