fabulous

fabulous copied to clipboard

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

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?

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>
)

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

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