How to avoid nasty surprises by linting your styles with stylelint

Keeping your CSS in JS clean

A guide to using stylelint with emotion or styled-components

Photo by Adam Birkett on Unsplash

I love CSS in JS. I use it all the time at work and on personal projects. I love how it makes theming and dynamic styles a breeze. But one thing I missed from regular CSS is linting.

Stylelint is a fantastic project that makes it easy to enforce convention and avoid errors in your styles. However, up until recently I had never used it with CSS in JS. The release of version 9.5.0 added first class support for linting CSS in JS. Now it’s easier than ever to lint your projects styled with popular libraries like styled-components and emotion.

The rest of this article will concentrate on emotion, but the process for linting styled-components is virtually identical.

Let’s lint some CSS!

Let’s start by creating a new React application. For this, we can use create-react-app.

create-react-app my-app

Next, we add some dependencies. We can start by adding emotion.

cd my-app
yarn add @emotion/core @emotion/styled