Pretty Lights ESLint Plugin
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..
)