# 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..`)