Analysis on Emotion JS styles

  • ALM used GitHub
  • CI system used GitHub Actions
  • Scanner command used when applicable Standard GitHub action
  • Languages of the repository JavaScript/typescript
  • Only if the SonarCloud project is public, private repo
  • Error observed (wrap logs/code around with triple quotes ``` for proper formatting)
    We have a code snippet being introduced using Emotion’s styled API:
styled.span<{ color: Colors; hasBorder?: boolean }>`
  ${({ theme, color, hasBorder }) => `
    padding: 0 12px;
    background-color: ${theme.color[color]};
    color: ${getTextColor(color, theme)};
    border: 1px solid transparent;
    ${hasBorder && `border-color: ${getBorderColor(color, theme)}`}
  `}
`;

When sonar scanned this, it identified the block as a template, which isn’t wrong but not quite how emotion works. Because we’re using emotion, the direct usage of variables as is in this code is actually the norm for the project. While we can mark the individual issue as not an issue, it would be ideal if sonar didn’t flag errors like this since it is how you should be using emotion, https://emotion.sh/docs/introduction includes some examples that match how we’re using it.

  • Steps to reproduce
  • Potential workaround mark as not an issue
1 Like