Lint your theme
Add the Twilight ESLint config so your editor and CI warn about imports and DOM habits that slow or break a 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
In eslint.config.js (flat config), spread the config and add your own rules after it:
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
| 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 and Navigation and page detection.
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:
eslint . --max-warnings 0To 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
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
- Put your own entries after the spread. Later entries win.
- The rules apply to
.tsand.tsxfiles only.