Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-03-13 09:00:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: enable enforce-consistent-class-order tailwind lint rule (#9428)

Browse Source 
## Summary

Enable `better-tailwindcss/enforce-consistent-class-order` lint rule and
auto-fix all 1027 violations across 263 files. Stacked on #9427.

## Changes

- **What**: Sort Tailwind classes into consistent order via `eslint
--fix`
- Enable `enforce-consistent-class-order` as `'error'` in eslint config
- Purely cosmetic reordering — no behavioral or visual changes

## Review Focus

Mechanical auto-fix PR — all changes are class reordering only. This is
the largest diff but lowest risk since it changes no class names, only
their order.

**Stack:** #9417 → #9427 → **this PR**

Fixes #9300 (partial — 3 of 3 rules)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9428-fix-enable-enforce-consistent-class-order-tailwind-lint-rule-31a6d73d3650811c9065f5178ba3e724)
by [Unito](https://www.unito.io)
This commit is contained in:
Christian Byrne
2026-03-05 17:24:34 -08:00
committed by GitHub
parent 60267fc64c
commit ef4e4a69d5
278 changed files with 1027 additions and 1027 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/sidebar/SideToolbar.vue
View File

@@ -15,7 +15,7 @@
:class="
isOverflowing
? 'side-tool-bar-container overflow-y-auto'
: 'flex flex-col h-full'
: 'flex h-full flex-col'
"
>
<div ref="topToolbarRef" :class="groupClasses">
@@ -154,8 +154,8 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
const isOverflowing = ref(false)
const groupClasses = computed(() =>
cn(
'sidebar-item-group flex flex-col items-center overflow-hidden shrink-0',
!isConnected.value && 'rounded-lg shadow-interface pointer-events-auto'
'sidebar-item-group flex shrink-0 flex-col items-center overflow-hidden',
!isConnected.value && 'pointer-events-auto rounded-lg shadow-interface'
)
)

2
src/components/sidebar/SidebarIcon.vue
View File

@@ -31,7 +31,7 @@
v-if="shouldShowBadge"
:class="
cn(
'sidebar-icon-badge absolute min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] font-medium leading-[14px] text-base-foreground',
'sidebar-icon-badge absolute min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] leading-[14px] font-medium text-base-foreground',
badgeClass || '-top-1 -right-1'
)
"

2
src/components/sidebar/tabs/AppsSidebarTab.vue
View File

@@ -9,7 +9,7 @@
>
<template #alt-title>
<span
class="ml-2 flex items-center rounded-full bg-primary-background px-1.5 py-0.5 text-xxs uppercase text-base-foreground"
class="ml-2 flex items-center rounded-full bg-primary-background px-1.5 py-0.5 text-xxs text-base-foreground uppercase"
>
{{ $t('g.beta') }}
</span>

2
src/components/sidebar/tabs/AssetsSidebarGridView.vue
View File

@@ -3,7 +3,7 @@
<!-- Assets Header -->
<div v-if="assets.length" class="px-2 2xl:px-4">
<div
class="flex items-center py-2 text-sm/normal font-normal text-muted-foreground font-inter"
class="flex items-center py-2 font-inter text-sm/normal font-normal text-muted-foreground"
>
{{
t(

4
src/components/sidebar/tabs/AssetsSidebarListView.vue
View File

@@ -2,7 +2,7 @@
<div class="flex h-full flex-col">
<div v-if="assetItems.length" class="px-2">
<div
class="flex items-center p-2 text-sm/normal font-normal text-muted-foreground font-inter"
class="flex items-center p-2 font-inter text-sm/normal font-normal text-muted-foreground"
>
{{
t(
@@ -189,7 +189,7 @@ function getAssetCardClass(selected: boolean): string {
'w-full text-text-primary transition-colors hover:bg-secondary-background-hover',
'cursor-pointer',
selected &&
'bg-secondary-background-hover ring-1 ring-inset ring-modal-card-border-highlighted'
'bg-secondary-background-hover ring-1 ring-modal-card-border-highlighted ring-inset'
)
}

6
src/components/sidebar/tabs/AssetsSidebarTab.vue
View File

@@ -50,7 +50,7 @@
v-model:sort-by="sortBy"
v-model:view-mode="viewMode"
v-model:media-type-filters="mediaTypeFilters"
class="pb-1 px-2 2xl:px-4"
class="px-2 pb-1 2xl:px-4"
:show-generation-time-sort="activeTab === 'output'"
/>
<Divider type="dashed" class="my-2" />
@@ -118,7 +118,7 @@
<div
v-if="hasSelection"
ref="footerRef"
class="flex gap-1 h-18 w-full items-center justify-between"
class="flex h-18 w-full items-center justify-between gap-1"
>
<div class="flex-1 pl-4">
<div ref="selectionCountButtonRef" class="inline-flex w-48">
@@ -137,7 +137,7 @@
</Button>
</div>
</div>
<div class="flex shrink gap-2 pr-4 items-center-safe justify-end-safe">
<div class="flex shrink items-center-safe justify-end-safe gap-2 pr-4">
<template v-if="isCompact">
<!-- Compact mode: Icon only -->
<Button

10
src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue
View File

@@ -13,7 +13,7 @@
<DropdownMenuTrigger as-child>
<button
:aria-label="$t('g.sort')"
class="flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-comfy-input hover:bg-comfy-input-hover border-none"
class="hover:bg-comfy-input-hover flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-lg border-none bg-comfy-input"
>
<i class="icon-[lucide--arrow-up-down] size-4" />
</button>
@@ -44,7 +44,7 @@
<DropdownMenuTrigger as-child>
<button
:aria-label="$t('sideToolbar.nodeLibraryTab.filter')"
class="flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-lg bg-comfy-input hover:bg-comfy-input-hover border-none"
class="hover:bg-comfy-input-hover flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-lg border-none bg-comfy-input"
>
<i class="icon-[lucide--list-filter] size-4" />
</button>
@@ -106,7 +106,7 @@
<Separator decorative class="border border-dashed border-comfy-input" />
<!-- Tab list in header (fixed) -->
<TabsList
class="flex gap-4 border-b border-comfy-input bg-background p-4"
class="bg-background flex gap-4 border-b border-comfy-input p-4"
>
<TabsTrigger
v-for="tab in tabs"
@@ -114,8 +114,8 @@
:value="tab.value"
:class="
cn(
'select-none border-none outline-none px-3 py-2 rounded-lg cursor-pointer',
'text-sm text-foreground transition-colors',
'cursor-pointer rounded-lg border-none px-3 py-2 outline-none select-none',
'text-foreground text-sm transition-colors',
selectedTab === tab.value
? 'bg-comfy-input font-bold'
: 'bg-transparent font-normal'

4
src/components/sidebar/tabs/SidebarTabTemplate.vue
View File

@@ -9,7 +9,7 @@
>
<div class="comfy-vue-side-bar-header flex flex-col gap-2">
<Toolbar
class="min-h-16 bg-transparent rounded-none border-x-0 border-t-0 px-2 2xl:px-4"
class="min-h-16 rounded-none border-x-0 border-t-0 bg-transparent px-2 2xl:px-4"
:pt="sidebarPt"
>
<template #start>
@@ -20,7 +20,7 @@
</template>
<template #end>
<div
class="touch:w-auto touch:opacity-100 [&_.p-button]:py-1 2xl:[&_.p-button]:py-2 flex flex-row overflow-hidden transition-all duration-200 motion-safe:w-0 motion-safe:opacity-0 motion-safe:group-focus-within/sidebar-tab:w-auto motion-safe:group-focus-within/sidebar-tab:opacity-100 motion-safe:group-hover/sidebar-tab:w-auto motion-safe:group-hover/sidebar-tab:opacity-100"
class="flex flex-row overflow-hidden transition-all duration-200 motion-safe:w-0 motion-safe:opacity-0 motion-safe:group-focus-within/sidebar-tab:w-auto motion-safe:group-focus-within/sidebar-tab:opacity-100 motion-safe:group-hover/sidebar-tab:w-auto motion-safe:group-hover/sidebar-tab:opacity-100 touch:w-auto touch:opacity-100 [&_.p-button]:py-1 2xl:[&_.p-button]:py-2"
>
<slot name="tool-buttons" />
</div>

6
src/components/sidebar/tabs/nodeLibrary/AllNodesPanel.vue
View File

@@ -1,8 +1,8 @@
<template>
<TabsContent value="all" class="flex-1 overflow-y-auto h-full">
<TabsContent value="all" class="h-full flex-1 overflow-y-auto">
<!-- Favorites section -->
<h3
class="px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground mb-0"
class="mb-0 px-4 py-2 text-xs font-medium tracking-wide text-muted-foreground uppercase"
>
{{ $t('sideToolbar.nodeLibraryTab.sections.bookmarked') }}
</h3>
@@ -22,7 +22,7 @@
<div v-for="(section, index) in sections" :key="section.category ?? index">
<h3
v-if="section.category && sortOrder !== 'alphabetical'"
class="px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground mb-0"
class="mb-0 px-4 py-2 text-xs font-medium tracking-wide text-muted-foreground uppercase"
>
{{ $t(NODE_CATEGORY_LABELS[section.category]) }}
</h3>

4
src/components/sidebar/tabs/nodeLibrary/BlueprintsPanel.vue
View File

@@ -1,9 +1,9 @@
<template>
<TabsContent value="blueprints" class="flex-1 overflow-y-auto h-full">
<TabsContent value="blueprints" class="h-full flex-1 overflow-y-auto">
<div v-for="(section, index) in sections" :key="section.title ?? index">
<h3
v-if="section.title"
class="px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground mb-0"
class="mb-0 px-4 py-2 text-xs font-medium tracking-wide text-muted-foreground uppercase"
>
{{ $t(section.title) }}
</h3>

8
src/components/sidebar/tabs/nodeLibrary/CustomNodesPanel.vue
View File

@@ -1,14 +1,14 @@
<template>
<TabsContent value="custom" class="flex-1 flex flex-col h-full">
<TabsContent value="custom" class="flex h-full flex-1 flex-col">
<div
v-for="(section, index) in sections"
:key="section.title ?? index"
class="flex-1 overflow-y-auto h-full"
class="h-full flex-1 overflow-y-auto"
>
<!-- Section header -->
<h3
v-if="section.title"
class="px-4 py-2 text-xs font-medium uppercase tracking-wide text-muted-foreground mb-0"
class="mb-0 px-4 py-2 text-xs font-medium tracking-wide text-muted-foreground uppercase"
>
{{ section.title }}
</h3>
@@ -20,7 +20,7 @@
@node-click="(node) => emit('nodeClick', node)"
/>
</div>
<div class="flex-none py-3 border-t border-border-default text-center">
<div class="flex-none border-t border-border-default py-3 text-center">
<Button
variant="secondary"
class="justify-start gap-3"

4
src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="group relative flex flex-col items-center justify-center py-3 px-2 rounded-lg cursor-pointer select-none transition-colors duration-150 box-content bg-component-node-background hover:bg-secondary-background-hover"
class="group relative box-content flex cursor-pointer flex-col items-center justify-center rounded-lg bg-component-node-background px-2 py-3 transition-colors duration-150 select-none hover:bg-secondary-background-hover"
:data-node-name="node.label"
draggable="true"
@click="handleClick"
@@ -12,7 +12,7 @@
<i :class="cn(nodeIcon, 'size-6 text-muted-foreground')" />
<TextTickerMultiLine
class="shrink-0 h-7 w-full text-xs/normal font-normal text-foreground mt-2"
class="text-foreground mt-2 h-7 w-full shrink-0 text-xs/normal font-normal"
>
{{ node.label }}
</TextTickerMultiLine>

4
src/components/sidebar/tabs/nodeLibrary/EssentialNodesPanel.vue
View File

@@ -2,7 +2,7 @@
<TabsContent
ref="panelEl"
value="essentials"
class="flex-1 overflow-y-auto px-3 h-full"
class="h-full flex-1 overflow-y-auto px-3"
>
<div class="flex flex-col gap-2 pb-6">
<!-- Flat sorted grid when alphabetical -->
@@ -28,7 +28,7 @@
@update:open="toggleFolder(folder.key, $event)"
>
<CollapsibleTrigger
class="group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-3 px-1 text-xs font-medium tracking-wide text-muted-foreground h-8 box-content"
class="group box-content flex h-8 w-full cursor-pointer items-center justify-between border-0 bg-transparent px-1 py-3 text-xs font-medium tracking-wide text-muted-foreground"
>
<span class="uppercase">{{ folder.label }}</span>
<i