ony3000/prettier-plugin-classnames

Plugin doesn't work for class in astro

BrandenXia opened this issue · 4 comments

BrandenXia commented

Dependency information

"@prettier/sync": "^0.3.0"
"prettier": "^3.1.1"
"prettier-plugin-astro": "^0.12.3"
"prettier-plugin-classnames": "^0.3.1"
"prettier-plugin-merge": "^0.4.0"
"prettier-plugin-tailwindcss": "^0.5.10"

my .prettierrc file

{
  "tailwindConfig": "./tailwind.config.ts",
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": false,
  "bracketSpacing": true,
  "plugins": [
    "prettier-plugin-astro",
    "prettier-plugin-tailwindcss",
    "prettier-plugin-classnames",
    "prettier-plugin-merge"
  ],
  "customAttributes": ["className", "class"],
  "customFunctions": ["classNames"]
}

Steps to reproduce

try to reformat .astro file with those configurations

The current behavior

nothing happened

The expected behavior

create a line break when class or className attribute is too long

ony3000 commented

This plugin and prettier-plugin-merge are currently only supported for JavaScript, TypeScript, and Vue code.

I am also planning to support Astro, but it will take some time to complete. 🙏

BrandenXia commented

Thanks :)

BrandenXia commented

withastro/astro#4029
It seems like some problems still exist with multiline classes in Astro. A workaround is to use curly brackets:

<MyComponent class={`some-tailwind-class another-tailwind-class more-tw-madness
   once-again-tailwind-class more-tailwind-class absolute inset-0
   etc-tailwind-class foo baz bar`}
/>
ony3000 commented

@BrandenXia Finally released as v0.6.0! Check it out! 😄

  • 👍1