Enable tailwind class sorting.

nedtwigg · nedtwigg · commit 965e8a4e2a84 · 2025-09-16T16:49:46.000-07:00
diff --git a/browser-extension/biome.json b/browser-extension/biome.json
@@ -47,6 +47,9 @@
         "noUnusedVariables": "error",
         "useValidTypeof": "error"
       },
+      "nursery": {
+        "useSortedClasses": "error"
+      },
       "recommended": true,
       "style": {
         "noDefaultExport": "off",
diff --git a/browser-extension/src/components/Badge.tsx b/browser-extension/src/components/Badge.tsx
@@ -17,7 +17,7 @@ const Badge = ({ text, type }: BadgeProps) => {
         }),
       )}
     >
-      {type === 'blank' || <Icon className='w-3 h-3' />}
+      {type === 'blank' || <Icon className='h-3 w-3' />}
       {text || type}
     </span>
   )
diff --git a/browser-extension/src/components/MultiSegment.tsx b/browser-extension/src/components/MultiSegment.tsx
@@ -39,7 +39,7 @@ const MultiSegment = <T,>({ segments, value, onValueChange }: MultiSegmentProps<
             onClick={() => onValueChange(segment.value)}
             type='button'
           >
-            {segment.type === 'blank' || <Icon className='w-3 h-3' />}
+            {segment.type === 'blank' || <Icon className='h-3 w-3' />}
             {segment.text}
           </button>
         )
diff --git a/browser-extension/src/components/PopupRoot.tsx b/browser-extension/src/components/PopupRoot.tsx
@@ -109,18 +109,18 @@ export function PopupRoot({ drafts }: PopupRootProps) {
     <div className='bg-white'>
       {/* Bulk actions bar - floating popup */}
       {selectedIds.size > 0 && (
-        <div className='fixed bottom-6 left-1/2 transform -translate-x-1/2 p-3 bg-blue-50 rounded-md shadow-lg border border-blue-200 flex items-center gap-3 z-50'>
-          <span className='text-sm font-medium'>{selectedIds.size} selected</span>
-          <button type='button' className='text-sm text-blue-600 hover:underline'>
+        <div className='-translate-x-1/2 fixed bottom-6 left-1/2 z-50 flex transform items-center gap-3 rounded-md border border-blue-200 bg-blue-50 p-3 shadow-lg'>
+          <span className='font-medium text-sm'>{selectedIds.size} selected</span>
+          <button type='button' className='text-blue-600 text-sm hover:underline'>
             Copy
           </button>
-          <button type='button' className='text-sm text-blue-600 hover:underline'>
+          <button type='button' className='text-blue-600 text-sm hover:underline'>
             Preview
           </button>
-          <button type='button' className='text-sm text-blue-600 hover:underline'>
+          <button type='button' className='text-blue-600 text-sm hover:underline'>
             Discard
           </button>
-          <button type='button' className='text-sm text-blue-600 hover:underline'>
+          <button type='button' className='text-blue-600 text-sm hover:underline'>
             Open
           </button>
         </div>
@@ -133,7 +133,7 @@ export function PopupRoot({ drafts }: PopupRootProps) {
             <col className='w-10' />
             <col />
           </colgroup>
-          <thead className='border-b border-gray-400'>
+          <thead className='border-gray-400 border-b'>
             <tr>
               <th scope='col' className='px-3 py-3'>
                 <input
@@ -144,20 +144,20 @@ export function PopupRoot({ drafts }: PopupRootProps) {
                   className='rounded'
                 />
               </th>
-              <th scope='col' className='px-3 py-3 text-left text-xs text-gray-500'>
+              <th scope='col' className='px-3 py-3 text-left text-gray-500 text-xs'>
                 <div className='relative'>
                   <div className='flex items-center gap-1'>
                     <div className='relative flex-1'>
-                      <Search className='absolute left-1 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400' />
+                      <Search className='-translate-y-1/2 absolute top-1/2 left-1 h-4 w-4 text-gray-400' />
                       <input
                         type='text'
                         placeholder='Search drafts...'
                         value={filters.searchQuery}
                         onChange={(e) => updateFilter('searchQuery', e.target.value)}
-                        className='w-full pl-5 pr-3 h-5 border border-gray-300 rounded-sm text-sm font-normal focus:outline-none focus:border-blue-500'
+                        className='h-5 w-full rounded-sm border border-gray-300 pr-3 pl-5 font-normal text-sm focus:border-blue-500 focus:outline-none'
                       />
                     </div>
-                    <div className='relative flex overflow-hidden gap-1'>
+                    <div className='relative flex gap-1 overflow-hidden'>
                       <button
                         type='button'
                         onClick={() => updateFilter('showTrashed', !filters.showTrashed)}
@@ -169,11 +169,11 @@ export function PopupRoot({ drafts }: PopupRootProps) {
                           'border',
                         )}
                       >
-                        <Trash2 className='w-3 h-3' />
+                        <Trash2 className='h-3 w-3' />
                         {filters.showTrashed ? (
-                          <Eye className='w-3 h-3' />
+                          <Eye className='h-3 w-3' />
                         ) : (
-                          <EyeOff className='w-3 h-3' />
+                          <EyeOff className='h-3 w-3' />
                         )}
                       </button>
                       <MultiSegment<FilterState['sentFilter']>
@@ -207,7 +207,7 @@ export function PopupRoot({ drafts }: PopupRootProps) {
                           'border',
                         )}
                       >
-                        <Settings className='w-3 h-3' />
+                        <Settings className='h-3 w-3' />
                       </button>
                     </div>
                   </div>
@@ -244,11 +244,11 @@ function commentRow(
       <td className='px-3 py-3'>
         <div className='space-y-1'>
           {/* Context line */}
-          <div className='flex items-center justify-between gap-1.5 text-xs text-gray-600'>
-            <div className='flex items-center gap-1.5 min-w-0 flex-1'>
+          <div className='flex items-center justify-between gap-1.5 text-gray-600 text-xs'>
+            <div className='flex min-w-0 flex-1 items-center gap-1.5'>
               {enhancer.tableUpperDecoration(row.spot)}
             </div>
-            <div className='flex items-center gap-1 flex-shrink-0'>
+            <div className='flex flex-shrink-0 items-center gap-1'>
               {row.latestDraft.stats.links.length > 0 && (
                 <Badge type='link' text={row.latestDraft.stats.links.length} />
               )}
@@ -266,14 +266,14 @@ function commentRow(
 
           {/* Title */}
           <div className='flex items-center gap-1'>
-            <a href='TODO' className='text-sm font-medium  hover:underline truncate'>
+            <a href='TODO' className='truncate font-medium text-sm hover:underline'>
               {enhancer.tableTitle(row.spot)}
             </a>
             <Badge type={row.isSent ? 'sent' : 'unsent'} />
             {row.isTrashed && <Badge type='trashed' />}
           </div>
           {/* Draft */}
-          <div className='text-sm truncate'>
+          <div className='truncate text-sm'>
             <span className='text-gray-500'>{row.latestDraft.content.substring(0, 100)}…</span>
           </div>
         </div>
@@ -283,9 +283,9 @@ function commentRow(
 }
 
 const EmptyState = () => (
-  <div className='max-w-4xl mx-auto text-center py-16'>
-    <h2 className='text-2xl font-semibold mb-4'>No comments open</h2>
-    <p className='text-gray-600 mb-6'>
+  <div className='mx-auto max-w-4xl py-16 text-center'>
+    <h2 className='mb-4 font-semibold text-2xl'>No comments open</h2>
+    <p className='mb-6 text-gray-600'>
       Your drafts will appear here when you start typing in comment boxes across GitHub and Reddit.
     </p>
     <div className='space-y-2'>
@@ -301,8 +301,8 @@ const EmptyState = () => (
 )
 
 const NoMatchesState = ({ onClearFilters }: { onClearFilters: () => void }) => (
-  <div className='text-center py-16'>
-    <p className='text-gray-600 mb-4'>No matches found</p>
+  <div className='py-16 text-center'>
+    <p className='mb-4 text-gray-600'>No matches found</p>
     <button type='button' onClick={onClearFilters} className='text-blue-600 hover:underline'>
       Clear filters
     </button>
diff --git a/browser-extension/src/lib/enhancers/CommentEnhancerMissing.tsx b/browser-extension/src/lib/enhancers/CommentEnhancerMissing.tsx
@@ -8,7 +8,7 @@ export class CommentEnhancerMissing implements CommentEnhancer {
     return (
       <button
         type='button'
-        className='relative inline-block border-none bg-transparent p-0 text-left cursor-pointer underline'
+        className='relative inline-block cursor-pointer border-none bg-transparent p-0 text-left underline'
         style={{
           display: 'inline-block',
           position: 'relative',
@@ -24,10 +24,10 @@ export class CommentEnhancerMissing implements CommentEnhancer {
       >
         hover for json
         <div
-          className='popup absolute top-full left-0 bg-gray-100 border border-gray-300 rounded shadow-lg p-2 z-50 min-w-[320px]'
+          className='popup absolute top-full left-0 z-50 min-w-[320px] rounded border border-gray-300 bg-gray-100 p-2 shadow-lg'
           style={{ display: 'none' }}
         >
-          <pre className='m-0 text-xs font-mono select-text cursor-text whitespace-pre-wrap break-words'>
+          <pre className='m-0 cursor-text select-text whitespace-pre-wrap break-words font-mono text-xs'>
             {JSON.stringify(spot, null, 2)}
           </pre>
         </div>
diff --git a/browser-extension/src/lib/enhancers/github/githubIssueAddComment.tsx b/browser-extension/src/lib/enhancers/github/githubIssueAddComment.tsx
@@ -62,11 +62,11 @@ export class GitHubIssueAddCommentEnhancer implements CommentEnhancer<GitHubIssu
   tableUpperDecoration(spot: GitHubIssueAddCommentSpot): React.ReactNode {
     return (
       <>
-        <span className='w-4 h-4 flex items-center justify-center flex-shrink-0'>
+        <span className='flex h-4 w-4 flex-shrink-0 items-center justify-center'>
           <IssueOpenedIcon size={16} />
         </span>
         #{spot.number}
-        <a href={`https://${spot.domain}/${spot.slug}`} className='hover:underline truncate'>
+        <a href={`https://${spot.domain}/${spot.slug}`} className='truncate hover:underline'>
           {spot.slug}
         </a>
       </>
diff --git a/browser-extension/src/lib/enhancers/github/githubIssueNewComment.tsx b/browser-extension/src/lib/enhancers/github/githubIssueNewComment.tsx
@@ -57,7 +57,7 @@ export class GitHubIssueNewCommentEnhancer implements CommentEnhancer<GitHubIssu
     return (
       <>
         <span>New Issue</span>
-        <span className='font-mono text-sm text-muted-foreground'> {slug} </span>
+        <span className='font-mono text-muted-foreground text-sm'> {slug} </span>
       </>
     )
   }
diff --git a/browser-extension/src/lib/enhancers/github/githubPRAddComment.tsx b/browser-extension/src/lib/enhancers/github/githubPRAddComment.tsx
@@ -67,7 +67,7 @@ export class GitHubPRAddCommentEnhancer implements CommentEnhancer<GitHubPRAddCo
     const { slug, number } = spot
     return (
       <>
-        <span className='font-mono text-sm text-muted-foreground'>{slug}</span>
+        <span className='font-mono text-muted-foreground text-sm'>{slug}</span>
         <span className='ml-2 font-medium'>PR #{number}</span>
       </>
     )
diff --git a/browser-extension/src/lib/enhancers/github/githubPRNewComment.tsx b/browser-extension/src/lib/enhancers/github/githubPRNewComment.tsx
@@ -62,7 +62,7 @@ export class GitHubPRNewCommentEnhancer implements CommentEnhancer<GitHubPRNewCo
     return (
       <>
         <span>New PR</span>
-        <span className='font-mono text-sm text-muted-foreground'> {slug} </span>
+        <span className='font-mono text-muted-foreground text-sm'> {slug} </span>
       </>
     )
   }
diff --git a/browser-extension/tests/playground/claude.tsx b/browser-extension/tests/playground/claude.tsx
@@ -105,18 +105,18 @@ export const ClaudePrototype = () => {
     <div className='bg-white'>
       {/* Bulk actions bar - floating popup */}
       {selectedIds.size > 0 && (
-        <div className='fixed bottom-6 left-1/2 transform -translate-x-1/2 p-3 bg-blue-50 rounded-md shadow-lg border border-blue-200 flex items-center gap-3 z-50'>
-          <span className='text-sm font-medium'>{selectedIds.size} selected</span>
-          <button type='button' className='text-sm text-blue-600 hover:underline'>
+        <div className='-translate-x-1/2 fixed bottom-6 left-1/2 z-50 flex transform items-center gap-3 rounded-md border border-blue-200 bg-blue-50 p-3 shadow-lg'>
+          <span className='font-medium text-sm'>{selectedIds.size} selected</span>
+          <button type='button' className='text-blue-600 text-sm hover:underline'>
             Copy
           </button>
-          <button type='button' className='text-sm text-blue-600 hover:underline'>
+          <button type='button' className='text-blue-600 text-sm hover:underline'>
             Preview
           </button>
-          <button type='button' className='text-sm text-blue-600 hover:underline'>
+          <button type='button' className='text-blue-600 text-sm hover:underline'>
             Discard
           </button>
-          <button type='button' className='text-sm text-blue-600 hover:underline'>
+          <button type='button' className='text-blue-600 text-sm hover:underline'>
             Open
           </button>
         </div>
@@ -129,7 +129,7 @@ export const ClaudePrototype = () => {
             <col className='w-10' />
             <col />
           </colgroup>
-          <thead className='border-b border-gray-400'>
+          <thead className='border-gray-400 border-b'>
             <tr>
               <th scope='col' className='px-3 py-3'>
                 <input
@@ -140,20 +140,20 @@ export const ClaudePrototype = () => {
                   className='rounded'
                 />
               </th>
-              <th scope='col' className='px-3 py-3 text-left text-xs text-gray-500'>
+              <th scope='col' className='px-3 py-3 text-left text-gray-500 text-xs'>
                 <div className='relative'>
                   <div className='flex items-center gap-1'>
                     <div className='relative flex-1'>
-                      <Search className='absolute left-1 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400' />
+                      <Search className='-translate-y-1/2 absolute top-1/2 left-1 h-4 w-4 text-gray-400' />
                       <input
                         type='text'
                         placeholder='Search drafts...'
                         value={filters.searchQuery}
                         onChange={(e) => updateFilter('searchQuery', e.target.value)}
-                        className='w-full pl-5 pr-3 h-5 border border-gray-300 rounded-sm text-sm font-normal focus:outline-none focus:border-blue-500'
+                        className='h-5 w-full rounded-sm border border-gray-300 pr-3 pl-5 font-normal text-sm focus:border-blue-500 focus:outline-none'
                       />
                     </div>
-                    <div className='relative flex overflow-hidden gap-1'>
+                    <div className='relative flex gap-1 overflow-hidden'>
                       <button
                         type='button'
                         onClick={() => updateFilter('showTrashed', !filters.showTrashed)}
@@ -165,11 +165,11 @@ export const ClaudePrototype = () => {
                           'border',
                         )}
                       >
-                        <Trash2 className='w-3 h-3' />
+                        <Trash2 className='h-3 w-3' />
                         {filters.showTrashed ? (
-                          <Eye className='w-3 h-3' />
+                          <Eye className='h-3 w-3' />
                         ) : (
-                          <EyeOff className='w-3 h-3' />
+                          <EyeOff className='h-3 w-3' />
                         )}
                       </button>
                       <MultiSegment<FilterState['sentFilter']>
@@ -203,7 +203,7 @@ export const ClaudePrototype = () => {
                           'border',
                         )}
                       >
-                        <Settings className='w-3 h-3' />
+                        <Settings className='h-3 w-3' />
                       </button>
                     </div>
                   </div>
@@ -240,11 +240,11 @@ function commentRow(
       <td className='px-3 py-3'>
         <div className='space-y-1'>
           {/* Context line */}
-          <div className='flex items-center justify-between gap-1.5 text-xs text-gray-600'>
-            <div className='flex items-center gap-1.5 min-w-0 flex-1'>
+          <div className='flex items-center justify-between gap-1.5 text-gray-600 text-xs'>
+            <div className='flex min-w-0 flex-1 items-center gap-1.5'>
               {enhancer.tableUpperDecoration(row.spot)}
             </div>
-            <div className='flex items-center gap-1 flex-shrink-0'>
+            <div className='flex flex-shrink-0 items-center gap-1'>
               {row.latestDraft.stats.links.length > 0 && (
                 <Badge type='link' text={row.latestDraft.stats.links.length} />
               )}
@@ -262,14 +262,14 @@ function commentRow(
 
           {/* Title */}
           <div className='flex items-center gap-1'>
-            <a href='TODO' className='text-sm font-medium  hover:underline truncate'>
+            <a href='TODO' className='truncate font-medium text-sm hover:underline'>
               {enhancer.tableTitle(row.spot)}
             </a>
             <Badge type={row.isSent ? 'sent' : 'unsent'} />
             {row.isTrashed && <Badge type='trashed' />}
           </div>
           {/* Draft */}
-          <div className='text-sm truncate'>
+          <div className='truncate text-sm'>
             <span className='text-gray-500'>{row.latestDraft.content.substring(0, 100)}…</span>
           </div>
         </div>
@@ -279,9 +279,9 @@ function commentRow(
 }
 
 const EmptyState = () => (
-  <div className='max-w-4xl mx-auto text-center py-16'>
-    <h2 className='text-2xl font-semibold mb-4'>No comments open</h2>
-    <p className='text-gray-600 mb-6'>
+  <div className='mx-auto max-w-4xl py-16 text-center'>
+    <h2 className='mb-4 font-semibold text-2xl'>No comments open</h2>
+    <p className='mb-6 text-gray-600'>
       Your drafts will appear here when you start typing in comment boxes across GitHub and Reddit.
     </p>
     <div className='space-y-2'>
@@ -297,8 +297,8 @@ const EmptyState = () => (
 )
 
 const NoMatchesState = ({ onClearFilters }: { onClearFilters: () => void }) => (
-  <div className='text-center py-16'>
-    <p className='text-gray-600 mb-4'>No matches found</p>
+  <div className='py-16 text-center'>
+    <p className='mb-4 text-gray-600'>No matches found</p>
     <button type='button' onClick={onClearFilters} className='text-blue-600 hover:underline'>
       Clear filters
     </button>
diff --git a/browser-extension/tests/playground/playground.tsx b/browser-extension/tests/playground/playground.tsx
@@ -18,19 +18,19 @@ const App = () => {
   return (
     <div className='min-h-screen bg-slate-100'>
       <div className='container px-6 py-8'>
-        <div className='bg-white p-6 rounded-lg shadow-sm border border-slate-200 mb-6'>
-          <h1 className='text-2xl font-bold text-slate-900 mb-2'>Popup Simulator</h1>
-          <ul className='text-sm text-slate-600 space-y-1'>
+        <div className='mb-6 rounded-lg border border-slate-200 bg-white p-6 shadow-sm'>
+          <h1 className='mb-2 font-bold text-2xl text-slate-900'>Popup Simulator</h1>
+          <ul className='space-y-1 text-slate-600 text-sm'>
             <li>The popup frame is meant to exactly match the browser extension popup.</li>
             <li>Hot reload is active for instant updates</li>
           </ul>
-          <div className='flex gap-2 mt-4'>
+          <div className='mt-4 flex gap-2'>
             {Object.entries(MODES).map(([mode, config]) => (
               <button
                 key={mode}
                 type='button'
                 onClick={() => setActiveComponent(mode as Mode)}
-                className={`px-3 py-2 rounded text-sm font-medium transition-colors ${
+                className={`rounded px-3 py-2 font-medium text-sm transition-colors ${
                   activeComponent === mode
                     ? 'bg-blue-600 text-white'
                     : 'bg-gray-100 text-gray-700 hover:bg-gray-200'

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ const Badge = ({ text, type }: BadgeProps) => {`
`17`	`17`	`}),`
`18`	`18`	`)}`
`19`	`19`	`>`
`20`		`- {type === 'blank' \|\| <Icon className='w-3 h-3' />}`
	`20`	`+ {type === 'blank' \|\| <Icon className='h-3 w-3' />}`
`21`	`21`	`{text \|\| type}`
`22`	`22`	`</span>`
`23`	`23`	`)`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ const MultiSegment = <T,>({ segments, value, onValueChange }: MultiSegmentProps<`
`39`	`39`	`onClick={() => onValueChange(segment.value)}`
`40`	`40`	`type='button'`
`41`	`41`	`>`
`42`		`- {segment.type === 'blank' \|\| <Icon className='w-3 h-3' />}`
	`42`	`+ {segment.type === 'blank' \|\| <Icon className='h-3 w-3' />}`
`43`	`43`	`{segment.text}`
`44`	`44`	`</button>`
`45`	`45`	`)`
Original file line number	Diff line number	Diff line change
`@@ -57,7 +57,7 @@ export class GitHubIssueNewCommentEnhancer implements CommentEnhancer<GitHubIssu`
`57`	`57`	`return (`
`58`	`58`	`<>`
`59`	`59`	`<span>New Issue</span>`
`60`		`- <span className='font-mono text-sm text-muted-foreground'> {slug} </span>`
	`60`	`+ <span className='font-mono text-muted-foreground text-sm'> {slug} </span>`
`61`	`61`	`</>`
`62`	`62`	`)`
`63`	`63`	`}`
Original file line number	Diff line number	Diff line change
`@@ -67,7 +67,7 @@ export class GitHubPRAddCommentEnhancer implements CommentEnhancer<GitHubPRAddCo`
`67`	`67`	`const { slug, number } = spot`
`68`	`68`	`return (`
`69`	`69`	`<>`
`70`		`- <span className='font-mono text-sm text-muted-foreground'>{slug}</span>`
	`70`	`+ <span className='font-mono text-muted-foreground text-sm'>{slug}</span>`
`71`	`71`	`<span className='ml-2 font-medium'>PR #{number}</span>`
`72`	`72`	`</>`
`73`	`73`	`)`
Original file line number	Diff line number	Diff line change
`@@ -62,7 +62,7 @@ export class GitHubPRNewCommentEnhancer implements CommentEnhancer<GitHubPRNewCo`
`62`	`62`	`return (`
`63`	`63`	`<>`
`64`	`64`	`<span>New PR</span>`
`65`		`- <span className='font-mono text-sm text-muted-foreground'> {slug} </span>`
	`65`	`+ <span className='font-mono text-muted-foreground text-sm'> {slug} </span>`
`66`	`66`	`</>`
`67`	`67`	`)`
`68`	`68`	`}`