Migrating from emotion to stitches: include two props in variants and breakpoints

Question

I am wondering how can I write this styled-emotion code in stitches. Basically I accept onlyShowOnDesktop and breakpoint props.

breakpoint is basically:

const breakpoint = isTopNavigationBreakPoint ? theme.defaultBreakpoints.xl : theme.defaultBreakpoints.m

Above returns either 1280 or 600 if isTopNavigationBreakPoint included or not.

The code looks like this:

export const Visible = styled.div<{
  onlyShowOnDesktop?: boolean
  breakpoint?: number
  selected?: boolean
}>`
  display: ${(props) => (props.onlyShowOnDesktop ? 'none' : 'unset')};
  ${({ onlyShowOnDesktop, breakpoint }) =>
    `
  @media(min-width: ${breakpoint}px) {
        display: ${onlyShowOnDesktop ? 'unset' : 'none'};
      }
  `}
`

I'm wondering how should we handle the @media part. So far I came up with this idea:

Have 2 variants with 2 breakpoints of 600 and 1280 and inside include another variant for onlyShowOnDesktop with true and false objects with display property and unset and none value, but I am not sure if we should use variants nested in media queries?

Any suggestions would be much appreciated as I couldn't find any example online for stitches in this use-case.

Answer 1

In case someone bumps into this in the future:

[isTopNavigationBreakPoint ? '@xlUp' : '@mUp']: {
  display: onlyShowOnDesktop ? 'unset' : 'none',
}

if we pass isTopNavigationBreakPoint as a prop, on @xlUp screen sizes set display to 'unset', if we also passed onlyShowOnDesktop prop else display to 'none' if we haven’t passed onlyShowOnDesktop.

Same for @mUp if we didn’t pass isTopNavigationBreakpoint