Wrong formatting

[u3u]

1. Grouping with only arbitrary attributes

const Content = tw.div`[h1,h2,h3,h4,h5,h6]:([font-size:revert] [font-weight:revert])`
// ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
const Content = tw.div`[h1,h2,h3,h4,h5,h6]:[font-size:revert] [font-weight:revert]`
// ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
const Content = tw.div`[font-weight:revert] [h1,h2,h3,h4,h5,h6]:[font-size:revert]`

2. Multiple :nth-child selectors on the same line

const Test = tw.div`[:nth-child(2)]:(-translate-x-1.5 translate-y-1.5) [:nth-child(3)]:(-translate-x-3 translate-y-3)`
// ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
const Test = tw.div`[:nth-child(2)]:(-translate-x-1.5 translate-y-1.5) nth-child(3)]:(-translate-x-3 translate-y-3)`
// ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
const Test = tw.div`nth-child 3 ] ) translate-y-3 :(-translate-x-3 [:nth-child(2)]:(-translate-x-1.5 translate-y-1.5)`

[wottpal]

@mohammadsiyou any idea about how to fix this?

(btw this is a dope plugin, just discovered it today 🔥)

[wottpal]

@mohammadsiyou I've found another one related to styling data attributes. Would be great to get this sorted out quickly :)

Makes this (great) plugin unusable for us at the moment, unfortunately.

data-[state=open]:(border-green-500) ✅
// ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
data-[state=open] :(border-green-500) ❌

[mohammadsiyou]

@u3u @wottpal Sorry for late update! New version released and reported bugs fixed:)

[wottpal]

Hey @mohammadsiyou, thank you so much for revisiting this one :)

Unfortunately, after the update, a lot of prettier errors are thrown now:

basis-[45%]
Error: An ending bracket ')' wasn’t found for these classes:

or something more complex:

[:not([data-state='active'] &)]:hidden
Error: An ending bracket ')' wasn’t found for these classes:

So I basically can't use it. 🙈

In a separate environment though, my case (https://github.com/mohammadsiyou/prettier-plugin-twin.macro/issues/1#issuecomment-1358359266) seems to work now. 🥳

[mohammadsiyou]

@wottpal New version is released and bugs are fixed.

[wottpal]

Amazing, @mohammadsiyou! It's almost working error-free for me. Right now, this seems to be the only case (when grouping !importants) that throws an error:

!(w-full grow justify-start justify-between rounded-none py-9 text-red-500 text-lg)
// ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
(w-full! ) grow justify-start justify-between rounded-none py-9 text-red-500 text-lg

[mohammadsiyou]

@wottpal Group important issue is fixed.