Get readable CSS Classes in Emotion Component/React

So you are working with styled components or Emotion Component and you are getting a bit frustrated with the classNames that are generated.

then you have found the right article and the salvation for you ;)

I'm using Emotion so off course you need to install that and also I “was” using @emotion/styled syntax.

what you need to do now is really easy and only 2 steps:

1. change all @emotion/styled imports within your components to instead import @emotion/styled/macro.
2. Write “label: some-good-semantic-name;” in your *.style.tsx files

export const MainHeader= styled.h1`
  font-size: 23px;
  color: red;
  label: some-good-semantic-name;
`;

and you will now receive classes like

css-1g9lhzz-some-good-semantic-name

*Update

and to make TS happy, add this in tsconfig.json

“plugins”: [{
  “name”: “typescript-styled-plugin”,
  “lint”: {
    “validProperties”: [“label”]
  }
}]