React/JSX-curly-brace-presence is too strict

In the case below:

<div css={`
  background: #009688;
  transition: background 0.5s;
`}>
  Hello world!
</div>

The linter throws an error for using curly braces, but it’s impossible to have multi-line parameters without them, as the template literal notation (string) requires curly braces to be used.

eslint --fix produces the following result:

<div css="
  background: #009688;
  transition: background 0.5s;
">
  Hello world!
</div>

[ljharb]

In that case, please do file a new issue on the plugin repo 😃 Thanks!

[ljharb]

(linking to https://github.com/yannickcr/eslint-plugin-react/issues/1592)