Raathigesh/fabulous

Support emotion css`` literal

Opened this issue · 4 comments

albinekb commented

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 commented

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 commented

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 commented

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

paustint commented

@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.

image