refined-github · fregante · Jun 3, 2026 · Jun 1, 2026 · Jun 1, 2026 · Jun 1, 2026
diff --git a/eslint-rules/restricted-syntax.js b/eslint-rules/restricted-syntax.js
@@ -1,4 +1,15 @@
 const restrictedSyntax = {
+	'byo/use-clsx-cx': ['error', {
+		selector: 'JSXAttribute[name.name="className"] > JSXExpressionContainer > TemplateLiteral',
+		message: 'Use `cx()` from clsx instead of template literals in className',
+	}, {
+		selector: 'JSXAttribute[name.name="className"] > JSXExpressionContainer > BinaryExpression[operator="+"]',
+		message: 'Use `cx()` from clsx instead of string concatenation in className',
+	}],
+	'byo/clsx-import-as-cx': ['error', {
+		selector: 'ImportDeclaration[source.value="clsx"] > ImportDefaultSpecifier:not([local.name="cx"])',
+		message: "Import clsx as `cx`: `import cx from 'clsx'`",
+	}],
 	'byo/selectors-array-for-complex-strings': ['error', {
 		selector:
 			':matches([callee.name=delegate], [callee.name=$], [callee.name=$$], [callee.name=$optional], [callee.name=closestElement], [callee.name=closestElementOptional], [callee.name=observe], [callee.property.name=querySelector], [callee.property.name=querySelectorAll])[arguments.0.value=/,/][arguments.0.value.length>=20]:not([arguments.0.value=/:has|:is|:not/])',

diff --git a/eslint.config.js b/eslint.config.js
@@ -46,7 +46,7 @@
 				// Prefer unicorn's version
 				'no-warning-comments': 'off',
 				'unicorn/expiring-todo-comments': ['warn', {
 					// https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/expiring-todo-comments.md#disallow-warning-comments-no-warning-comments
 					allowWarningComments: false,
 				}],

@@ -104,6 +104,14 @@
 				'n/prefer-global/process': 'off',
 				'no-use-extend-native/no-use-extend-native': 'off', // False positives on ES2024 static methods (Map.groupBy, Object.groupBy, etc.)
 
+				'no-restricted-imports': ['error', {
+					paths: [{
+						name: 'clsx',
+						importNames: ['clsx'],
+						message: "Use default import: import cx from 'clsx'",
+					}],
+				}],
+
 				// Import-x rules customization
 				'import-x/consistent-type-specifier-style': 'off',
 				'import-x/prefer-default-export': 'error',
@@ -125,7 +133,7 @@
 		{
 			files: ['**/*.{ts,tsx,cts,mts}'],
 			rules: {
 				// TODO: Drop after moving to dprint
 				// Copied from here, except ImportDeclaration
 				// https://github.com/xojs/eslint-config-xo/blob/0e5bd83b1780f3a6a63ae270c3c8ee0ab947cc8f/source/javascript-rules.js#L458
 				'@stylistic/object-curly-newline': ['error', {
@@ -303,7 +311,7 @@
 			},
 		},

 		// TODO: Use global `/flat` config. Currently limited to svelte files because dprint is applied to their JS
 		rules: eslintConfigPrettier.rules,
 	},
 	{
@@ -347,7 +355,7 @@
 	},
 	{
 		files: ['**/*.js', '**/*.ts'],
 		// TODO: Use global `/flat` config
 		rules: eslintConfigPrettier.rules,
 	},
 ]);
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
 		"@sindresorhus/to-milliseconds": "^2.0.0",
 		"abort-utils": "^3.0.0",
 		"batched-function": "^3.0.0",
+		"clsx": "^2.1.1",
 		"code-tag": "^1.2.0",
 		"debounce-fn": "^6.0.0",
 		"delegate-it": "^6.4.0",

diff --git a/source/features/avoid-accidental-submissions.tsx b/source/features/avoid-accidental-submissions.tsx
@@ -1,3 +1,4 @@
+import cx from 'clsx';
 import delegate, {type DelegateEvent} from 'delegate-it';
 import React from 'dom-chef';
 import * as pageDetect from 'github-url-detection';
@@ -51,7 +52,7 @@ function onKeyDown(event: DelegateEvent<KeyboardEvent, HTMLInputElement>): void
 		: 'mt-2 mb-n1';
 
 	const message = (
-		<p className={'rgh-avoid-accidental-submissions ' + spacingClasses}>
+		<p className={cx('rgh-avoid-accidental-submissions', spacingClasses)}>
 			A submission via <kbd>enter</kbd> has been prevented. You can press <kbd>enter</kbd> again or use{' '}
 			<kbd>{moduleKey}</kbd>
 			<kbd>enter</kbd>.

diff --git a/source/features/collapsible-content-button.tsx b/source/features/collapsible-content-button.tsx
@@ -1,3 +1,4 @@
+import cx from 'clsx';
 import delegate, {type DelegateEvent} from 'delegate-it';
 import React from 'dom-chef';
 import * as pageDetect from 'github-url-detection';
@@ -61,7 +62,7 @@
 		'flex-shrink-0',
 	];

 	// TODO: ensure it's added only once before both `table-input` and `collapsible-content-button`
 	const divider = $([
 		'[data-component="ActionBar.VerticalDivider"]', // React component
 		'.ActionBar-divider', // Still used in gists, PRs, etc
@@ -81,7 +82,7 @@
 		divider,
 		<button
 			type="button"
-			className={classes.join(' ')}
+			className={cx(classes)}
 			aria-label="Add collapsible content"
 			data-targets="action-bar.items" // Enables automatic hiding when it doesn't fit
 		>

diff --git a/source/features/comments-time-machine-links.tsx b/source/features/comments-time-machine-links.tsx
@@ -1,3 +1,4 @@
+import cx from 'clsx';
 import delegate, {type DelegateEvent} from 'delegate-it';
 import React from 'dom-chef';
 import elementReady from 'element-ready';
@@ -117,7 +118,7 @@ function addDropdownLink(menu: HTMLElement, timestamp: string): void {
 		<div className="dropdown-divider" />,
 		<a
 			href={buildRepoUrl(`tree/HEAD@{${timestamp}}`)}
-			className={'dropdown-item btn-link ' + linkifiedUrlClass}
+			className={cx('dropdown-item btn-link', linkifiedUrlClass)}
 			role="menuitem"
 			title="Browse repository like it appeared on this day"
 		>
@@ -137,7 +138,7 @@ function addDropdownLinkReact({delegateTarget: delegate}: DelegateEvent): void {
 	const link = (
 		<a
 			href={buildRepoUrl(`tree/HEAD@{${timestamp}}`)}
-			className={menuItemContentWrapper.className + ' ' + linkifiedUrlClass}
+			className={cx(menuItemContentWrapper.className, linkifiedUrlClass)}
 			role="menuitem"
 			title="Browse repository like it appeared on this day"
 			aria-keyshortcuts="v"

diff --git a/source/features/extensible-nav.tsx b/source/features/extensible-nav.tsx
@@ -1,4 +1,5 @@
 import './extensible-nav.css';
+import cx from 'clsx';
 import elementReady from 'element-ready';
 import * as pageDetect from 'github-url-detection';
 import React from 'react';
@@ -55,7 +56,7 @@ function generateTab(item: HTMLAnchorElement): JSX.Element {
 
 	return (
 		<li key={item.href}>
-			<a href={item.href} className={'UnderlineNav-item ' + selectedClass}>
+			<a href={item.href} className={cx('UnderlineNav-item', selectedClass)}>
 				{icon}
 				{label}
 				{counter && (

diff --git a/source/features/locked-issue.tsx b/source/features/locked-issue.tsx
@@ -1,3 +1,4 @@
+import cx from 'clsx';
 import * as pageDetect from 'github-url-detection';
 import LockIcon from 'octicons-plain-react/Lock';
 import React from 'react';
@@ -13,7 +14,7 @@ export const {class: featureClass, selector: featureSelector} = getIdentifiers(i
 
 function LockedIndicator(): JSX.Element {
 	return (
-		<span title="Locked" className={`State d-flex flex-items-center flex-shrink-0 ${featureClass}`}>
+		<span title="Locked" className={cx('State d-flex flex-items-center flex-shrink-0', featureClass)}>
 			<LockIcon className="flex-items-center mr-1 tmp-mr-1" />
 			Locked
 		</span>
@@ -23,7 +24,7 @@ function LockedIndicator(): JSX.Element {
 function addLockLegacy(element: HTMLElement): void {
 	const closestSticky = closestElementOptional(['.sticky-content', '.gh-header-sticky'], element);
 	element.after(
-		<LockedIndicator className={`mb-2 tmp-mb-2 ${closestSticky ? 'mr-2 tmp-mr-2 ' : ''}`} />,
+		<LockedIndicator className={cx('mb-2 tmp-mb-2', closestSticky && 'mr-2 tmp-mr-2')} />,
 	);
 }
 

diff --git a/source/features/notifications-ui.tsx b/source/features/notifications-ui.tsx
@@ -1,4 +1,5 @@
 import './notifications-ui.css';
+import cx from 'clsx';
 import React from 'dom-chef';
 import {$, $$} from 'select-dom';
 import * as pageDetect from 'github-url-detection';
@@ -34,7 +35,7 @@ function replaceNotificationsDropdown(dropdown: Element): void {
 
 					return (
 						<li
-							className={`SegmentedControl-item ${button.ariaChecked === 'true' ? 'SegmentedControl-item--selected' : ''}`}
+							className={cx('SegmentedControl-item', button.ariaChecked === 'true' && 'SegmentedControl-item--selected')}
 							role="listitem"
 							data-targets="segmented-control.items"
 						>

diff --git a/source/features/one-click-diff-options.tsx b/source/features/one-click-diff-options.tsx
@@ -1,3 +1,4 @@
+import cx from 'clsx';
 import React from 'dom-chef';
 import * as pageDetect from 'github-url-detection';
 import CheckIcon from 'octicons-plain-react/Check';
@@ -37,7 +38,7 @@ function attachButtons(nativeDiffButtons: HTMLElement): void {
 			<a
 				href={getAlternateUrl()}
 				data-hotkey="d w"
-				className={'float-right mr-3 tmp-mr-3 btn btn-sm ' + (isHidingWhitespace() ? 'color-fg-subtle' : '')}
+				className={cx('float-right mr-3 tmp-mr-3 btn btn-sm', isHidingWhitespace() && 'color-fg-subtle')}
 			>
 				{isHidingWhitespace() && <CheckIcon />} No Whitespace
 			</a>,

diff --git a/source/features/one-click-pr-or-gist.tsx b/source/features/one-click-pr-or-gist.tsx
@@ -1,5 +1,6 @@
 import './one-click-pr-or-gist.css';
 
+import cx from 'clsx';
 import React from 'dom-chef';
 import * as pageDetect from 'github-url-detection';
 import {$, $$, $optional, elementExists} from 'select-dom';
@@ -33,7 +34,7 @@ function init(): void | false {
 			description,
 			<button
 				data-disable-invalid
-				className={classList.join(' ')}
+				className={cx(classList)}
 				type="submit"
 				name={radioButton.name}
 				value={radioButton.value}

diff --git a/source/features/one-click-review-submission.tsx b/source/features/one-click-review-submission.tsx
@@ -2,6 +2,7 @@
 // We will drop the feature once that view has been gone for 6 months.
 // https://github.com/refined-github/refined-github/issues/8711
 // https://github.com/refined-github/refined-github/issues/9447
+import cx from 'clsx';
 import delegate, {type DelegateEvent} from 'delegate-it';
 import React from 'dom-chef';
 import * as pageDetect from 'github-url-detection';
@@ -65,7 +66,7 @@ function replaceCheckboxes(originalSubmitButton: HTMLButtonElement): void {
 				// Old version of GH don't nest the submit button inside the form, so must be linked manually. Issue #6963.
 				form={formAttribute}
 				value={radio.value}
-				className={classes.join(' ')}
+				className={cx(classes)}
 				aria-label={tooltip}
 				disabled={radio.disabled}
 			>

diff --git a/source/features/open-all-conversations.tsx b/source/features/open-all-conversations.tsx
@@ -1,3 +1,4 @@
+import cx from 'clsx';
 import delegate from 'delegate-it';
 import React from 'dom-chef';
 import * as pageDetect from 'github-url-detection';
@@ -49,7 +50,7 @@ function add(anchor: HTMLElement): void {
 	anchor.prepend(
 		<button
 			type="button"
-			className={`rgh-open-all-conversations ${classes}`}
+			className={cx('rgh-open-all-conversations', classes)}
 		>
 			{isSelected
 				? 'Open selected'

diff --git a/source/features/open-all-notifications.tsx b/source/features/open-all-notifications.tsx
@@ -1,5 +1,6 @@
 import './open-all-notifications.css';
 
+import cx from 'clsx';
 import delegate, {type DelegateEvent} from 'delegate-it';
 import React from 'dom-chef';
 import * as pageDetect from 'github-url-detection';
@@ -84,7 +85,7 @@ function addSelectedButton(selectedActionsGroup: HTMLElement): void {
 		}, (
 			<button
 				type="button"
-				className={'btn btn-sm mr-2 tmp-mr-2 ' + openSelected.class}
+				className={cx('btn btn-sm mr-2 tmp-mr-2', openSelected.class)}
 				data-hotkey="p"
 			>
 				<LinkExternalIcon className="mr-1 tmp-mr-1" />Open
@@ -104,7 +105,7 @@ function addToRepoGroup(markReadButton: HTMLElement): void {
 			{label: 'Open all unread notifications from this repo', direction: 'w'},
 			<button
 				type="button"
-				className={'btn btn-sm mr-2 tmp-mr-2 ' + openUnread.class}
+				className={cx('btn btn-sm mr-2 tmp-mr-2', openUnread.class)}
 			>
 				<LinkExternalIcon width={16} /> Open unread
 			</button>,
@@ -118,7 +119,7 @@ function addToMainHeader(notificationHeader: HTMLElement): void {
 	}
 
 	notificationHeader.append(
-		<button className={'btn btn-sm ml-auto d-none ' + openUnread.class} type="button">
+		<button className={cx('btn btn-sm ml-auto d-none', openUnread.class)} type="button">
 			<LinkExternalIcon className="mr-1 tmp-mr-1" />Open all unread
 		</button>,
 	);

diff --git a/source/features/quick-resolve-conflicts.tsx b/source/features/quick-resolve-conflicts.tsx
@@ -1,3 +1,4 @@
+import cx from 'clsx';
 import React from 'dom-chef';
 import * as pageDetect from 'github-url-detection';
 import CopilotIcon from 'octicons-plain-react/Copilot';
@@ -33,7 +34,7 @@ function createResolveConflictsButtons(menuItems: Element[]): JSX.Element {
 				const shouldHaveTooltip = isCopilotItem || isDisabled;
 
 				let button: JSX.Element | HTMLAnchorElement = <button
-					className={`Button Button--medium Button--secondary ${isCopilotItem ? 'Button--iconOnly' : ''}`}
+					className={cx('Button Button--medium Button--secondary', isCopilotItem && 'Button--iconOnly')}
 					type="button"
 					disabled={isDisabled}
 					onClick={isCopilotItem ? insertCopilotInstruction : undefined}

diff --git a/source/features/release-download-count.tsx b/source/features/release-download-count.tsx
@@ -6,6 +6,7 @@ This feature is documented at https://github.com/refined-github/refined-github/w
 
 import './release-download-count.css';
 
+import cx from 'clsx';
 import React from 'dom-chef';
 import * as pageDetect from 'github-url-detection';
 import {abbreviateNumber} from 'js-abbreviation-number';
@@ -70,7 +71,7 @@ async function addCounts(assetsList: HTMLElement): Promise<void> {
 
 		// Add at the beginning of the line to avoid content shift
 		assetSize.parentElement!.prepend(
-			<span className={[...getClasses(assetSize)].join(' ')}>
+			<span className={cx(getClasses(assetSize))}>
 				<span
 					className="d-inline-block text-right"
 					title={`${downloadCount} downloads`}

diff --git a/source/features/repo-avatars.tsx b/source/features/repo-avatars.tsx
@@ -1,3 +1,4 @@
+import cx from 'clsx';
 import React from 'dom-chef';
 import * as pageDetect from 'github-url-detection';
 
@@ -17,7 +18,7 @@ async function add(ownerLabel: HTMLElement): Promise<void> {
 
 	const avatar = (
 		<img
-			className={`d-none d-md-block avatar ${isOldNavbar ? 'ml-1 tmp-ml-1' : ''} mr-2 tmp-mr-2`}
+			className={cx('d-none d-md-block avatar mr-2 tmp-mr-2', isOldNavbar && 'ml-1 tmp-ml-1')}
 			src={source}
 			width={size}
 			height={size}

diff --git a/source/features/rgh-improve-new-issue-form.tsx b/source/features/rgh-improve-new-issue-form.tsx
@@ -1,3 +1,4 @@
+import cx from 'clsx';
 import delegate, {type DelegateEvent} from 'delegate-it';
 import React from 'dom-chef';
 import * as pageDetect from 'github-url-detection';
@@ -21,7 +22,7 @@ const liesGif = 'https://github.com/user-attachments/assets/f417264f-f230-4156-b
 
 function addNotice(type: 'error' | 'warn', message: JSX.Element): void {
 	$('[class^="CreateIssueForm-module__mainContentSection"]').prepend(
-		<div className={`flash flash-${type} h3 my-9 tmp-my-9`} style={{animation: 'pulse-in 0.3s 2'}}>
+		<div className={cx('flash', `flash-${type}`, 'h3 my-9 tmp-my-9')} style={{animation: 'pulse-in 0.3s 2'}}>
 			{message}
 		</div>,
 	);

diff --git a/source/features/show-associated-branch-prs-on-fork.tsx b/source/features/show-associated-branch-prs-on-fork.tsx
@@ -1,5 +1,6 @@
 import './show-associated-branch-prs-on-fork.css';
 
+import cx from 'clsx';
 import React from 'dom-chef';
 import * as pageDetect from 'github-url-detection';
 import memoize from 'memoize';
@@ -85,7 +86,7 @@ async function addLink(branch: HTMLElement): Promise<void> {
 				className="rgh-pr-link"
 			>
 				<StateIcon width={14} height={14} className={stateClassName} />
-				<RepoForkedIcon width={14} height={14} className={`mr-1 tmp-mr-1 ${stateClassName}`} />
+				<RepoForkedIcon width={14} height={14} className={cx('mr-1 tmp-mr-1', stateClassName)} />
 				#{prInfo.number}
 			</a>
 		</div>,

diff --git a/source/features/tag-changes-link.tsx b/source/features/tag-changes-link.tsx
@@ -1,5 +1,6 @@
 import './tag-changes-link.css';
 
+import cx from 'clsx';
 import React from 'dom-chef';
 import domLoaded from 'dom-loaded';
 import * as pageDetect from 'github-url-detection';
@@ -124,7 +125,7 @@ async function init(): Promise<void> {
 				|| (pageDetect.isSingleReleaseOrTag() && elementExists('.release'))
 			) {
 				lastLink.after(
-					<li className={lastLink.className + ' rgh-changelog-link'}>
+					<li className={cx(lastLink.className, 'rgh-changelog-link')}>
 						{compareLink}
 					</li>,
 				);
@@ -134,7 +135,12 @@ async function init(): Promise<void> {
 			}
 
 			lastLink.parentElement!.after(
-				<div className={'rgh-changelog-link ' + (pageDetect.isReleases() ? 'tmp-my-md-2 my-md-2 mr-4 tmp-mr-3 mr-md-0 tmp-mr-md-0' : 'mr-4 tmp-mr-3 mb-2 tmp-mb-2')}>
+				<div className={cx(
+					'rgh-changelog-link mr-4 tmp-mr-3',
+					pageDetect.isReleases()
+						? 'tmp-my-md-2 my-md-2 mr-md-0 tmp-mr-md-0'
+						: 'mb-2 tmp-mb-2',
+				)}>
 					{compareLink}
 				</div>,
 			);

diff --git a/source/features/update-pr-from-base-branch.tsx b/source/features/update-pr-from-base-branch.tsx
@@ -1,5 +1,6 @@
 import './update-pr-from-base-branch.css';
 
+import cx from 'clsx';
 import delegate, {type DelegateEvent} from 'delegate-it';
 import React from 'dom-chef';
 import * as pageDetect from 'github-url-detection';
@@ -87,7 +88,7 @@ function createButtonGroup(): JSX.Element {
 					{tooltipped(
 						label.tooltipLabel,
 						<button
-							className={`Button--secondary Button--medium Button ${feature.class}`}
+							className={cx('Button--secondary Button--medium Button', feature.class)}
 							data-method={method}
 							type="button"
 						>

diff --git a/source/github-helpers/banner.tsx b/source/github-helpers/banner.tsx
@@ -1,3 +1,4 @@
+import cx from 'clsx';
 import React from 'dom-chef';
 import type {RequireAllOrNone} from 'type-fest';
 
@@ -32,7 +33,7 @@ export default function createBanner(props: BannerProps): JSX.Element {
 	}
 
 	return (
-		<div className={['flash', ...props.classes ?? ''].join(' ')}>
+		<div className={cx('flash', props.classes)}>
 			<div className="d-sm-flex flex-items-center gap-2">
 				<div className="d-flex flex-auto flex-self-center flex-items-center gap-2">
 					{props.icon}