Fix the `@screen` inability to grab complex `theme.screens` values

[minzojian]

Minimum Reproducible Example https://github.com/minzojian/cra-emotion base https://github.com/ben-rogerson/twin.examples/tree/master/cra-emotion

Issue Details if i set a custom screen define like this

screens: {
      mobile: { max: '767px' },
      tablet: {
        min: '768px',
        max: '991px'
      },
      laptop: {
        min: '992px',
        max: '1599px'
      },
      desktop: { min: '1600px' },
    },

and then define css like this

 background: ${theme`colors.blue.500`};
    ${screen`mobile`}{
      background: ${theme`colors.red.500`}!important
    }

but after compiled, i got

@media (min-width [object object]){

the correct result should be

@media (max-width: 767px){

[minzojian]

we can define a combine screen like this

...
screens: {
      mobile: { max: '767px' },
      desktop: {
        min: '1600px'
      },
      mobile_desktop:[
        { max: '767px' },
        {
          min: '1600px'
        }],
...

but that is not flexible

so this PR also supported array style screen

below codes are equivalent

css` height: 480px;
    ${screen`mobile_desktop`}{
      height: 120px;
    }`,

css` height: 480px;
    ${screen`mobile,desktop`}{
      height: 120px;
    }`,

     css({
       height: '480px',
     ...screen(['mobile','desktop'])({
       height: '120px'
     })
     }),

all code can generate codes like this

@media (max-width: 767px),(min-width: 1600px ){.css-1c4paup-App{height:120px;}}

[ben-rogerson]

Thanks for adding adding this feature - it looks quite useful 👍

I'll pop up some tests and add it to the next release.