Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-03-13 00:50:01 +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

2
src/components/dialog/confirm/ConfirmBody.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="flex flex-col wrap-break-word px-4 py-2 text-sm text-muted-foreground border-t border-border-default"
class="flex flex-col border-t border-border-default px-4 py-2 text-sm wrap-break-word text-muted-foreground"
>
<p v-if="promptTextReal">
{{ promptTextReal }}

2
src/components/dialog/confirm/ConfirmFooter.vue
View File

@@ -1,5 +1,5 @@
<template>
<section class="w-full flex flex-wrap gap-2 justify-end px-2 pb-2">
<section class="flex w-full flex-wrap justify-end gap-2 px-2 pb-2">
<Button :disabled variant="textonly" autofocus @click="$emit('cancel')">
{{ cancelTextX }}
</Button>

2
src/components/dialog/confirm/ConfirmHeader.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="flex items-center gap-2 p-4 font-bold text-sm text-base-foreground font-inter"
class="flex items-center gap-2 p-4 font-inter text-sm font-bold text-base-foreground"
>
<span v-if="title" class="flex-auto">{{ title }}</span>
</div>

6
src/components/dialog/content/ConfirmationDialogContent.vue
View File

@@ -1,6 +1,6 @@
<template>
<section
class="m-2 mt-4 flex flex-col gap-6 whitespace-pre-wrap wrap-break-word"
class="m-2 mt-4 flex flex-col gap-6 wrap-break-word whitespace-pre-wrap"
>
<div>
<span>{{ message }}</span>
@@ -40,12 +40,12 @@
v-if="doNotAskAgain"
keypath="missingModelsDialog.reEnableInSettings"
tag="span"
class="text-sm text-muted-foreground ml-8"
class="ml-8 text-sm text-muted-foreground"
>
<template #link>
<Button
variant="textonly"
class="underline cursor-pointer p-0 text-sm text-muted-foreground hover:bg-transparent"
class="cursor-pointer p-0 text-sm text-muted-foreground underline hover:bg-transparent"
@click="openBlueprintOverwriteSetting"
>
{{ t('missingModelsDialog.reEnableInSettingsLink') }}

10
src/components/dialog/content/MissingModelsContent.vue
View File

@@ -8,7 +8,7 @@
</p>
<div
class="flex max-h-[300px] flex-col overflow-y-auto rounded-lg bg-secondary-background scrollbar-custom"
class="flex scrollbar-custom max-h-[300px] flex-col overflow-y-auto rounded-lg bg-secondary-background"
>
<div
v-for="model in processedModels"
@@ -17,13 +17,13 @@
>
<div class="flex items-center gap-2 overflow-hidden">
<span
class="min-w-0 truncate text-sm text-foreground"
class="text-foreground min-w-0 truncate text-sm"
:title="model.name"
>
{{ model.name }}
</span>
<span
class="inline-flex h-4 shrink-0 items-center rounded-full bg-muted-foreground/20 px-1.5 text-xxxs font-semibold uppercase text-muted-foreground"
class="inline-flex h-4 shrink-0 items-center rounded-full bg-muted-foreground/20 px-1.5 text-xxxs font-semibold text-muted-foreground uppercase"
>
{{ model.badgeLabel }}
</span>
@@ -81,7 +81,7 @@
</div>
</div>
<p class="m-0 text-xs/5 text-muted-foreground whitespace-pre-line">
<p class="m-0 text-xs/5 whitespace-pre-line text-muted-foreground">
{{ $t('missingModelsDialog.footerDescription') }}
</p>
@@ -90,7 +90,7 @@
class="flex gap-3 rounded-lg border border-warning-background bg-warning-background/10 p-3"
>
<i
class="icon-[lucide--triangle-alert] mt-0.5 size-4 shrink-0 text-warning-background"
class="mt-0.5 icon-[lucide--triangle-alert] size-4 shrink-0 text-warning-background"
/>
<div class="flex flex-col gap-1">
<p class="m-0 text-xs/5 font-semibold text-warning-background">

36
src/components/dialog/content/MissingNodesContent.vue
View File

@@ -23,7 +23,7 @@
<!-- Section header with Replace button -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="text-xs font-semibold uppercase text-primary">
<span class="text-xs font-semibold text-primary uppercase">
{{ $t('nodeReplacement.quickFixAvailable') }}
</span>
<div class="size-2 rounded-full bg-primary" />
@@ -35,7 +35,7 @@
:disabled="selectedTypes.size === 0"
@click="handleReplaceSelected"
>
<i class="icon-[lucide--refresh-cw] mr-1.5 size-4" />
<i class="mr-1.5 icon-[lucide--refresh-cw] size-4" />
{{
$t('nodeReplacement.replaceSelected', {
count: selectedTypes.size
@@ -46,7 +46,7 @@
<!-- Replaceable nodes list -->
<div
class="flex max-h-[200px] flex-col overflow-y-auto rounded-lg bg-secondary-background scrollbar-custom"
class="flex scrollbar-custom max-h-[200px] flex-col overflow-y-auto rounded-lg bg-secondary-background"
>
<!-- Select All row (sticky header) -->
<div
@@ -55,7 +55,7 @@
'sticky top-0 z-10 flex items-center gap-3 border-b border-border-default bg-secondary-background px-3 py-2',
pendingNodes.length > 0
? 'cursor-pointer hover:bg-secondary-background-hover'
: 'opacity-50 pointer-events-none'
: 'pointer-events-none opacity-50'
)
"
tabindex="0"
@@ -77,14 +77,14 @@
>
<i
v-if="isAllSelected"
class="icon-[lucide--check] text-bold text-xs text-base-foreground"
class="text-bold icon-[lucide--check] text-xs text-base-foreground"
/>
<i
v-else-if="isSomeSelected"
class="icon-[lucide--minus] text-bold text-xs text-base-foreground"
class="text-bold icon-[lucide--minus] text-xs text-base-foreground"
/>
</div>
<span class="text-xs font-medium uppercase text-muted-foreground">
<span class="text-xs font-medium text-muted-foreground uppercase">
{{ $t('nodeReplacement.compatibleAlternatives') }}
</span>
</div>
@@ -97,7 +97,7 @@
cn(
'flex items-center gap-3 px-3 py-2',
replacedTypes.has(node.label)
? 'opacity-50 pointer-events-none'
? 'pointer-events-none opacity-50'
: 'cursor-pointer hover:bg-secondary-background-hover'
)
"
@@ -124,24 +124,24 @@
v-if="
replacedTypes.has(node.label) || selectedTypes.has(node.label)
"
class="icon-[lucide--check] text-bold text-xs text-base-foreground"
class="text-bold icon-[lucide--check] text-xs text-base-foreground"
/>
</div>
<div class="flex flex-col gap-0.5">
<div class="flex items-center gap-2">
<span
v-if="replacedTypes.has(node.label)"
class="inline-flex h-4 items-center rounded-full border border-success bg-success/10 px-1.5 text-xxxs font-semibold uppercase text-success"
class="border-success bg-success/10 text-success inline-flex h-4 items-center rounded-full border px-1.5 text-xxxs font-semibold uppercase"
>
{{ $t('nodeReplacement.replaced') }}
</span>
<span
v-else
class="inline-flex h-4 items-center rounded-full border border-primary bg-primary/10 px-1.5 text-xxxs font-semibold uppercase text-primary"
class="inline-flex h-4 items-center rounded-full border border-primary bg-primary/10 px-1.5 text-xxxs font-semibold text-primary uppercase"
>
{{ $t('nodeReplacement.replaceable') }}
</span>
<span class="text-sm text-foreground">
<span class="text-foreground text-sm">
{{ node.label }}
</span>
</div>
@@ -160,7 +160,7 @@
>
<!-- Section header -->
<div class="flex items-center gap-2">
<span class="text-xs font-semibold uppercase text-error">
<span class="text-xs font-semibold text-error uppercase">
{{ $t('nodeReplacement.installationRequired') }}
</span>
<i class="icon-[lucide--info] text-xs text-error" />
@@ -168,7 +168,7 @@
<!-- Non-replaceable nodes list -->
<div
class="flex flex-col overflow-y-auto rounded-lg bg-secondary-background scrollbar-custom"
class="flex scrollbar-custom flex-col overflow-y-auto rounded-lg bg-secondary-background"
>
<div
v-for="node in nonReplaceableNodes"
@@ -179,11 +179,11 @@
<div class="flex flex-col gap-0.5">
<div class="flex items-center gap-2">
<span
class="inline-flex h-4 items-center rounded-full border border-error bg-error/10 px-1.5 text-xxxs font-semibold uppercase text-error"
class="inline-flex h-4 items-center rounded-full border border-error bg-error/10 px-1.5 text-xxxs font-semibold text-error uppercase"
>
{{ $t('nodeReplacement.notReplaceable') }}
</span>
<span class="text-sm text-foreground">
<span class="text-foreground text-sm">
{{ node.label }}
</span>
</div>
@@ -209,9 +209,9 @@
class="flex gap-3 rounded-lg border border-warning-background bg-warning-background/10 p-3"
>
<i
class="icon-[lucide--triangle-alert] mt-0.5 size-4 shrink-0 text-warning-background"
class="mt-0.5 icon-[lucide--triangle-alert] size-4 shrink-0 text-warning-background"
/>
<p class="m-0 text-xs/5 text-neutral-foreground">
<p class="text-neutral-foreground m-0 text-xs/5">
<i18n-t keypath="nodeReplacement.instructionMessage">
<template #red>
<span class="text-error">{{

6
src/components/dialog/content/MissingNodesFooter.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex w-full flex-col gap-2 py-2 px-4">
<div class="flex w-full flex-col gap-2 px-4 py-2">
<div class="flex flex-col gap-1 text-sm text-muted-foreground">
<div class="flex items-center gap-1">
<input
@@ -16,12 +16,12 @@
v-if="doNotAskAgain"
keypath="missingModelsDialog.reEnableInSettings"
tag="span"
class="text-sm text-muted-foreground ml-6"
class="ml-6 text-sm text-muted-foreground"
>
<template #link>
<Button
variant="textonly"
class="underline cursor-pointer p-0 text-sm text-muted-foreground hover:bg-transparent"
class="cursor-pointer p-0 text-sm text-muted-foreground underline hover:bg-transparent"
@click="openShowMissingNodesSetting"
>
{{ $t('missingModelsDialog.reEnableInSettingsLink') }}

16
src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue
View File

@@ -3,8 +3,8 @@
class="flex min-w-[460px] flex-col rounded-2xl border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
>
<!-- Header -->
<div class="flex p-8 items-center justify-between">
<h2 class="text-lg font-bold text-base-foreground m-0">
<div class="flex items-center justify-between p-8">
<h2 class="m-0 text-lg font-bold text-base-foreground">
{{
isInsufficientCredits
? $t('credits.topUp.addMoreCreditsToRun')
@@ -12,7 +12,7 @@
}}
</h2>
<button
class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
class="focus-visible:ring-secondary-foreground cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none"
@click="() => handleClose()"
>
<i class="icon-[lucide--x] size-6" />
@@ -20,7 +20,7 @@
</div>
<p
v-if="isInsufficientCredits"
class="text-sm text-muted-foreground m-0 px-8"
class="m-0 px-8 text-sm text-muted-foreground"
>
{{ $t('credits.topUp.insufficientWorkflowMessage') }}
</p>
@@ -39,7 +39,7 @@
size="lg"
:class="
cn(
'h-10 text-base font-medium w-full focus-visible:ring-secondary-foreground',
'focus-visible:ring-secondary-foreground h-10 w-full text-base font-medium',
selectedPreset === amount && 'bg-secondary-background-selected'
)
"
@@ -95,7 +95,7 @@
<p
v-if="isBelowMin"
class="text-sm text-red-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
class="m-0 flex items-center justify-center gap-1 px-8 pt-4 text-center text-sm text-red-500"
>
<i class="icon-[lucide--component] size-4" />
{{
@@ -106,7 +106,7 @@
</p>
<p
v-if="showCeilingWarning"
class="text-sm text-gold-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
class="m-0 flex items-center justify-center gap-1 px-8 pt-4 text-center text-sm text-gold-500"
>
<i class="icon-[lucide--component] size-4" />
{{
@@ -123,7 +123,7 @@
>
</p>
<div class="p-8 flex flex-col gap-8">
<div class="flex flex-col gap-8 p-8">
<Button
:disabled="!isValidAmount || loading"
:loading="loading"

6
src/components/dialog/content/credit/CreditTopUpOption.vue
View File

@@ -1,10 +1,10 @@
<template>
<div
class="flex items-center justify-between p-2 rounded-lg cursor-pointer transition-all duration-200"
class="flex cursor-pointer items-center justify-between rounded-lg p-2 transition-all duration-200"
:class="[
selected
? 'bg-secondary-background border-2 border-border-default'
: 'bg-component-node-disabled hover:bg-secondary-background border-2 border-transparent'
? 'border-2 border-border-default bg-secondary-background'
: 'bg-component-node-disabled border-2 border-transparent hover:bg-secondary-background'
]"
@click="$emit('select')"
>

2
src/components/dialog/content/setting/UserPanel.vue
View File

@@ -67,7 +67,7 @@
v-if="!isApiKeyLogin"
keypath="auth.deleteAccount.contactSupport"
tag="p"
class="text-muted text-sm"
class="text-sm text-muted"
>
<template #email>
<a href="mailto:support@comfy.org" class="underline"

2
src/components/dialog/content/subscription/CancelSubscriptionDialogContent.vue
View File

@@ -10,7 +10,7 @@
{{ $t('subscription.cancelDialog.title') }}
</h2>
<button
class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
class="focus-visible:ring-secondary-foreground cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none"
:aria-label="$t('g.close')"
:disabled="isLoading"
@click="onClose"