Can We Used with a Named Object?

[ghost]

The following does not work:

const mq = facepaint({
  _: '@media(min-width: 0px)',
  xs: '@media(min-width: 480px)',
  sm: '@media(min-width: 768px)',
  md: '@media(min-width: 992px)',
  lg: '@media(min-width: 1200px)',
  xl: '@media(min-width: 1600px)',
})

const Test = styled.div`
  background-color: orange;

  ${mq({
    width: { _: '15px', xs: '30px', md: '95px', xl: '158px' },
    height: { _: '15px', xs: '30px', md: '95px', xl: '158px' },
  })};
`

I am wondering, though -- is something like this possible? I.e., is it possible to create an object with named keys that I can use to reference which breakpoints I want to use?

If so, how?

Thanks.