Combine selector and media query in condition?

[Pinpickle]

I want a hover selector that doesn't apply on mobile devices

I want to write:

css({
  _hover: {
    color: "green",
  }
})

And it expand to something like

@media (pointer: fine) {
  &:hover {
     color: green;
  }
}

I know conditions can be written as a selector or a media query. Is there a way to combine both?

[astahmer]

you can do it like this currently:

css({ "@media (hover: hover) and (pointer: fine)": { "&:hover": { bg: "red.50" } } })

// or with a config condition 
// `finePointer: "@media (hover: hover) and (pointer: fine)"`
css({ _finePointer: { _hover: { bg: "red.50" } } })

[Pinpickle]

@astahmer that definitely works, but I'd like to completely abstract away this as an implementation detail.

[matthew-ia]

+1. I was hoping to do this exact thing! I'd want to be able to do something like this in the config:

// Setup:
// panda.config.ts
export default defineConfig({
  conditions: {
    customHover: {
      '@media (hover: hover) and (pointer: fine)': {
        selector: '&:hover'
      }
    }
  }
});

And retain the usage of one conditional like this:

// Usage:
// some.js
css({
  color: 'black',
  _customHover: {
    color: 'red.50',
  }
})

I'm coming from Sass where I handled this with a mixin to effectively have just one wrapping statement as the usage, and custom conditions reminded me a bit of that functionality.

FWIW, I think the method that @astahmer provided above is good enough. I also think supporting something like this to open up conditions to become even more powerful could have DX gains beyond this simple use case, but maybe that functionality would encroach on Patterns and custom Utilities (and maybe is already be possible with those? I am new to Panda and haven't fully explored those yet).

In the meantime, if I really want, I imagine I could easily supplement with a custom function (net 0 on less typing though, because I'd need to import this function every time):

// Setup:
// customHover.ts
export function customHover(hoverState: SomeSafePandaCSSType) {
  return {
    _finePointer: {
      _hover: {
        ...hoverState
      }
    }
  }
}

// Usage:
// some.ts
import { customHover } from './customHover'
css({
  ...customHover({ bg: "red.50" })
})

[nucleartux]

Is there still no built solution?

[astahmer]

it's built-in now
#2177

[nucleartux]

That's awesome