lukeed/clsxPublic

A tiny (239B) utility for constructing `className` strings conditionally.

Tailwind regex flags unreachable paths

WS

will-stone opened 路

Hi Luke 馃憢

Please excuse my lack of regex knowledge. The Tailwind set-up instruction currently flags items in nested ternaries as conflicting, even though the logic paths are unique. Here's an example where a different `size` prop results in different class strings resulting in different sized text:

<img width="823" alt="image" src="https://github.com/lukeed/clsx/assets/654103/658c60fa-37b3-492c-b415-fb84f592d01b">

I'm guessing this is something that any amount of regex-fu isn't going to solve as it's runtime logic.

We chose to use nested ternaries because the string concat is much faster than array/object notation. It also means conditionals stop being checked as soon as the first passing condition is reached.

Would love to hear your thoughts 馃槃

Thanks,

Will.

  1. WR
    writeens

    @will-stone I encountered the same issue. I found this regex [here](https://github.com/paolotiu/tailwind-intellisense-regex-list#clsx) ```JSON "tailwindCSS.experimental.classRegex": [ ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"] ] ```

    Its only slightly different but it gets rid of the css conflict.

    Hope this helps

  2. will-stonementioned3 years ago on GitHub

  3. will-stonesubscribed3 years ago on GitHub

  4. WS
    will-stone
    Author

    Thanks @writeens Mine seems to be working fine without any regex now, but good to know I can use this if I have any issues 馃憤

  5. will-stoneclosed3 years ago on GitHub

  6. writeensmentioned3 years ago on GitHub

  7. writeenssubscribed3 years ago on GitHub