Class ordering not working in Liquid Capture

[ghost]

What version of prettier-plugin-tailwindcss are you using?

v^1.0.5

What version of Tailwind CSS are you using?

v^3.2.4

What version of Node.js are you using?

v16.14.0

What package manager are you using?

npm

What operating system are you using?

macOS

Describe your issue

The issue speaks for itself. The class ordering simply isn't working in a capture in a .liquid file.

{% comment %} Working {% endcomment %}
<div class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">
</div>

{%- comment -%} Not working {%- endcomment -%}
{%- capture class_ordering -%}
  <div class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">
  </div>
{%- endcapture -%}

---

.prettierrc

{
  "htmlWhitespaceSensitivity": "css",
  "plugins": ["@shopify/prettier-plugin-liquid", "prettier-plugin-tailwindcss"],
  "pluginSearchDirs": false,
  "overrides": [
    {
      "files": ["*.liquid"],
    }
  ]
}

---

I'm not really sure if this is related to this plugin or @shopify/prettier-plugin-liquid. But would be nice if someone can explain why it isn't working or that I should open a issue on @shopify/prettier-plugin-liquid

Thanks in advance!

[thecrypticace]

Sorry for the wait — I've merged and published v0.2.5 with the fix for this!

You can upgrade by running: npm install prettier-plugin-tailwindcss@latest

[ghost]

Hi @thecrypticace,

No problem!

We are unfortunately still having problems with the class ordering in a capture. Take a look at the following liquid code:

{%- capture variable -%}
  <div class="md:text-lg text-sm">
    Not working
  </div>
  <div class="md:text-lg text-sm">
    Not working
  </div>
  <div class="text-sm md:text-lg">
    Working
  </div>
{%- endcapture -%}

It seems that only the last class in the capture is being reordered. Even if you nest elements.

{%- capture variable -%}
  <div class="md:text-lg text-sm">
    Not working
  </div>
  <div class="md:text-lg text-sm">
    Not working
  </div>
  <div class="md:text-lg text-sm">
    Not working
    <div class="text-sm md:text-lg">
      Working
    </div>
  </div>
{%- endcapture -%}

Could you please reopen and look into this issue? :)

Thanks!

[thecrypticace]

@stijn-code Hey, we've set up insiders builds for the prettier plugin so this can be tested before we tag another release. I've tested it myself and it seems to work as I'd expect but would love if you could install the new build and take a look:

npm install prettier-plugin-tailwindcss@insiders

Please let me know if you see any other issues with it. If not I'll tag a new release. Thanks! ✨

[ghost]

Hi @thecrypticace,

At first it didn't work, but we found out that we had to restart VS Code after the install. The class ordering works now, but we don't have a new problem.

Example

This:
<p class="gift-card__label badge {{ settings.sold_out_badge_color_scheme | prepend: 'badge--' }} ">

Becomes:
<p class="gift-card__label badge {{ settings.ssold_out_badge_color_schemee | prepend:badge----' ">

As you can see, sold now has a double "s" and scheme has a double "e". In addition, the prepend should be prepend: 'badge--'. Also it should close with }}.

This only happens since the insider release.

Hopefully this is just as simple and quick fix :)

[ghost]

Hi @thecrypticace,

Any updates on this?

[thecrypticace]

@stijn-code Apologies! We've been busy getting v3.3 out the door. I plan to look at this either either tomorrow or Friday.

[thecrypticace]

Re-opening so I don't lose track.

[thecrypticace]

@stijn-code Okay we'll have another insiders build out in a few minutes. It was, of course, and off-by-one error of all things.

Please let me know if things look good to you and I'll do a release tomorrow sometime (if I remember to — otherwise Monday).

[ghost]

Hi @thecrypticace,

I see that it's merged back to the main but hasn't been release yet. Any update on a release date?

Sorry for the pressure, but we're going to start with some serious big projects 🚀

[thecrypticace]

@stijn-code v0.2.7 has been published! Sorry for the wait!

[ghost]

Hi @thecrypticace,

It's working perfectly now! I still have one more question tho...

I'm doing a prettier check and it warns me about a few .scss files, because to order of e.g. margins and insets are ordered differently now?

Example
py-3 px-4 becomes px-4 py-3

Not that it's breaking, but I want to clarify this to my team.

Thanks!