Passing additional arguments using tags with tags

Question

I work with styled-components and generating components using their tagged template literal syntax, for example:

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 request based on a breakpoint and passing in a tagged css template literal that must be included inside.

eg:

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

The multimedia function might look something like this:

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

Skips both the value and the tagged template literal, or am I mistaken about this?

Answer 1

, media(12):

function media(twelve) {
  return function(stringParts, ...interpolationValues) {
    return …
  }
}

const media = (twelve) => (stringParts, ...interpolationValues) => …;

media(12)`firstPart ${13} secondPart`
// or equvialently
media(12)(["firstPart ", " secondPart"], 13)

, - , ,

function media(twelve, string) {
  return …;
}

media(12, `
  templateString
`)