Support for callback syntax

[tiberiu-matei]

Hey, this extension is a game changer. Would be great to have support for fn syntax.

Dependency information

VSC 1.86.2
"@headlessui/react": "1.7.18",
"prettier": "3.1.0",
"prettier-plugin-classnames": "0.6.1",
"prettier-plugin-merge": "0.6.0",
"prettier-plugin-tailwindcss": "0.5.7",

Steps to reproduce

import { Combobox } from "@headlessui/react"

export default function ClassNameCb() {
    return (
        <Combobox.Option
            className={({ active }) =>
                `relative cursor-default select-none py-2 pl-10 pr-4 ${
                    active
                        ? "bg-teal-600 text-white"
                        : "text-gray-900"
                }`
            }
            value={"test"}
        ></Combobox.Option>
    )
}

The current behavior

Error: The second format failed. This is likely a bug in this plugin. Please file an issue.

[ony3000]

Hello! Thanks for reporting the issue!

After examining the given code, I have determined that the issue is related to nested expressions in template literals.

The callback syntax itself works fine, and until this issue is fixed, you can work around it like this:

import { Combobox } from "@headlessui/react"

export default function ClassNameCb() {
    return (
        <Combobox.Option
            className={({ active }) =>
                active
                    ? "relative cursor-default select-none py-2 pl-10 pr-4 bg-teal-600 text-white"
                    : "relative cursor-default select-none py-2 pl-10 pr-4 text-gray-900"
            }
            value={"test"}
        ></Combobox.Option>
    )
}

[tiberiu-matei]

Thanks, seems like something like this works as well

className={({ active }) =>
    cls(
        "relative cursor-default select-none py-2 pl-10 pr-4",
        active
            ? "bg-teal-600 text-white"
            : "text-gray-900",
    )
}

[ony3000]

@tiberiu-matei Hey, v0.6.2 has been released, check it out!