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;
  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:

   background-color: papayawhip;

The media function might look something like this:

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

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



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

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

or using arrow functions

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

to be called as

media(12)`firstPart ${13} secondPart`
// or equvialently
media(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

function media(twelve, string) {
  return …;

and call it as

media(12, `


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.