Repository: francoismassart/eslint-plugin-tailwindcss (js)

Issue:
[BUG] classnames-order quick fix breaks indentation and sorting on multiline strings
**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:
``` tsx
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
``` tsx
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
```tsx
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:
![image](https://user-images.githubusercontent.com/5807561/133922434-1c852e9b-ac90-486a-bf13-6546b01f9b7e.png)
After:
![image](https://user-images.githubusercontent.com/5807561/133922441-bf2226c7-dff5-4633-bf8c-8efa138b12e5.png)

**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:
![image](https://user-images.githubusercontent.com/5807561/133922293-5a795b26-6a39-4cc5-860b-8ae1d28833f6.png)
After fix:
![image](https://user-images.githubusercontent.com/5807561/133922311-3c3e1ed8-020c-45be-af90-4a74b33a331d.png)


**eslint config file or live demo**
<details>
  <summary>eslintrc</summary>
  
  ```json5
{
    "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
          }
    }
}

  ```
  
</details>

Pull request:
fix: trailing spaces
Fixes #52

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

- [x] Tested via `tests/lib/rules/classnames-order.js`


Patch:
diff --git a/lib/util/attr.js b/lib/util/attr.js
index 73b1999..1036f0a 100644
--- a/lib/util/attr.js
+++ b/lib/util/attr.js
@@ -36,8 +36,8 @@ function getClassNamesFromAttribute(attrVal) {
     return classNames;
   }
   if (isSingleLine(attrVal)) {
-    // Fix multiple spaces
-    attrVal = attrVal.replace(/\s{2,}/g, ' ');
+    // Fix multiple spaces + trim
+    attrVal = attrVal.replace(/\s{2,}/g, ' ').trim();
     classNames = attrVal.split(' ');
   } else {
     classNames = attrVal.split('\n');


Test patch:
diff --git a/tests/lib/rules/classnames-order.js b/tests/lib/rules/classnames-order.js
index ad3deb6..1d8a903 100644
--- a/tests/lib/rules/classnames-order.js
+++ b/tests/lib/rules/classnames-order.js
@@ -39,6 +39,9 @@ ruleTester.run("classnames-order", rule, {
     {
       code: `<div class='box-content lg:box-border'>Simple quotes</div>`,
     },
+    {
+      code: `<div class="space-y-0.5 ">Extra space at the end</div>`,
+    },
     {
       code: `<div class="p-4 rounded sm:p-6 sm:rounded-lg lg:p-8 lg:rounded-2xl">groupByResponsive</div>`,
       options: [
@@ -161,6 +164,11 @@ ruleTester.run("classnames-order", rule, {
       output: `<div class="container w-12 sm:w-6">Classnames will be ordered</div>`,
       errors: errors,
     },
+    {
+      code: `<div class="   flex  space-y-0.5   ">Extra spaces</div>`,
+      output: `<div class="flex space-y-0.5">Extra spaces</div>`,
+      errors: errors,
+    },
     {
       code: `<div class="sm:py-5 p-4 sm:px-7 lg:p-8">Enhancing readability</div>`,
       output: `<div class="p-4 lg:p-8 sm:py-5 sm:px-7">Enhancing readability</div>`,