[Prettier Plugin] Possible to sort classes in Shopify Liquid parameters?

[selvinkuik]

Hey guys, I have a question about sorting classes using prettier-plugin-tailwindcss. Take this example code which renders an image tag using Liquid and applies some classes:

{{
  section.settings.primary_image
  | image_url: width: section.settings.primary_image.width
  | image_tag: class: 'object-cover size-full md:mt-0 mt-5'
}}

Is there a .prettierrc setting that can get the plugin to sort the classes passed in as a parameter?

[Samielakkad]

There is no current .prettierrc option that makes prettier-plugin-tailwindcss treat a Shopify Liquid filter named argument such as image_tag: class: '...' as a class attribute.

The plugin's configurable targets are:

• tailwindAttributes for actual markup attributes;
• tailwindFunctions for JavaScript/TypeScript-style function calls.

Your string is neither in the Liquid AST: it is a string value attached to the class named argument of the image_tag filter. Adding "class" to tailwindAttributes will not change that node type.

The supported options are documented here:
https://github.com/tailwindlabs/prettier-plugin-tailwindcss#sorting-non-standard-attributes

Make sure the two plugins are at least configured in the supported order:

{
  "plugins": [
    "@shopify/prettier-plugin-liquid",
    "prettier-plugin-tailwindcss"
  ]
}

prettier-plugin-tailwindcss must be last. That enables its Shopify Liquid compatibility for class attributes, but it still does not extend sorting into Liquid filter arguments.

For now the choices are to keep that argument manually ordered:

| image_tag: class: 'size-full object-cover mt-5 md:mt-0'

or propose support in tailwindlabs/prettier-plugin-tailwindcss with this exact snippet as a formatter fixture. The implementation would need to recognize a Liquid named argument whose name is class and pass its static string value through the same class sorter; this cannot be expressed through existing configuration alone.