[Tech debt] Linting Emotion/CSS-in-JS

[cee-chen]

We recently switched to stylelint to remove our deprecated sass-lint dependency (#6470) and also in hopes that stylelint could be configured to lint our CSS-in-JS styles.

Unfortunately, it looks like the latter is not actually the case, and the stylelint folks have offloaded the onus of parsing/processing CSS-in-JS syntax to other library owners:

• Fix CSS-in-JS problems stylelint/stylelint#4574 (comment)
• Create custom Stylelint syntax so you can use Stylelint with Emotion emotion-js/emotion#2695

I investigated a workaround posted primarily for styled-components that somewhat works for Emotion - unfortunately, it falls over/reports a bunch of CssSyntaxError errors on // comments in our CSS-in-JS code, which I don't see a way around for.

I'm opening this issue to track any movement on either stylelint or Emotion's end that would make this work possible, and to log it as a blocked, low priority tech debt item.

If no movement in the future has been for stylelint Emotion linting, and we complete our Emotion conversion and have no meaningful Sass left in our codebase, we should consider seeking another linter specifically for Emotion that works.

[github-actions]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.