Support emotion css`` literal

[albinekb]

Is your feature request related to a problem? Please describe.
It would be nice to support the css literal from emotion.sh

Describe the solution you'd like
Using syntax:

const styles = css`
	background: red;
`

Additional context
Similar to styled.div css works by creating a className for your styles.
Read more about emotion css here: https://emotion.sh/docs/css-prop

[Raathigesh]

I just tested this and it seems to work. What exactly are you seeing in the side-panel when you place the cursor in the template literal?

[albinekb]

Ah! It does work, but not everywhere, only on styles declared at the root level of the file.

This component does not work:

const LabelValue = ({ label, value }) => (
  <div
    css={css`
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      padding: 20px 30px;
      span {
        width: 150px;
      }
      b {
        font-weight: bold;
      }
    `}
  >
    <span>{label}</span>
    <b>{value}</b>
  </div>
)

This does work:

const labelValueStyles = css`
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      padding: 20px 30px;
      span {
        width: 150px;
      }
      b {
        font-weight: bold;
      }
    `

const LabelValue = ({ label, value }) => (
  <div css={labelValueStyles}>
    <span>{label}</span>
    <b>{value}</b>
  </div>
)

[Raathigesh]

Thanks for the details. I'll have a look.

[paustint]

@Raathigesh - just for information, I tested this out while reviewing PR #32, and it looks like we might need some special handling based on the type of the parent element, as there is not an id with TaggedTemplateExpression elements.