yldio / styled-is

A flag utility for styled-components
Mozilla Public License 2.0
210 stars 8 forks source link

styled-is breaks on function templates that return non-string values on newest version #45

Closed CharlieMartell closed 5 years ago

CharlieMartell commented 5 years ago

Seems the addition of

const handleFunctions = (args, props) => {
  let css = '';
  for (let i = 1; i < args.length; i++) {
    if (typeof args[i] === 'function') {
      const output = args[i](props);
      if (output.includes(':')) {
        css += output;
      }
    }
  }

  if (css) {
    const newArgs = args.slice(0);
    const argCss = args[0].slice(1);
    argCss.unshift(css + newArgs[0][0]);
    newArgs[0] = argCss;
    return newArgs;
  }

  return args;
};

in https://github.com/yldio/styled-is/blob/master/src/index.js has caused styled-components like

  ${is('something')`
    min-height: ${p => (p.expanded ? '50vh' : 0)};
  `};

to error out on output.includes(':') even though it is valid css here this worked back when instead of handleFunctions it used css(...args);

mboudriga commented 5 years ago

@CharlieMartell What do you mean by error out, can you post a screenshot?

mboudriga commented 5 years ago

Opened a pull request fixing this: https://github.com/yldio/styled-is/pull/46

SaraVieira commented 5 years ago

Closed by @mboudrig 😁