Stats preview card - Used React and Styled components

Hello folks! I have the following doubts while working on this challenge:

• Normally, in CSS and SASS/SCSS we can use custom properties something like this:

@media (min-width:var(--desktop-width)) {...}

But I noticed that in styled-components, I could not do the above.

I had to define the constant in a separate Breakpoints file and then refer it, like:

(You can refer to src/styles/Stats.style.jsx to view the full code)

@media (min-width: ${DesktopWidth}) {...}

Is my observation about not being able to use CSS custom properties in styled components, correct?

• My second question, In src/setupTests.js, I was writing some test cases to automate the UI. I find .toHaveStyle() to be inaccurate. Is it ideal to do these UI tests via automation? Or is it better to rely on manual tests for UI-related tests?