syntax-preference.md

Pattern: Malformed emotion syntax

Issue: -

Description

This rule aims to choose between syntaxes.

Examples of incorrect code for this rule, when @emotion/syntax-preference: [2, "string"]:

const H1 = styled.h1({
  color: red
})
// --> Styles should be written using strings.

const H1 = styled('h1')({
  color: red
})
// --> Styles should be written using strings.

Examples of incorrect code for this rule, when @emotion/syntax-preference: [2, "object"]:

const H1 = styled.h1`
  color: red;
`
// --> Styles should be written using objects.

const H1 = styled('h1')`
  color: red;
`
// --> Styles should be written using objects.

When Not To Use It

If you don't want to limit styles to a unique syntax.

Further Reading

• GitHub - syntax-preference