Janeene Beeforth
3905be67a9
* Set @headlessui/tailwindcss module type The distributed tailwindcss plugin package uses `.js` for esm files, and `.cjs` for commonjs files. This corresponds to `"type": "module"` in the package.json file. One build script `fix-types.js` was a commonjs script which was breaking this module file naming pattern. Renamed the script to `fix-types.cjs` so that we could then standardise the module type for @headlessui/tailwindcss package as a whole. * Fix esm import of tailwindcss/plugin ESM imports need to specify the filename extension when importing individual files. * update changelog --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import plugin from 'tailwindcss/plugin.js'
|
|
|
|
interface Options {
|
|
/**
|
|
* The prefix used for the variants. This defaults to `ui`.
|
|
*
|
|
* Usage example:
|
|
* ```html
|
|
* <div class="ui-open:underline"></div>
|
|
* ```
|
|
**/
|
|
prefix?: string
|
|
}
|
|
|
|
export default plugin.withOptions<Options>(({ prefix = 'ui' } = {}) => {
|
|
return ({ addVariant }) => {
|
|
for (let state of ['open', 'checked', 'selected', 'active', 'disabled']) {
|
|
// TODO: Once `:has()` is properly supported, then we can switch to this version:
|
|
// addVariant(`${prefix}-${state}`, [
|
|
// `&[data-headlessui-state~="${state}"]`,
|
|
// `:where([data-headlessui-state~="${state}"]):not(:has([data-headlessui-state])) &`,
|
|
// ])
|
|
|
|
// But for now, this will do:
|
|
addVariant(`${prefix}-${state}`, [
|
|
`&[data-headlessui-state~="${state}"]`,
|
|
`:where([data-headlessui-state~="${state}"]) &`,
|
|
])
|
|
|
|
addVariant(`${prefix}-not-${state}`, [
|
|
`&[data-headlessui-state]:not([data-headlessui-state~="${state}"])`,
|
|
`:where([data-headlessui-state]:not([data-headlessui-state~="${state}"])) &:not([data-headlessui-state])`,
|
|
])
|
|
}
|
|
|
|
addVariant(`${prefix}-focus-visible`, ':where([data-headlessui-focus-visible]) &:focus')
|
|
addVariant(
|
|
`${prefix}-not-focus-visible`,
|
|
'&:focus:where(:not([data-headlessui-focus-visible] &))'
|
|
)
|
|
}
|
|
})
|