Beware of Missuses of CSS-in-JS
A common, hard-to-find, issue I’d like to share with you
This void request was killing me:
We are using “NextJS” so a request to “/” is a pretty heavy request with redirects, data fetching and React rendering on the server.
It was really hard to understand where it comes from because I had zero information regarding it’s initiator (as you can see in the image above).
After breaking the HTML into small chunks and deleting them chunk by chunk i found the following style:
I found the bug. The following styled-components code caused it:
As you can see in the image above, when imageUrl
is empty,background-image
is url()
.
And indeed imageUrl
is null sometimes.
The fix is to make sure we don’t pass anything to background-image
if imageUrl
is void.
A better way to fix it is to use the dynamic imageUrl
function because imageUrl
can receive many different urls so 200 Dish divs with different imageUrl for each would create 200 classes.
Instead if we use it like the follows, we will only have 2 styles:
This article explains this part better.
So how do we prevent these empty url()
s? lint? some styled-components tools?
What do you think?
I’d like to have a conversation in the comments.