# Lint your theme (https://docs.salla.dev/twilight/react/guide/lint-your-theme)



Read this to catch common theme mistakes while you type, and to fail a build in CI when they slip in. The engine ships a ready-made ESLint config, so you do not write the rules yourself.

## Add it [#add-it]

In `eslint.config.js` (flat config), spread the config and add your own rules after it:

```js title="eslint.config.js"
import { twilightEslintConfig } from '@salla.sa/twilight-theme-engine/eslint';

export default [
  ...twilightEslintConfig,
  // your own rules here
];
```

The config applies to every `.ts` and `.tsx` file and reports each problem as a **warning**.

## What it checks [#what-it-checks]

| Rule                       | Flags                                                                                                       | Do this instead                                                   |
| -------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| `no-restricted-imports`    | `@salla.sa/twilight-theme-engine/routes` and `.../components`, the broad barrels                            | Import a narrow subpath, such as `.../routes/cart` or `.../modal` |
| `no-restricted-imports`    | Reaching into a component folder past its barrel, such as `../common/Link`                                  | Import from the folder: `../common`                               |
| `no-restricted-properties` | `window.location`, `document.querySelector`, `querySelectorAll`, `getElementById`, `getElementsByClassName` | `useNavigate` or `Link` for navigation, and `useRef` for elements |
| `no-restricted-globals`    | A bare `location`                                                                                           | `useLocation()` from the engine                                   |

Why they matter: broad imports make the page download code it does not use, and direct DOM or `location` access breaks on the server and fights React. See [Performance](https://docs.salla.dev/twilight/react/guide/performance) and [Navigation and page detection](https://docs.salla.dev/twilight/react/hooks/navigation).

## Make it strict in CI [#make-it-strict-in-ci]

The rules are warnings, so a build does not fail on them by default. In CI, run ESLint with `--max-warnings 0` so any warning fails the job:

```bash
eslint . --max-warnings 0
```

To allow one exception, use a normal `// eslint-disable-next-line no-restricted-properties` comment with a short reason. To change a rule for everyone, add an entry after the spread, since later entries win.

## During development [#during-development]

`vite dev` also prints its own warnings in the terminal for similar habits, such as `window.location.reload()` or a missing image size. They need no setup.

## Gotchas [#gotchas]

* Put your own entries after the spread. Later entries win.
* The rules apply to `.ts` and `.tsx` files only.

## Next [#next]

* [Performance](https://docs.salla.dev/twilight/react/guide/performance)
* [Project structure](https://docs.salla.dev/twilight/react/start/project-structure)