Pretty Lights ESLint Plugin

• pretty-lights/no-emotion

If you are using Prettier in your editor, or you run eslint . --fix against a project, your import statements will automatically be converted from emotion / react-emotion / emotion-server / emotion-theming to pretty-lights. You may need to manually intervene in a few instances, but I was able to convert the lion's share of the NYT codebase using the ESLint fix.

• pretty-lights/no-css-prop

The css prop, the bread and butter of Emotion 10, is an antipattern in the NYT codebase, and pretty-lights completely removes its existence. However, it is still a good idea to avoid naming a prop, css. This rule ensures that you do not.

• pretty-lights/favor-css-over-styled

If you create a styled component using the styled.h1 syntax and don't use any interpolations, this rule will nag you to use css instead of styled. This has been an implicit rule in our codebase anyways, but only enforced by those who know about it, and most people have only heard about it through folklore.

• pretty-lights/disambiguate-vars

This rule tries to enforce the convention of ending all variables tied to css calls with "Class" (e.g. const headerClass = css..)