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.