Data attributes for CSS-only state styling broken in v1.7.8

[ramonwenger]

What package within Headless UI are you using?

@headlessui/vue
@headlessui/tailwindcss

What version of that package are you using?

@headlessui/vue: 1.7.8
@headlessui/tailwindcss: 0.1.3

What browser are you using?

Firefox

Reproduction URL

Non-working example: https://codesandbox.io/p/sandbox/infallible-noyce-g43sfp
Working example: https://codesandbox.io/p/sandbox/determined-lamarr-k36cf6

Describe your issue

Version 1.7.8 of @headlessui/vue broke the data attributes introduced in 1.7. Before, as of 1.7.7, the plugin would generate the following code:

<div data-headlessui-state="checked"
  class="relative flex cursor-pointer rounded-lg px-5 py-4 shadow-md focus:outline-none ui-active:ring-2 ui-active:ring-white ui-active:ring-opacity-60 ui-active:ring-offset-2 ui-active:ring-offset-sky-300 ui-checked:bg-sky-900 ui-checked:bg-opacity-75 ui-checked:text-white ui-not-checked:bg-white"
  id="headlessui-radiogroup-option-3" role="radio" aria-checked="true" tabindex="0" aria-labelledby="headlessui-label-4"
  aria-describedby="headlessui-description-5">
 <!-- ... -->
</div>

Note the data-headlessui-state="checked" attribute here.
After upgrading to v1.7.8 (and later versions), the code generated will be this:

<div
  class="relative flex cursor-pointer rounded-lg px-5 py-4 shadow-md focus:outline-none ui-active:ring-2 ui-active:ring-white ui-active:ring-opacity-60 ui-active:ring-offset-2 ui-active:ring-offset-sky-300 ui-checked:bg-sky-900 ui-checked:bg-opacity-75 ui-checked:text-white ui-not-checked:bg-white"
  id="headlessui-radiogroup-option-3" role="radio" aria-checked="true" tabindex="0" aria-labelledby="headlessui-label-4"
  aria-describedby="headlessui-description-5">
<!-- ... -->
</div>

Now the data-headlessui-state attribute is missing completely.
This breaks styling depending upon these data properties, namely the one described at multiple locations in the documentation:

If you are using Tailwind CSS, you can use the @headlessui/tailwindcss plugin to target this attribute with modifiers like ui-open:* and ui-active:*:

Specifically, the commit breaking the functionality is d874e561a1ec4ac65250d76a40cc979cf6983acc , even more specifically, the code replacing the old call to cloneVNode. I found this out by bisecting and testing. I don't know what the correct fix would be though. Maybe @RobinMalfait (or someone else familiar with the code in there) could give some pointers to what needs to be done, then I could even write a PR.

[thecrypticace]

Heh… oops. Thanks for reporting this one.

This should be fixed by #2767, and will be available in the next release.

You can try it using our insiders build — this may take a few before it's build and published to NPM:

• npm install @headlessui/vue@insiders

[ramonwenger]

Amazing, thank you for the quick fix and also the note on the insiders build, @thecrypticace!