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

14
src/components/rightSidePanel/parameters/SectionWidgets.vue
View File

@@ -203,8 +203,8 @@ defineExpose({
:size="showSeeError ? 'lg' : 'default'"
>
<template #label>
<div class="flex flex-wrap items-center gap-2 flex-1 min-w-0">
<span class="flex-1 flex items-center gap-2 min-w-0">
<div class="flex min-w-0 flex-1 flex-wrap items-center gap-2">
<span class="flex min-w-0 flex-1 items-center gap-2">
<i
v-if="nodeHasError"
class="icon-[lucide--octagon-alert] size-4 shrink-0 text-destructive-background-hover"
@@ -223,7 +223,7 @@ defineExpose({
</span>
<span
v-if="parentGroup"
class="text-xs text-muted-foreground truncate flex-1 text-right min-w-11"
class="min-w-11 flex-1 truncate text-right text-xs text-muted-foreground"
:title="parentGroup.title"
>
{{ parentGroup.title }}
@@ -233,7 +233,7 @@ defineExpose({
v-if="showSeeError"
variant="secondary"
size="sm"
class="shrink-0 rounded-lg text-sm h-8"
class="h-8 shrink-0 rounded-lg text-sm"
@click.stop="navigateToErrorTab"
>
{{ t('rightSidePanel.seeError') }}
@@ -242,7 +242,7 @@ defineExpose({
v-if="!isEmpty"
variant="muted-textonly"
size="icon-sm"
class="subbutton shrink-0 size-8 hover:text-base-foreground"
class="subbutton size-8 shrink-0 hover:text-base-foreground"
:title="t('rightSidePanel.resetAllParameters')"
:aria-label="t('rightSidePanel.resetAllParameters')"
@click.stop="handleResetAllWidgets"
@@ -253,7 +253,7 @@ defineExpose({
v-if="canShowLocateButton"
variant="muted-textonly"
size="icon-sm"
class="subbutton shrink-0 mr-3 size-8 hover:text-base-foreground"
class="subbutton mr-3 size-8 shrink-0 hover:text-base-foreground"
:title="t('rightSidePanel.locateNode')"
:aria-label="t('rightSidePanel.locateNode')"
@click.stop="handleLocateNode"
@@ -267,7 +267,7 @@ defineExpose({
<div
ref="widgetsContainer"
class="space-y-2 rounded-lg px-4 pt-1 relative"
class="relative space-y-2 rounded-lg px-4 pt-1"
>
<TransitionGroup name="list-scale">
<WidgetItem

6
src/components/rightSidePanel/parameters/TabGlobalParameters.vue
View File

@@ -117,7 +117,7 @@ function onCollapseUpdate() {
<template>
<div
class="px-4 pt-1 pb-4 flex items-center border-b border-interface-stroke"
class="flex items-center border-b border-interface-stroke px-4 pt-1 pb-4"
>
<FormSearchInput
v-model="searchQuery"
@@ -138,7 +138,7 @@ function onCollapseUpdate() {
@update:collapse="onCollapseUpdate"
>
<template #empty>
<div class="text-sm text-muted-foreground px-4 text-center py-10">
<div class="px-4 py-10 text-center text-sm text-muted-foreground">
<p>
{{
isSearching
@@ -155,7 +155,7 @@ function onCollapseUpdate() {
<template #moreIcon>
<span
aria-hidden="true"
class="inline-flex size-5 items-center justify-center rounded-md bg-secondary-background-hover text-secondary-foreground align-middle"
class="text-secondary-foreground inline-flex size-5 items-center justify-center rounded-md bg-secondary-background-hover align-middle"
>
<i class="icon-[lucide--more-vertical] text-sm" />
</span>

4
src/components/rightSidePanel/parameters/TabNodes.vue
View File

@@ -76,7 +76,7 @@ async function searcher(query: string) {
<template>
<div
class="px-4 pt-1 pb-4 flex items-center border-b border-interface-stroke"
class="flex items-center border-b border-interface-stroke px-4 pt-1 pb-4"
>
<FormSearchInput
v-model="searchQuery"
@@ -92,7 +92,7 @@ async function searcher(query: string) {
<TransitionGroup tag="div" name="list-scale" class="relative">
<div
v-if="isSearching && searchedWidgetsSectionDataList.length === 0"
class="text-sm text-muted-foreground px-4 text-center pt-5 pb-15"
class="px-4 pt-5 pb-15 text-center text-sm text-muted-foreground"
>
{{ $t('rightSidePanel.noneSearchDesc') }}
</div>

4
src/components/rightSidePanel/parameters/TabNormalInputs.vue
View File

@@ -120,7 +120,7 @@ const advancedLabel = computed(() => {
<template>
<div
class="px-4 pt-1 pb-4 flex items-center border-b border-interface-stroke"
class="flex items-center border-b border-interface-stroke px-4 pt-1 pb-4"
>
<FormSearchInput
v-model="searchQuery"
@@ -140,7 +140,7 @@ const advancedLabel = computed(() => {
<TransitionGroup tag="div" name="list-scale" class="relative">
<div
v-if="searchedWidgetsSectionDataList.length === 0"
class="text-sm text-muted-foreground px-4 py-10 text-center"
class="px-4 py-10 text-center text-sm text-muted-foreground"
>
{{
isSearching

4
src/components/rightSidePanel/parameters/TabSubgraphInputs.vue
View File

@@ -201,7 +201,7 @@ const label = computed(() => {
<template>
<div
class="px-4 pt-1 pb-4 flex items-center border-b border-interface-stroke"
class="flex items-center border-b border-interface-stroke px-4 pt-1 pb-4"
>
<FormSearchInput
v-model="searchQuery"
@@ -237,7 +237,7 @@ const label = computed(() => {
"
>
<template #empty>
<div class="text-sm text-muted-foreground px-4 text-center pt-5 pb-15">
<div class="px-4 pt-5 pb-15 text-center text-sm text-muted-foreground">
{{ t('rightSidePanel.noneSearchDesc') }}
</div>
</template>

10
src/components/rightSidePanel/parameters/WidgetActions.vue
View File

@@ -117,13 +117,13 @@ function handleResetToDefault() {
<template>
<MoreButton
is-vertical
class="text-muted-foreground bg-transparent hover:text-base-foreground hover:bg-secondary-background-hover active:scale-95 transition-all"
class="bg-transparent text-muted-foreground transition-all hover:bg-secondary-background-hover hover:text-base-foreground active:scale-95"
>
<template #default="{ close }">
<Button
variant="textonly"
size="unset"
class="w-full flex items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
class="flex w-full items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
@click="
() => {
handleRename()
@@ -139,7 +139,7 @@ function handleResetToDefault() {
v-if="hasParents"
variant="textonly"
size="unset"
class="w-full flex items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
class="flex w-full items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
@click="
() => {
if (isShownOnParents) handleHideInput()
@@ -161,7 +161,7 @@ function handleResetToDefault() {
<Button
variant="textonly"
size="unset"
class="w-full flex items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
class="flex w-full items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
@click="
() => {
handleToggleFavorite()
@@ -183,7 +183,7 @@ function handleResetToDefault() {
v-if="hasDefault"
variant="textonly"
size="unset"
class="w-full flex items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
class="flex w-full items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
:disabled="isCurrentValueDefault"
@click="
() => {

18
src/components/rightSidePanel/parameters/WidgetItem.vue
View File

@@ -140,9 +140,9 @@ const displayLabel = customRef((track, trigger) => {
<div
:class="
cn(
'widget-item col-span-full grid grid-cols-subgrid rounded-lg group',
'widget-item group col-span-full grid grid-cols-subgrid rounded-lg',
isDraggable &&
'draggable-item will-change-auto! drag-handle cursor-grab bg-comfy-menu-bg [&.is-draggable]:cursor-grabbing outline-comfy-menu-bg [&.is-draggable]:outline-4 [&.is-draggable]:outline-offset-0 [&.is-draggable]:opacity-70'
'draggable-item drag-handle cursor-grab bg-comfy-menu-bg outline-comfy-menu-bg will-change-auto! [&.is-draggable]:cursor-grabbing [&.is-draggable]:opacity-70 [&.is-draggable]:outline-4 [&.is-draggable]:outline-offset-0'
)
"
>
@@ -150,7 +150,7 @@ const displayLabel = customRef((track, trigger) => {
<div
:class="
cn(
'min-h-8 flex items-center justify-between gap-1 mb-1.5 min-w-0',
'mb-1.5 flex min-h-8 min-w-0 items-center justify-between gap-1',
isDraggable && 'pointer-events-none'
)
"
@@ -160,7 +160,7 @@ const displayLabel = customRef((track, trigger) => {
:model-value="displayLabel"
:is-editing="isEditing"
:input-attrs="{ placeholder: widget.name }"
class="text-sm/8 p-0 m-0 truncate pointer-events-auto cursor-text"
class="pointer-events-auto m-0 cursor-text truncate p-0 text-sm/8"
@edit="displayLabel = $event"
@cancel="isEditing = false"
@click="isEditing = true"
@@ -168,13 +168,13 @@ const displayLabel = customRef((track, trigger) => {
<span
v-if="(showNodeName || hasParents) && sourceNodeName"
class="text-xs text-muted-foreground flex-1 p-0 my-0 mx-1 truncate text-right min-w-10"
class="mx-1 my-0 min-w-10 flex-1 truncate p-0 text-right text-xs text-muted-foreground"
>
{{ sourceNodeName }}
</span>
<div
v-if="!hiddenWidgetActions"
class="flex items-center gap-1 shrink-0 pointer-events-auto"
class="pointer-events-auto flex shrink-0 items-center gap-1"
>
<WidgetActions
v-model:label="displayLabel"
@@ -192,10 +192,10 @@ const displayLabel = customRef((track, trigger) => {
!hiddenFavoriteIndicator &&
favoritedWidgetsStore.isFavorited(favoriteNode, widget.name)
"
class="relative z-2 pointer-events-none"
class="pointer-events-none relative z-2"
>
<i
class="absolute -right-1 -top-1 pi pi-star-fill text-xs text-muted-foreground pointer-events-none"
class="pi pi-star-fill pointer-events-none absolute -top-1 -right-1 text-xs text-muted-foreground"
/>
</div>
<!-- widget content -->
@@ -211,7 +211,7 @@ const displayLabel = customRef((track, trigger) => {
<div
:class="
cn(
'pointer-events-none mt-1.5 mx-auto max-w-40 w-1/2 h-1 rounded-lg bg-transparent transition-colors duration-150',
'pointer-events-none mx-auto mt-1.5 h-1 w-1/2 max-w-40 rounded-lg bg-transparent transition-colors duration-150',
'group-hover:bg-interface-stroke group-[.is-draggable]:bg-component-node-widget-background-highlighted',
!isDraggable && 'opacity-0'
)