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,
imageUrl is null sometimes.
The fix is to make sure we don’t pass anything to
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:
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.