Combined data attributes/states

[RemyMachado]

Hey,

I'm trying to only apply a _hover style when it's not already a _focusVisible and keep data-{state} usage.

The following doesn't work:

"_hover:not(_focusVisible)": { // ❌

The following does work, but I'm losing the possibility of using data-{state} to enable the styles:

"&:hover:not(:focus-visible)": { // ✅

Is there a better approach than doing the following?

/* gives the focus state a higher priority than hover */
    ['&:hover:not(:focus-visible, [data-focus-visible]), ' +
    '&[data-hover]:not(:focus-visible, [data-focus-visible])']: { // ✅

[segunadebayo]

You should probably create a custom condition for this in your config.

conditions: {
  extend: {
     hover: '&:is(:hover, [data-hover]):not(:focus-visible, [data-focus-visible])'
  }
}

That way you can use right _hover and it works as expected.

[RemyMachado]

Thanks for your response.

I don't want this to take effect on a global scope. It's for a very specific component.

If I understand correctly, extend: { hover: ... will override _hover on a global scope. In this case, I'm not sure it is pertinent to put it in the config If I'm only planning to use it in a single place.

Can I create a custom keyword extend: { specialHover: ... -> _specialHover: { or does it only work for existing conditions?

Also, I really like this shorter version you came up with: &:is(:hover, [data-hover]) 🙌

[segunadebayo]

Sounds good. Then, make it a dedicated condition 👍