[BUG] classnames-order quick fix breaks indentation and sorting on multiline strings

[RomanKornev]

Describe the bug
After applying quick fix, the multiline classnames at still not sorted and now have indentation issues

To Reproduce
Steps to reproduce the behavior:

1. Invalid Tailwind CSS classnames order:

import ctl from '@netlify/classnames-template-literals'

export const ButtonType = {
    primary: ctl(
        `hover:bg-purple-600 rounded-full py-1 text-sm font-semibold 
        border border-purple-200 text-purple-600 bg-white 
        px-4 hover:text-white`
    ),
}

2. Apply quick fix
3. See

export const ButtonType = {
    primary: ctl(
        `        px-4 hover:text-white
hover:bg-purple-600 rounded-full py-1 text-sm font-semibold 
        border border-purple-200 text-purple-600 bg-white `
    ),
}

4. The first line now has additional indentation while second line doesn't have any
5. Classnames are still not sorted

Expected behavior
Order classnames as a whole first, then preserve the number of items per line

export const ButtonType = {
    primary: ctl(
        `py-1 px-4 text-sm font-semibold text-purple-600 
        hover:text-white bg-white hover:bg-purple-600 rounded-full
        border border-purple-200`
    ),
}

Screenshots
Before:

After:

Environment (please complete the following information):

• OS: WSL Ubuntu 20.04 on Win 10 x64
• Softwares + version used:
  • VSCode 1.60.1
  • npm v7.24.0
  • node v16.9.1

Additional context
Also, a single space at the end is triggering invalid order as well
Before:

After fix:

eslint config file or live demo

eslintrc

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
      "ecmaVersion": 2021,
      "sourceType": "module"
  },
  "plugins": [
      "import",
      "@typescript-eslint",
      "react-hooks",
      "prettier",
      "classnames",
      "tailwindcss"
  ],
  "extends": [
      "react-app",
      "plugin:import/errors",
      "plugin:import/warnings",
      "plugin:import/typescript",
      "plugin:react/recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:prettier/recommended",
      "plugin:tailwindcss/recommended"
  ],
  "rules": {
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn",
      "react/prop-types": "off",
      "react/self-closing-comp": ["warn", {
          "component": true,
          "html": true
      }],
      "@typescript-eslint/explicit-module-boundary-types": "off",
      "prettier/prettier": [
          "warn",
          {
              "printWidth": 100
          }
      ]
  },
  "overrides": [{
      "files": ["*.ts"],
      "rules": {
          "@typescript-eslint/explicit-module-boundary-types": ["error"]
      }
  }],
  "settings": {
      "react": {
          "pragma": "React",
          "version": "detect"
      },
      "import/resolver": {
          "node": {
              "extensions": [".js", ".jsx", ".ts", ".tsx"],
              "moduleDirectory": ["node_modules", "src/"]
          }
      },
      "tailwindcss": {
          "groupByResponsive": true
        }
  }
}

[francoismassart]

Hi @RomanKornev,
I would recommend to either use a single line for all classnames or one classname per line.

Mixing both could be very tricky to handle (but anyone is welcome to contribute to the plugin 😉 )

For the single space at the end of a single line, I'll fix this soon.

[saibotk]

Actually i ran into this problem too, maybe we should still keep track of this as an issue / feature request?

Since people often use the vue-eslint rule or others that suggest a max line length, so we would need to split those class definitions.

And for the time being, maybe we should put a note to the README, that currently multiline class definitions are not supported.

What do you think @francoismassart ?

Example:

<MenuItems
  class="bg-white ring-1 ring-black ring-opacity-5 focus:outline-none
          origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1"
>

PS: It also still messes up indentation of consecutive lines as in the example above, it just added extra indentation to the second line when applying the auto-fix. Maybe this should also be tracked as another issue, to at least make it usable in such an environment.

[francoismassart]

It gets really tricky do it because I cannot guess the intention of the multiline:

• Max length ?
• Organisation ?
• Per subject ?

Plus, the focus of the rule is re-ordering not formatting.

I would recommend to use ctl like this: (not sure, if it's valid)

<MenuItems
  :class="ctl(`
           bg-white
           ring-1
           ring-black
           ring-opacity-5
           focus:outline-none
           origin-top-right
           absolute
           right-0
           mt-2
           w-48
           rounded-md
           shadow-lg
           py-1
         `)"
>

This way:

• no maxLength issue
• will be compiled to a single line
• easy to read vertically
• can be collapsed for reducing scrolling

[saibotk]

While i understand that this as a whole might be out of scope kt would still be nice to get the indentation stuff fixed as a first step. So that just running autofix in such a project does not add or remove indentation on new lines.