Syntax checking for embedded CSS?

[etcci]

Hi! I'm working on a project that uses Emotion in Typescript files. We recently had an issue where a missing bracket at the end of a CSS block in a styled() element definition didn't result in warnings or errors, but did result in different behavior on different platforms.

Is there some sort of strict mode to catch this, or a linter/ESlint plugin that will validate embedded CSS? @emotion/eslint-plugin doesn't seem to address this, so I'm wondering if there's anything else out there that might (I'm very new to this ecosystem, so I apologize if this is a common/obvious question).

Thank you!

[Andarist]

It depends on how your styled call looked like - @emotion/eslint-plugin could have rules to cover some cases but overly dynamic cases are hard to catch during static analysis.

[srmagura]

I recommend using object styles if using TypeScript — that way the TypeScript compiler can verify the structure of your CSS object is valid.

[ankurparihar]

Hi

Is there any way to detect issues (atleast basic) in generated styles? like these

Here I had accidently added doubel-quotes, which I was only catch on manually checking in browser.

Manually checking everything won't be possible, since it's part of a large project.

[ankurparihar]

And also pseudo states like hover and impossible are nearly impossible to quality check