[talissoncosta]

Thanks for submitting a PR! Please check the boxes below:

• I have read the Contributing Guide.
• I have added information to docs/ if required so people know about the feature.
• I have filled in the "Changes" section below.
• I have filled in the "How did you test this code" section below.

Changes

Closes #8832

Turns the review comments we keep repeating (see #8805) into lint rules, so review can focus on the change itself.

Only changed lines are checked, in CI and now also in the pre-commit hook, so the existing backlog doesn't block anyone. For a real exception, disable the rule on that line with a reason.

Rule	Instead
style prop	SCSS class with tokens; a CSS custom property for runtime values
data-test, byId, [data-test] locators	getByRole / getByLabel
btn-with-icon, <Button theme='icon'>	IconButton
hex / rgb / hsl literals in JS/TS	colour tokens (token, palette, icon and docs files exempt)
hex and .dark (not .dark-*) in changed SCSS lines	tokens (_tokens.scss, _primitives.scss, docs exempt)
iconLeft / iconRight	icons as children
role='button'	BareButton
Bootstrap 4 class names	Bootstrap 5 names
as and ! assertions	annotations, type guards
fetch(), including window.fetch and globalThis.fetch	RTK Query
dangerouslySetInnerHTML	(disable with a reason when sanitised)
IonIcon and ionicons	project SVGs via Icon
Flux store imports (warning only)	RTK Query

Also:

• e2e/ is no longer ignored by ESLint, so the selector rules apply there. Prettier and import alias stay off for it.
• The pre-commit hook sets LINT_STAGED, which switches eslint-plugin-diff to staged mode. Before this, pre-commit linted whole files.

How did you test this code?

• A fixture file with one of each violation: every rule fires, and as const, href='#section', ms-2 and fw-bold don't.
• Pre-commit: an edit to PanelSearch.tsx (16 existing errors) commits fine, a new style prop in it is blocked, and a hex in _buttons.scss is blocked.
• IonIcon, ionicons, window.fetch and globalThis.fetch are flagged; .dark-mode in SCSS isn't.
• CI=true ESLINT_PLUGIN_DIFF_COMMIT=origin/main npm run lint and SCSS_DIFF_BASE=origin/main npm run lint:scss pass on this branch.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
flagsmith-frontend-preview	Ready	Preview	Oct 21, 2026 4:31pm UTC
flagsmith-frontend-staging	Ready	Preview	Oct 21, 2026 4:31pm UTC

1 Skipped Deployment

Project	Deployment	Actions	Updated
docs	Ignored	Preview	Oct 21, 2026 4:31pm UTC

[coderabbitai]

📝 Walkthrough

The frontend ESLint configuration now checks selected JavaScript and JSX patterns on changed lines. Pre-commit linting selects staged lines, and E2E files are included in ESLint processing. A new SCSS checker scans added lines in staged or CI diffs. The pre-commit hook, npm scripts, and pull request workflow invoke the checker.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: 🔵 Low · up to bcaf4

The changed-line lint rule can miss prohibited Bootstrap classes in template literals; fix the matcher before relying on this enforcement.

- [ ] Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.88%. Comparing base (c582d5b) to head (bcaf4e7).
⚠️ Report is 8 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8819   +/-   ##
=======================================
  Coverage   98.88%   98.88%           
=======================================
  Files        1683     1683           
  Lines       70275    70275           
=======================================
  Hits        69489    69489           
  Misses        786      786           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[coderabbitai]

Actionable comments posted: 3

---

ℹ️ Review info

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: ASSERTIVE
• Plan: Advanced
• Run ID: e98bd409-bfda-4e80-a2be-77e13c8f5b5d

📥 Commits

Reviewing files that changed from the base of the PR and between d031dbe and 3b1f91f.

📒 Files selected for processing: 6

• .github/workflows/frontend-pull-request.yml
• .husky/pre-commit
• frontend/.eslintignore
• frontend/.eslintrc.js
• frontend/bin/check-scss.js
• frontend/package.json

💤 Files with no reviewable changes: 1

• frontend/.eslintignore

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to GitHub limitations.

⚠️ Outside diff range comments (1)

🟡 Minor · Match template literals in the Bootstrap class restriction. · .eslintrc.js:26-64

frontend/.eslintrc.js:26-64
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Match template literals in the Bootstrap class restriction.

The selector only matches Literal descendants. The reachable IdentityTraits example stores font-weight-medium in a TemplateElement, so the lint rule does not report this disallowed Bootstrap class.

Suggested fix

-      "JSXAttribute[name.name='className'] Literal[value=/(^|\\s)(font-weight-[a-z]+|float-(left|right)|text-(left|right)|[mp][lr]-([0-9]|auto))(\\s|$)/]",
+      "JSXAttribute[name.name='className'] :matches(Literal[value=/(^|\\s)(font-weight-[a-z]+|float-(left|right)|text-(left|right)|[mp][lr]-([0-9]|auto))(\\s|$)/], TemplateElement[value.raw=/(^|\\s)(font-weight-[a-z]+|float-(left|right)|text-(left|right)|[mp][lr]-([0-9]|auto))(\\s|$)/])",

---

ℹ️ Review info

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: ASSERTIVE
• Plan: Advanced
• Run ID: bbd1d21e-4211-4191-b0cc-f7b7afbca308

📥 Commits

Reviewing files that changed from the base of the PR and between 3b1f91f and bcaf4e7.

📒 Files selected for processing: 2

• frontend/.eslintrc.js
• frontend/bin/check-scss.js

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.