readable-tailwind/sort-classes: TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))

Thank you @schoero , I did follow your advice on https://github.com/schoero/eslint-plugin-readable-tailwind/issues/41#issuecomment-2151780994 and achieved to set up the plugin in my eslint config.

I'm encountering a strange issue with thee readable-tailwind/sort-classes and Svelte though (Svelte 5 at least).

It seems something like:

<button
  class="justify-center flex gap-2 px-4 py-2 border border-solid text-base
   w-full rounded-md cursor-pointer transition-colors duration-300"
/>

Works fine.

But if I have shorthand props like:

<script lang="ts"> 
  let disabled = true; 
</script>
<button
  class="justify-center flex gap-2 px-4 py-2 border border-solid text-base
   w-full rounded-md cursor-pointer transition-colors duration-300"
  {disabled}
/>

eslint crashes with:

Oops! Something went wrong! :(

ESLint: 9.4.0

TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
Occurred while linting Button.svelte:28
Rule: "readable-tailwind/sort-classes"
    at getLiteralsBySvelteClassAttribute (file:///frontend/node_modules/.pnpm/eslint-plugin-readable-tailwind@1.5.1_eslint@9.4.0_tailwindcss@3.4.4/node_modules/eslint-plugin-readable-tailwind/lib/esm/parsers/svelte.js:15:21)
    at SvelteStartTag (file:///frontend/node_modules/.pnpm/eslint-plugin-readable-tailwind@1.5.1_eslint@9.4.0_tailwindcss@3.4.4/node_modules/eslint-plugin-readable-tailwind/lib/esm/rules/tailwind-sort-classes.js:100:42)
    at ruleErrorHandler (/frontend/node_modules/.pnpm/eslint@9.4.0/node_modules/eslint/lib/linter/linter.js:1115:48)
    at /frontend/node_modules/.pnpm/eslint@9.4.0/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/frontend/node_modules/.pnpm/eslint@9.4.0/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/frontend/node_modules/.pnpm/eslint@9.4.0/node_modules/eslint/lib/linter/node-event-generator.js:297:26)
    at NodeEventGenerator.applySelectors (/frontend/node_modules/.pnpm/eslint@9.4.0/node_modules/eslint/lib/linter/node-event-generator.js:326:22)
    at NodeEventGenerator.enterNode (/frontend/node_modules/.pnpm/eslint@9.4.0/node_modules/eslint/lib/linter/node-event-generator.js:340:14)
    at runRules (/frontend/node_modules/.pnpm/eslint@9.4.0/node_modules/eslint/lib/linter/linter.js:1154:40)

My eslint.config.js

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import svelteParser from 'svelte-eslint-parser';
import eslintPluginReadableTailwind from 'eslint-plugin-readable-tailwind';
import eslintConfigPrettier from 'eslint-config-prettier';
import eslintParserTypeScript from '@typescript-eslint/parser';
export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  eslintConfigPrettier,
  {
    files: ['**/*.{ts,tsx,cts,mts}'],
    languageOptions: {
      parser: eslintParserTypeScript,
      parserOptions: {
        project: true
      }
    }
  },
  {
    files: ['**/*.svelte', '*.svelte'],
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        parser: eslintParserTypeScript,
        sourceType: 'module',
        ecmaVersion: 2023,
        extraFileExtensions: ['.svelte']
      }
    },
    plugins: {
      'readable-tailwind': eslintPluginReadableTailwind
    },
    rules: {
      ...eslintPluginReadableTailwind.configs.warning.rules,
      ...eslintPluginReadableTailwind.configs.error.rules,
      'readable-tailwind/no-unnecessary-whitespace': 'off'
    }
  });

My package.json:

{
  "name": "frontend",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
    "lint": "eslint .",
  },
  "devDependencies": {
    "@eslint/js": "^9.4.0",
    "@sveltejs/adapter-auto": "^3.0.0",
    "@sveltejs/kit": "^2.0.0",
    "@sveltejs/vite-plugin-svelte": "^3.0.0",
    "@types/eslint": "^8.56.10",
    "@types/eslint__js": "^8.42.3",
    "@typescript-eslint/eslint-plugin": "^7.12.0",
    "@typescript-eslint/parser": "^7.12.0",
    "autoprefixer": "^10.4.19",
    "eslint": "^9.4.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-readable-tailwind": "^1.5.1",
    "eslint-plugin-svelte": "^2.39.0",
    "postcss": "^8.4.38",
    "prettier-plugin-svelte": "^3.2.3",
    "svelte": "^5.0.0-next.121",
    "svelte-check": "^3.6.0",
    "svelte-eslint-parser": "^0.36.0",
    "sveltekit-superforms": "^2.13.1",
    "tailwindcss": "^3.4.3",
    "tslib": "^2.4.1",
    "typescript": "^5.4.5",
    "typescript-eslint": "^7.12.0",
    "vite": "^5.0.3",
    "zod": "^3.23.8"
  },
  "type": "module",
  "dependencies": {
    "@auth/core": "^0.31.0",
    "@auth/sveltekit": "^1.1.0",
    "sveltekit-i18n": "^2.4.2"
  }
}

Is there something I may be missing in the config? :thinking:

schoero / eslint-plugin-readable-tailwind

readable-tailwind/sort-classes: TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator)) #42