Passing Further Arguments With Tagged Template Literals

I'm working with styled-components and generating components using their tagged template literal syntax such as: const Button = styled.button` background-color: papayawhip; bor

Solution 1:

Tagged template literals are no magic, you just need to return another function from your media(12) call:

functionmedia(twelve) {
  returnfunction(stringParts, ...interpolationValues) {
    return …
  }
}

or using arrow functions

constmedia = (twelve) => (stringParts, ...interpolationValues) => …;

to be called as

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

However, if you don't need to do any interpolation but just want to receive a string, it might be easier to write a function with the parameters

functionmedia(twelve, string) {
  return …;
}

and call it as

media(12, `
  templateString
`)