Modifier order issue: variants before arbitrary not selectors fail to apply styles

[ItaiYosephi]

What version of Tailwind CSS are you using?

For example: v3.4.17

What build tool (or framework if it abstracts the build tool) are you using?

For example: postcss" 8.5.3, Vite 6.3.5/7.0.0

What version of Node.js are you using?

For example: v22.11.0

What browser are you using? Chrome

What operating system are you using?

macOS

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-tzng15gi?file=index.html,src%2FApp.tsx

Describe your issue

When using Tailwind CSS with custom variants and arbitrary selectors, there's an issue with the order of modifiers affecting whether styles are applied correctly.

Specifically, when a variant like focus-visible: or hover: is placed before an arbitrary selector that contains :not(), the styles don't get applied.

Working example:

<div data-focus-visible="true" className='[&:not([aria-selected="true"])]:focus-visible:bg-red-500'>
  working
</div>

Non-working examples:

<div data-focus-visible="true" className='focus-visible:[&:not([aria-selected="true"])]:bg-red-500'>
  not working
</div>

<div className='hover:[&:not([aria-selected="true"])]:bg-red-500'>
  also not working
</div>

This appears to be related to how the CSS selectors are generated and composed when variants are applied in different orders. The issue occurs with custom variants (like my implementation of focus-visible) as well as built-in variants like hover:.

IntelliSense's hover preview does get it right though:

Expected behavior

Both ordering approaches should work and apply the styles correctly, regardless of whether the variant is placed before or after the arbitrary selector.