Fix esm compatibility for @headlessui/tailwindcss plugin package

[dawnmist]

Currently the @headlessui/tailwindcss package throws errors when imported into an esm project, stating that imports are not permitted inside commonjs files, as documented in the discussion threads:

• https://github.com/tailwindlabs/headlessui/discussions/3036
• https://discord.com/channels/486935104384532500/1142939398028140564

The current @headlessui/tailwindcss npm package distributes its files using the convention .js = esm, .cjs = commonjs. For node/compilers to properly treat the .js files as esm, the package.json needs to also specify that the package "type" is "module". Files ending in .cjs will continue to be treated as commonjs files with that setting. The build script scripts/fix-types.js needed to be renamed to use the .cjs extension so that it continued to be treated as a commonjs script after the package's type was set to module.

When an esm file imports another file, it needs to specify the full filename with extension, so the import of the tailwindcss/plugin in src/index.ts needed to be specified as tailwindcss/plugin.js. Typescript won't automatically add the extension if it was not present when creating the compiled version, so this needed to be specified in the source for it to be present in the distributed version (otherwise it throws file not found errors).

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
headlessui-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 29, 2024 2:16pm
headlessui-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 29, 2024 2:16pm

[robertotcestari]

Guys, can we merge this?

This is preventing me migrating my Remix app to Vite as this plugin won't work because of ESM compatibility.

thanks!

[bcliffor]

This is also preventing me from installing. A merge would be much appreciated.

[nyedidikeke]

@dawnmist 👏🏿 👏🏿 👏🏿 @RobinMalfait Can you assist review and merge, please?

[RobinMalfait]

Hey!

This shouldn't be necessary and there are probably issues with the tools handling the imports. That said, this PR doesn't break things and if they help with your setup then let's merge it!

Note: if you are using Headless UI v2 (React), then we consider this package as deprecated and prefer to use data-* attributes instead. More info: https://github.com/tailwindlabs/headlessui/releases/tag/%40headlessui%2Freact%40v2.0.0

With the availability of the new data-* attributes in v2.0, we've deprecated the @headlessui/tailwindcss package.

We recommend updating to use the new data-* attributes instead. Start by removing this package:

npm remove @headlessui/tailwindcss

Next, replace the ui-* class modifiers with data-[*] modifiers:

  <MenuItem
    as="a"
    href="#"
-   className="ui-active:bg-blue-500 ui-active:text-white"
+   className="data-[active]:bg-blue-500 data-[active]:text-white"
  >
    {*/ ...*/}
  </MenuItem>

Our docs also show these new data attributes. E.g.: https://headlessui.com/react/menu#using-data-attributes

Thanks for the PR!

[RobinMalfait]

I also published a new patch version that includes this change:

https://www.npmjs.com/package/@headlessui/tailwindcss/v/0.2.1

You can install it using: npm install @headlessui/tailwindcss@latest