100phlecs / tailwind_formatter

Sorts tailwind classes within elixir projects
https://hexdocs.pm/tailwind_formatter
MIT License
111 stars 11 forks source link

Classlist is formatted as one line #44

Closed rmand97 closed 11 months ago

rmand97 commented 12 months ago

With the new 0.4.0 version, classlists are formatted to one line like so:

From:

 def button(%{variant: :gray} = assigns) do
    ~H"""
    <button
      type={@type}
      class={[
        "phx-submit-loading:opacity-75 rounded-lg disabled:pointer-events-none disabled:opacity-80 flex items-center justify-center border border-gray-300 bg-gray-200 text-gray-700",
        "text-sm hover:bg-gray-300 active:bg-gray-300 px-4 py-[10px]",
        @class
      ]}
      {@rest}
    >
      <%= render_slot(@inner_block) %>
    </button>
    """
  end

To:

def button(%{variant: :gray} = assigns) do
    ~H"""
    <button
      type={@type}
      class={["flex items-center justify-center rounded-lg border border-gray-300 bg-gray-200 text-gray-700 disabled:pointer-events-none disabled:opacity-80 phx-submit-loading:opacity-75", "py-[10px] px-4 text-sm hover:bg-gray-300 active:bg-gray-300", @class]}
      {@rest}
    >
      <%= render_slot(@inner_block) %>
    </button>
    """
  end

This makes it harder to read, when there is a lot of classes. BTW i love the new features!

aptinio commented 12 months ago

@rmand97, please check in your .formatter.exs that Phoenix.LiveView.HTMLFormatter comes after TailwindFormatter, like so:

plugins: [TailwindFormatter, Phoenix.LiveView.HTMLFormatter]