Defining a style variable in render() with styled-jsx's css throws error: "insertRule accepts only strings"

[valnub]

• I have searched the issues of this repository and believe that this is not a duplicate.

When defining a variable with css outside of React class components there are no problems:

const backgroundImageStyle = css`
  div {
    background-color: red;
  }
`;

class Dropdown extends Component {
  render() {
    return (
      <div>
        <style jsx>{backgroundImageStyle}</style>
      </div>
    );
  }
}

export default Dropdown;

But when moving the style definition into render() like this, it doesn't work:

render() {
  const backgroundImageStyle = css`
    div {
      background-color: red;
    }
  `;

  return (
    <div>
      <style jsx>{backgroundImageStyle}</style>
    </div>
  );
}

It gives me this error message:

StyleSheet: `insertRule` accepts only strings.
Error: StyleSheet: `insertRule` accepts only strings.
    at invariant (node_modules/styled-jsx/dist/lib/stylesheet.js:274:11)
    at StyleSheet.insertRule (node_modules/styled-jsx/dist/lib/stylesheet.js:125:7)
    at node_modules/styled-jsx/dist/stylesheet-registry.js:88:29
    at Array.map (native)
    at StyleSheetRegistry.add (node_modules/styled-jsx/dist/stylesheet-registry.js:87:27)
    at JSXStyle.componentWillMount (node_modules/styled-jsx/dist/style.js:58:26)
    at resolve (node_modules/react-dom/cjs/react-dom-server.node.development.js:2119:12)
    at ReactDOMServerRenderer.render (node_modules/react-dom/cjs/react-dom-server.node.development.js:2260:22)
    at ReactDOMServerRenderer.read (node_modules/react-dom/cjs/react-dom-server.node.development.js:2234:19)
    at renderToString (node_modules/react-dom/cjs/react-dom-server.node.development.js:2501:25)

Why is that so and is there a way to fix this? The reason why I want to define the style within render() is because I want to modify it based on props coming in:

render() {
  let backgroundImageStyle;
  if (this.props.bgcolor) {
    backgroundImageStyle = css`
      div {
        background-color: ${this.props.bgcolor};
      }
    `;
  } else {
    backgroundImageStyle = css`
      div {
        background-color: red;
      }
    `;
  }

  return (
    <div>
      <style jsx>{backgroundImageStyle}</style>
    </div>
  );
}

[giuseppeg]

@valnub props are not supported in css, only constants.
You can split the styles and define the dynamic parts in a separate inline style tag.

[valnub]

Thanks again @giuseppeg for your quick response. To bad there is no support for this. I wanted to avoid inline styles as much as possible and put all the css code into variables :-(

I still don't understand why this doesn't work, I mean there are no props in this example:

render() {
  const backgroundImageStyle = css`
    div {
      background-color: red;
    }
  `;

  return (
    <div>
      <style jsx>{backgroundImageStyle}</style>
    </div>
  );
}

[timneutkens]

@valnub expecting it to be because everything is statically analysed. Either way this is an issue for github.com/zeit/styled-jsx 👍