Incorrect line wrapping when string templating

[Vanja-S]

Hi!

I get this weird warning when formatting class names which act as a string template:

<button
      onClick={toggle}
      className={`
        rounded-md p-2
        hover:bg-gray-100
        ${className || ''}
      `}
      aria-label="Toggle sidebar"
    >
...

produces the warning:

[{
	"resource": "/src/components/BurgerMenu.tsx",
	"owner": "eslint",
	"code": {
		"value": "readable-tailwind/multiline",
		"target": {
			"$mid": 1,
			"path": "/schoero/eslint-plugin-readable-tailwind/blob/main/docs/rules/multiline.md",
			"scheme": "https",
			"authority": "github.com"
		}
	},
	"severity": 4,
	"message": "Incorrect line wrapping. Expected\n\n`↩\r↵\n········rounded-md·p-2↩\r↵\n········hover:bg-gray-100↩\r↵\n········${\n\nto be\n\n`↵\n········rounded-md·p-2↵\n········hover:bg-gray-100↵\n········${",
	"source": "eslint",
	"startLineNumber": 12,
	"startColumn": 18,
	"endLineNumber": 15,
	"endColumn": 11,
	"modelVersionId": 10
}]
and
[{
	"resource": "/src/components/BurgerMenu.tsx",
	"owner": "eslint",
	"code": {
		"value": "readable-tailwind/multiline",
		"target": {
			"$mid": 1,
			"path": "/schoero/eslint-plugin-readable-tailwind/blob/main/docs/rules/multiline.md",
			"scheme": "https",
			"authority": "github.com"
		}
	},
	"severity": 4,
	"message": "Incorrect line wrapping. Expected\n\n}↩\r↵\n······`\n\nto be\n\n}↵\n······`",
	"source": "eslint",
	"startLineNumber": 15,
	"startColumn": 26,
	"endLineNumber": 16,
	"endColumn": 8,
	"modelVersionId": 10
}]

I have to note that I do have auto-format on save, which means the autoformatter yields this warning. Any idea?

My eslint.config.mjs:

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
import eslintPluginReadableTailwind from "eslint-plugin-readable-tailwind";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: true,
  eslintRecommended: true,
});

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript", "plugin:react/recommended"),
  {
    plugins:{
      "readable-tailwind": eslintPluginReadableTailwind
    },
    rules: {
      "react/prop-types": "off",
      "react/react-in-jsx-scope": "off",
      "quotes": ["error", "single"],
      // enable all recommended rules to warn
      ...eslintPluginReadableTailwind.configs.warning.rules,
      // enable all recommended rules to error
      ...eslintPluginReadableTailwind.configs.error.rules,

      // or configure rules individually
      "readable-tailwind/multiline": ["warn", { printWidth: 100 }]
    },
  },
];

export default eslintConfig;

[schoero]

It looks like you use windows style line breaks in your code editor while the plugin is set to produce unix style line breaks by default.
Change the lineBreakStyle to "windows".

{
  // ...
  "readable-tailwind/multiline": ["warn", { "printWidth": 100, "lineBreakStyle": "windows" }]
  // ...
}

[Vanja-S]

That does it!