Spread object into `cssProp` doesn't work

[Grimones]

Hello there. Accidentally encountered an issue with spreading an object into css prop Like in polished

<div
  css={{
    backgroundColor: 'palevioletred',
    ...fluidRange({
      prop: 'font-size',
      fromSize: '20px',
      toSize: '100px',
    }),
  }}
>
  hi
</div>

This error ocurred

TypeError: Property expression of JSXExpressionContainer expected node to be of a type ["Expression","JSXEmptyExpression"] but instead got null
    at Object.validate (C:\Users\Andrew\Documents\projects-dev\lv-online\node_modules\@babel\core\node_modules\@babel\types\lib\definitions\utils.js:128:13)
    at validate (C:\Users\Andrew\Documents\projects-dev\lv-online\node_modules\@babel\core\node_modules\@babel\types\lib\validators\validate.js:17:9)
    at builder (C:\Users\Andrew\Documents\projects-dev\lv-online\node_modules\@babel\core\node_modules\@babel\types\lib\builders\builder.js:46:27)
    at Object.JSXExpressionContainer (C:\Users\Andrew\Documents\projects-dev\lv-online\node_modules\@babel\core\node_modules\@babel\types\lib\builders\generated\index.js:767:31)
    at propertiesReducer (C:\Users\Andrew\Documents\projects-dev\lv-online\node_modules\babel-plugin-styled-components\lib\visitors\transpileCssProp.js:124:83)
    at Array.reduce (<anonymous>)
    at C:\Users\Andrew\Documents\projects-dev\lv-online\node_modules\babel-plugin-styled-components\lib\visitors\transpileCssProp.js:110:39
    at PluginPass.JSXAttribute (C:\Users\Andrew\Documents\projects-dev\lv-online\node_modules\babel-plugin-styled-components\lib\index.js:32:46)
    at NodePath._call (C:\Users\Andrew\Documents\projects-dev\lv-online\node_modules\@babel\core\node_modules\@babel\traverse\lib\path\context.js:53:20)
    at NodePath.call (C:\Users\Andrew\Documents\projects-dev\lv-online\node_modules\@babel\core\node_modules\@babel\traverse\lib\path\context.js:40:17)

This doesn't happen only on 1.10.0 version. Also this doesn't happen if you put the fluidRange into prop without spreading

<div
  css={fluidRange({
    prop: 'font-size',
    fromSize: '20px',
    toSize: '100px',
  })}
>
  hi
</div

or make the spread into other object which is used in cssProp

const style = {
  backgroundColor: 'palevioletred',
  ...fluidRange({
    prop: 'font-size',
    fromSize: '20px',
    toSize: '100px',
  }),
};

<div css={style}>hi</div>

or use tagged template literal

<div
  css={`
    background-color: palevioletred;
    ${fluidRange({
      prop: 'font-size',
      fromSize: '20px',
      toSize: '100px',
    })}
  `}
>
  hi
</div>

i'm using custom SSR solution, but i think it is all the same: webpack compiling server and client to have a hot reaload with SSR.

It fails on client build, but i'm not really sure that it won't fail on server because compiling runs in parallel. So it might be client gets to that point faster than server and crashes all build process.

[quantizor]

Thanks for reporting, still ironing out the kinks for this particular syntax + css prop as we actually didn't even support it until last week.

[axhamre]

Is there any workaround for this? It's such a vital part of writing dynamic CSS.