Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-03-12 16:40:05 +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

8
src/components/ui/Popover.vue
View File

@@ -43,22 +43,22 @@ const {
:side-offset="5"
:collision-padding="10"
v-bind="$attrs"
class="z-1700 rounded-lg p-2 bg-base-background shadow-sm border border-border-subtle will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
class="data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade z-1700 rounded-lg border border-border-subtle bg-base-background p-2 shadow-sm will-change-[transform,opacity]"
>
<slot :close>
<div class="flex flex-col p-1">
<template v-for="item in entries ?? []" :key="item.label">
<div
v-if="item.separator"
class="border-b w-full border-border-subtle"
class="w-full border-b border-border-subtle"
/>
<div
v-else
:class="
cn(
'flex flex-row gap-4 p-2 rounded-sm my-1',
'my-1 flex flex-row gap-4 rounded-sm p-2',
item.disabled
? 'opacity-50 pointer-events-none'
? 'pointer-events-none opacity-50'
: item.command &&
'cursor-pointer hover:bg-secondary-background-hover'
)

2
src/components/ui/ZoomPane.vue
View File

@@ -47,7 +47,7 @@ const transform = computed(() => {
<template>
<div
ref="zoomPane"
class="contain-size place-content-center"
class="place-content-center contain-size"
@wheel="handleWheel"
@pointerdown.prevent="handleDown"
@pointermove="handleMove"

10
src/components/ui/button/button.variants.ts
View File

@@ -6,7 +6,7 @@ export const buttonVariants = cva({
variants: {
variant: {
secondary:
'bg-secondary-background text-secondary-foreground hover:bg-secondary-background-hover',
'text-secondary-foreground bg-secondary-background hover:bg-secondary-background-hover',
primary:
'bg-primary-background text-base-foreground hover:bg-primary-background-hover',
inverted:
@@ -14,14 +14,14 @@ export const buttonVariants = cva({
destructive:
'bg-destructive-background text-base-foreground hover:bg-destructive-background-hover',
textonly:
'text-base-foreground bg-transparent hover:bg-secondary-background-hover',
'bg-transparent text-base-foreground hover:bg-secondary-background-hover',
'muted-textonly':
'text-muted-foreground bg-transparent hover:bg-secondary-background-hover',
'bg-transparent text-muted-foreground hover:bg-secondary-background-hover',
'destructive-textonly':
'text-destructive-background bg-transparent hover:bg-destructive-background/10',
'bg-transparent text-destructive-background hover:bg-destructive-background/10',
'overlay-white': 'bg-white text-gray-600 hover:bg-white/90',
gradient:
'bg-(image:--subscription-button-gradient) text-white border-transparent hover:opacity-90'
'border-transparent bg-(image:--subscription-button-gradient) text-white hover:opacity-90'
},
size: {
sm: 'h-6 rounded-sm px-2 py-1 text-xs',

2
src/components/ui/input/Input.vue
View File

@@ -24,7 +24,7 @@ defineExpose({
v-model="modelValue"
:class="
cn(
'flex h-10 w-full min-w-0 appearance-none rounded-lg border-none bg-secondary-background px-4 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-default disabled:pointer-events-none disabled:opacity-50',
'flex h-10 w-full min-w-0 appearance-none rounded-lg border-none bg-secondary-background px-4 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-border-default focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
className
)
"

6
src/components/ui/search-input/SearchInput.vue
View File

@@ -4,7 +4,7 @@
:class="
cn(
searchInputVariants({ size }),
disabled && 'opacity-50 pointer-events-none',
disabled && 'pointer-events-none opacity-50',
className
)
"
@@ -24,7 +24,7 @@
v-else-if="loading"
:class="
cn(
'icon-[lucide--loader-circle] absolute animate-spin pointer-events-none',
'pointer-events-none absolute icon-[lucide--loader-circle] animate-spin',
sizeConfig.iconPos,
sizeConfig.icon
)
@@ -34,7 +34,7 @@
v-else
:class="
cn(
'absolute pointer-events-none',
'pointer-events-none absolute',
sizeConfig.iconPos,
sizeConfig.icon,
icon

4
src/components/ui/select/SelectContent.vue
View File

@@ -53,7 +53,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
'bg-base-background text-base-foreground',
'border border-solid border-border-default',
'shadow-md',
'data-[state=open]:animate-in data-[state=closed]:animate-out',
'data-[state=closed]:animate-out data-[state=open]:animate-in',
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
@@ -68,7 +68,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
<SelectViewport
:class="
cn(
'scrollbar-custom flex flex-col gap-0',
'flex scrollbar-custom flex-col gap-0',
position === 'popper' &&
'h-(--reka-select-trigger-height) w-full min-w-(--reka-select-trigger-width)'
)

2
src/components/ui/select/SelectItem.vue
View File

@@ -15,7 +15,7 @@ const { class: className, ...restProps } = defineProps<
v-bind="restProps"
:class="
cn(
'relative flex w-full cursor-pointer select-none items-center justify-between',
'relative flex w-full cursor-pointer items-center justify-between select-none',
'gap-3 rounded-sm px-2 py-3 text-sm outline-none',
'hover:bg-secondary-background-hover',
'focus:bg-secondary-background-hover',

2
src/components/ui/select/SelectLabel.vue
View File

@@ -15,7 +15,7 @@ const { class: className, ...restProps } = defineProps<
v-bind="restProps"
:class="
cn(
'px-3 py-2 text-xs uppercase tracking-wide text-muted-foreground',
'px-3 py-2 text-xs tracking-wide text-muted-foreground uppercase',
className
)
"

2
src/components/ui/select/SelectTrigger.vue
View File

@@ -15,7 +15,7 @@ const { class: className, ...restProps } = defineProps<
v-bind="restProps"
:class="
cn(
'flex h-10 w-full cursor-pointer select-none items-center justify-between',
'flex h-10 w-full cursor-pointer items-center justify-between select-none',
'rounded-lg px-4 py-2 text-sm',
'bg-secondary-background text-base-foreground',
'border-[2.5px] border-solid border-transparent',

6
src/components/ui/slider/Slider.vue
View File

@@ -50,7 +50,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
data-slot="slider-track"
:class="
cn(
'bg-node-stroke relative grow overflow-hidden rounded-full',
'relative grow overflow-hidden rounded-full bg-node-stroke',
'cursor-pointer overflow-visible',
`before:absolute before:-inset-2 before:block before:bg-transparent`,
'data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:w-full',
@@ -70,9 +70,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
data-slot="slider-thumb"
:class="
cn(
'bg-node-component-surface-highlight ring-node-component-surface-selected block size-3.5 shrink-0 rounded-full shadow-sm transition-[color,box-shadow]',
'block size-3.5 shrink-0 rounded-full bg-node-component-surface-highlight shadow-sm ring-node-component-surface-selected transition-[color,box-shadow]',
'cursor-grab',
'before:absolute before:-inset-1 before:block before:bg-transparent before:rounded-full',
'before:absolute before:-inset-1 before:block before:rounded-full before:bg-transparent',
'hover:ring-2 focus-visible:ring-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
{ 'cursor-grabbing': pressed }
)

10
src/components/ui/stepper/FormattedNumberStepper.vue
View File

@@ -3,14 +3,14 @@
:for="inputId"
:class="
cn(
'flex h-10 cursor-text items-center rounded-lg bg-secondary-background text-secondary-foreground hover:bg-secondary-background-hover focus-within:ring-1 focus-within:ring-secondary-foreground',
disabled && 'opacity-50 pointer-events-none'
'text-secondary-foreground focus-within:ring-secondary-foreground flex h-10 cursor-text items-center rounded-lg bg-secondary-background focus-within:ring-1 hover:bg-secondary-background-hover',
disabled && 'pointer-events-none opacity-50'
)
"
>
<button
type="button"
class="flex h-full w-8 cursor-pointer items-center justify-center rounded-l-lg border-none bg-transparent text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-secondary-foreground disabled:opacity-30"
class="focus-visible:ring-secondary-foreground flex h-full w-8 cursor-pointer items-center justify-center rounded-l-lg border-none bg-transparent text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none focus-visible:ring-inset disabled:opacity-30"
:disabled="disabled || modelValue <= min"
:aria-label="$t('g.decrement')"
@click="handleStep(-1)"
@@ -28,7 +28,7 @@
type="text"
inputmode="numeric"
:style="{ width: `${inputWidth}ch` }"
class="min-w-0 rounded-sm border-none bg-transparent text-center text-base-foreground font-medium text-lg focus-visible:outline-none"
class="min-w-0 rounded-sm border-none bg-transparent text-center text-lg font-medium text-base-foreground focus-visible:outline-none"
:disabled="disabled"
@input="handleInputChange"
@blur="handleInputBlur"
@@ -38,7 +38,7 @@
</div>
<button
type="button"
class="flex h-full w-8 cursor-pointer items-center justify-center rounded-r-lg border-none bg-transparent text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-secondary-foreground disabled:opacity-30"
class="focus-visible:ring-secondary-foreground flex h-full w-8 cursor-pointer items-center justify-center rounded-r-lg border-none bg-transparent text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none focus-visible:ring-inset disabled:opacity-30"
:disabled="disabled || modelValue >= max"
:aria-label="$t('g.increment')"
@click="handleStep(1)"

4
src/components/ui/tags-input/TagsInput.vue
View File

@@ -69,7 +69,7 @@ onClickOutside(rootEl, () => {
cn(
'group relative flex flex-wrap items-center gap-2 rounded-lg bg-transparent p-2 text-xs text-base-foreground',
!internalDisabled &&
'hover:bg-modal-card-background-hovered focus-within:bg-modal-card-background-hovered',
'focus-within:bg-modal-card-background-hovered hover:bg-modal-card-background-hovered',
!disabled && !isEditingEnabled && 'cursor-pointer',
className
)
@@ -80,7 +80,7 @@ onClickOutside(rootEl, () => {
<i
v-if="!disabled && !isEditingEnabled"
aria-hidden="true"
class="icon-[lucide--square-pen] absolute bottom-2 right-2 size-4 text-muted-foreground transition-opacity opacity-0 group-hover:opacity-100"
class="absolute right-2 bottom-2 icon-[lucide--square-pen] size-4 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
/>
</TagsInputRoot>
</template>

2
src/components/ui/tags-input/TagsInputInput.vue
View File

@@ -44,7 +44,7 @@ onUnmounted(() => {
v-bind="forwardedProps"
:class="
cn(
'min-h-6 flex-1 bg-transparent text-xs text-muted-foreground placeholder:text-muted-foreground focus:outline-none appearance-none border-none',
'min-h-6 flex-1 appearance-none border-none bg-transparent text-xs text-muted-foreground placeholder:text-muted-foreground focus:outline-none',
!isEditing && 'pointer-events-none',
className
)

2
src/components/ui/tags-input/TagsInputItem.vue
View File

@@ -17,7 +17,7 @@ const forwardedProps = useForwardProps(restProps)
v-bind="forwardedProps"
:class="
cn(
'flex h-6 items-center gap-1 rounded-sm bg-modal-card-tag-background py-1 pl-2 pr-1 text-modal-card-tag-foreground backdrop-blur-sm ring-offset-base-background data-[state=active]:ring-2 data-[state=active]:ring-base-foreground data-[state=active]:ring-offset-1',
'flex h-6 items-center gap-1 rounded-sm bg-modal-card-tag-background py-1 pr-1 pl-2 text-modal-card-tag-foreground ring-offset-base-background backdrop-blur-sm data-[state=active]:ring-2 data-[state=active]:ring-base-foreground data-[state=active]:ring-offset-1',
className
)
"

2
src/components/ui/tags-input/TagsInputItemDelete.vue
View File

@@ -24,7 +24,7 @@ const { t } = useI18n()
:aria-label="t('g.removeTag')"
:class="
cn(
'opacity-60 hover:bg-transparent hover:opacity-100 transition-[opacity,width] duration-150 w-4 data-disabled:w-0 data-disabled:opacity-0 data-disabled:pointer-events-none overflow-hidden',
'w-4 overflow-hidden opacity-60 transition-[opacity,width] duration-150 hover:bg-transparent hover:opacity-100 data-disabled:pointer-events-none data-disabled:w-0 data-disabled:opacity-0',
className
)
"

2
src/components/ui/textarea/Textarea.vue
View File

@@ -16,7 +16,7 @@ const modelValue = defineModel<string | number>()
v-model="modelValue"
:class="
cn(
'flex min-h-16 w-full rounded-lg border-none bg-secondary-background px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-default disabled:pointer-events-none disabled:opacity-50',
'flex min-h-16 w-full rounded-lg border-none bg-secondary-background px-3 py-2 text-sm text-base-foreground placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-border-default focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
className
)
"

2
src/components/ui/toggle-group/ToggleGroupItem.vue
View File

@@ -40,7 +40,7 @@ const resolvedVariant = computed(
:class="
cn(
toggleGroupItemVariants({ variant: resolvedVariant, size }),
'flex-1 min-w-0 truncate',
'min-w-0 flex-1 truncate',
className
)
"

4
src/components/ui/toggle-group/toggleGroup.variants.ts
View File

@@ -33,9 +33,9 @@ export const toggleGroupItemVariants = cva({
variants: {
variant: {
default:
'bg-transparent hover:bg-interface-menu-component-surface-selected/50 text-text-secondary',
'bg-transparent text-text-secondary hover:bg-interface-menu-component-surface-selected/50',
outline:
'border border-border-default bg-transparent hover:bg-secondary-background text-text-secondary'
'border border-border-default bg-transparent text-text-secondary hover:bg-secondary-background'
},
size: {
default: 'h-7 px-3 text-sm',