Passing further arguments with tagged template literals

Viewed 2988

I'm working with styled-components and generating components using their tagged template literal syntax such as:

const Button = styled.button`
  background-color: papayawhip;
  border-radius: 3px;
  color: palevioletred;
`

In one case I need to call a function that generates a media query based on a breakpoint and passes the tagged template literal of css to be included within.

for example:

media(12)`
   background-color: papayawhip;
`

The media function might look something like this:

const media = mapValues(width => ({ css: (...args) => css`
  @media (min-width: ${width}rem) {
    ${css(...args)}
  }
`}));

Is passing both a value and a tagged template literal possible, or am I going about this the wrong way?

1 Answers
Related