Can't pass array to css prop

Hi. I’m having trouble passing an array to css prop. This is the webpack message: “Module not found: Error: Can’t resolve ‘@emotion/css’ in …”

Can someone try to reproduce it? Is this a bug? Here’s a sample:

import React from 'react'
import ReactDOM from 'react-dom'
import {css} from '@emotion/core'

function Test() {
  var c1 = css`color: hotpink;`
  var c2 = css`background-color: lightgray;`
  var c3 = [c1, c2] 

  return <div css={c3}>OLA</div> // this works fine

  //   return <div css={[c1, c2]}>OLA</div> // this one doesn't work
}

ReactDOM.render(
  <Test/>,
  document.getElementById('root')
)

Thanks

[Andarist]

Ok, I see the problem. I have a piece of bad news and a piece of good news - the bad news is that we are unable to fix it, the good news is that we have already fixed it in https://github.com/emotion-js/emotion/pull/1600 😉 The fix is going to only hit upcoming v11 though, we can’t easily backport it to v10.

v11 is very much usable (this change has not been released yet, but if you like - I can do it) and changes since v10 are minor (and we don’t plan to introduce major breaking changes anyway) but depending on the size of your project upgrade might take from 0 to some time (before final release we plan to prepare codemods which will help to migrate automatically, but they are not ready yet).

A workaround for v10 would be to do this:

import {css} from '@emotion/core'

<div css={css([c1, c2])}>OLA</div> 

[Andarist]

Closing because there is not much we can do about this in v10 as described above. I hope you understand.