Styled-components: Function within a function adding commas

[ekfuhrmann]

Perhaps related to #1392

Environment

System:

• OS: macOS High Sierra 10.13.1
• CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
• Free Memory: 669.71 MB
• Total Memory: 16.00 GB

• Shell: /bin/zsh - 5.3

  Binaries:

• Node: 9.8.0

• Yarn: 1.5.1
• npm: 5.7.1
• Watchman: Not Found
  

  npmPackages:

babel-plugin-styled-components:

• wanted: ^1.5.1

• installed: 1.5.1

  styled-components:

• wanted: ^3.2.3

• installed: 3.2.3

Reproduction

// styled-utils.js
const breakpoints = {
  xs: 320, // Mobile
  sm: 650, // Mobile-Lg
  md: 768, // Tablet
  lg: 1024, // Laptop
  xl: 1440 // Desktop
};

// iterate through the sizes and create a media template
export const media = Object.keys(breakpoints).reduce((accumulator, label) => {
  // use em in breakpoints to work properly cross-browser and support users
  // changing their browsers font-size: https://zellwk.com/blog/media-query-units/
  const emSize = breakpoints[label] / 16;
  accumulator[label] = (...args) => css`
    @media (min-width: ${emSize}em) {
      ${css(...args)};
    }
  `;
  return accumulator;
}, {});

export function font(name, size = 16, weight = 400, color = null) {


  return `
    font-family: ${name};
    font-weight: ${weight};
    ${color == null ? "" : `color: ${color}`};
    font-size: ${size}px;
    background-color: blue;

    ${media.sm`background-color:lime`}
  `;
}

console.log(font("sans-serif", 16, 800, "red"));

Expected Behavior

// console

    font-family: sans-serif;
    font-weight: 800;
    color: red;
    font-size: 16px;
    background-color: blue;

    @media (min-width:40.625em){background:lime;}

Actual Behavior

// console

    font-family: sans-serif;
    font-weight: 800;
    color: red;
    font-size: 16px;
    background-color: blue;

    @media (min-width:,40.625,em){,background:lime;,;}

It seems as if passing a function into another function is causing perhaps trailing commas to be rendered, destroying the property?

When using the media query function within a normal styled component there are no issues. This only seems to happen when passing it within another function.

[kitten]

This is because you’re console logging the “css” output.

That function will interleaved interpolations and strings. Thus it’s output will simply be an array. As you’re console logging it, the output will be strinfified this giving you this result.

The example looks fine though; I’d avoid leaving out the semicolon in your example just to make sure.

But it should work when used in an actual component.

Btw, here are some related docs:

https://www.styled-components.com/docs/advanced#tagged-template-literals
https://www.styled-components.com/docs/api#css

[kitten]

Oh, also, you’d probably want to use the css helper for your font function return value so you get full access to function interpolations for theming

Edit: oh, and this is actually required so that the flattening works correctly. Otherwise the css helpers return value will still be stringified as an array by the normal template literal

[ekfuhrmann]

Using the css helper for the font function return did resolve the issue, thanks for the assist in getting it working!