Migrate from ESLint to Oxlint

Reduces the number of dependencies for JavaScript linting from 5 to 1
with drop-in compatibility. Includes an ADR with further context.

Author: davidrapson

.oxlintrc.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["unicorn", "oxc", "vitest"],
+  "categories": {
+    "correctness": "error"
+  },
+  "rules": {},
+  "env": {
+    "builtin": true
+  },
+  "ignorePatterns": ["docs/", "vendor/", "demo/", "website/"]
+}

contributing/03-testing.md

@@ -32,18 +32,18 @@ just format
 
 You can check the formatting without making changes with `just format-check`
 
-### Prettier, Stylelint, ESLint, and Jest
+### Prettier, Stylelint, Oxlint, and Jest
 
-The repository is centred around a node module which is managed by the `package.json` at the top-level of the repository. This provides commands for running prettier against the project as well as linting (eslint) and unit tests (jest) for client-side code.
+The repository is centred around a node module which is managed by the `package.json` at the top-level of the repository. This provides commands for running prettier against the project as well as linting (oxlint) and unit tests (jest) for client-side code.
 
 All top-level package commands can be run using `npm run`:
 
 | Command       | Description                                           |
 | ------------- | ----------------------------------------------------- |
 | `test`        | Runs all jest tests                                   |
-| `lint`        | Runs all linting checks (prettier, eslint, stylelint) |
+| `lint`        | Runs all linting checks (prettier, oxlint, stylelint) |
 | `lint:css`    | Runs only `stylelint` on the project code             |
-| `lint:js`     | Runs only `eslint` on the project code                |
+| `lint:js`     | Runs only `oxlint` on the project code                |
 | `lint:format` | Run `prettier --check` on the project code            |
 | `format`      | Auto-format all eligible code with prettier           |
 

contributing/adr/2026-08-3-migrate-from-eslint-to-oxlint.md

@@ -0,0 +1,25 @@
+# Migrate from ESLint to Oxlint
+
+Date: 2026-08-03
+
+## Status
+
+Accepted
+
+## Context
+
+In a previous ADR we made the decision to [move from jest to vitest](./2025-06-17-migrate-to-vitest-for-unit-tests.md). There is a similar replacement for eslint in the wider vite-ecosystem in [Oxlint](https://oxc.rs/docs/guide/usage/linter).
+
+Oxlint by comparison is a single binary with a number of common eslint rules implemented as core plugins.
+
+## Decision
+
+Migrate to Oxlint for JavaScript linting. This is largely a drop-in replacement.
+
+## Consequences
+
+Reduces the number of dependencies for JavaScript linting from 5 to 1. For larger projects the performance benefits would also be significant, here they are marginal (although still significantly faster in relative terms), so the primary reason here is reducing the number of dependencies.
+
+Due to the small number of files being checked in this project it's possible to quickly swap out linting tools so we can easily reverse this migration if we choose to.
+
+There is also a companion `oxfmt` tool which is a drop-in replacement for `prettier`, however it is still in alpha and doesn't fundamentally change the number of dependencies.

demo/package-lock.json

@@ -1,5 +1,4 @@
-/* eslint-disable no-await-in-loop */
-/* eslint-disable no-restricted-syntax */
+/* oxlint-disable no-await-in-loop, no-restricted-syntax */
 module.exports = async (page, scenario) => {
   // Enable prefers-reduced-motion to disable animations
   await page.emulateMediaFeatures([

demo/visual-regression/engine_scripts/onReady.js

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`allow toggling targeted content 1`] = `
+exports[`allow toggling targeted content > closed 1`] = `
 "<button type="button" class="cads-targeted-content__button" aria-expanded="false" aria-controls="targeted-content-123-content" aria-label="show this section">
         
     <div class="cads-targeted-content__title-text">Targeted content title</div>
@@ -11,7 +11,7 @@ exports[`allow toggling targeted content 1`] = `
       </button>"
 `;
 
-exports[`allow toggling targeted content 2`] = `
+exports[`allow toggling targeted content > open 1`] = `
 "<button type="button" class="cads-targeted-content__button" aria-expanded="true" aria-controls="targeted-content-123-content" aria-label="close this section">
         
     <div class="cads-targeted-content__title-text">Targeted content title</div>

eslint.config.mjs

@@ -57,7 +57,7 @@ function openByHash(hash) {
         setState(matchEl, "open");
       }
     }
-  } catch (e) {} // eslint-disable-line no-empty
+  } catch (e) {} // oxlint-disable-line no-unused-vars
 }
 
 function initTargetedContentFor(el) {

lib/targeted-content/__snapshots__/targeted-content.test.js.snap

@@ -42,11 +42,11 @@ test("allow toggling targeted content", () => {
     expect(buttonEl).toHaveAttribute("aria-expanded", "false");
   }
 
-  expect(headingEl.innerHTML).toMatchSnapshot();
+  expect(headingEl.innerHTML).toMatchSnapshot("closed");
   expectClosed();
 
   buttonEl.click();
-  expect(headingEl.innerHTML).toMatchSnapshot();
+  expect(headingEl.innerHTML).toMatchSnapshot("open");
   expectOpen();
 
   buttonEl.click();