Runtime error with css prop and const declared after component

[itsMapleLeaf]

Example:

// in:
import React from "react"
import { css } from "styled-components"

export default function Example() {
  return <div css={someCss}>oops</div>
}

const someCss = css`
  color: red;
`

// out:
import _styled from "styled-components";
import React from "react";
import { css } from "styled-components";

var _StyledDiv = _styled.div.withConfig({
  displayName: "Example___StyledDiv",
  componentId: "sc-1j0h0n6-0"
})(["", ""], someCss);

export default function Example() {
  return <_StyledDiv>oops</_StyledDiv>;
}
const someCss = css(["color:red;"]);

At runtime, this code will fail, as it tries to access someCss before it's declared.

This works if we declare someCss before Example. The someCss style is correctly placed before the styled component.

// in:
import React from "react"
import { css } from "styled-components"

const someCss = css`
  color: red;
`

export default function Example() {
  return <div css={someCss}>oops</div>
}

// out:
import _styled from "styled-components";
import React from "react";
import { css } from "styled-components";
const someCss = css(["color:red;"]);

var _StyledDiv = _styled.div.withConfig({
  displayName: "Example___StyledDiv",
  componentId: "sc-1j0h0n6-0"
})(["", ""], someCss);

export default function Example() {
  return <_StyledDiv>oops</_StyledDiv>;
}

Repro: https://github.com/kingdaro/styled-components-css-prop-error

Downgraded to 1.10.2 as a workaround for now. It looks like this commit introduced the change in behavior: 9bc3c08