Transmitir más argumentos con literales de plantilla etiquetados
Estoy trabajando concomponentes con estilo y generar componentes usando su sintaxis literal de plantilla etiquetada como:
const Button = styled.button`
background-color: papayawhip;
border-radius: 3px;
color: palevioletred;
`
En un caso, necesito llamar a una función que genera una consulta de medios basada en un punto de interrupcióny pasa el literal de plantilla etiquetado de css para que se incluya dentro.
por ejemplo:
media(12)`
background-color: papayawhip;
`
La función de medios podría verse así:
const media = mapValues(width => ({ css: (...args) => css`
@media (min-width: ${width}rem) {
${css(...args)}
}
`}));
¿Es posible pasar un valor y una plantilla etiquetada literalmente, o voy por esto de la manera incorrecta?