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

30
src/components/maskeditor/BrushSettingsPanel.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="flex flex-col gap-3 pb-3">
<h3 class="text-center text-[15px] font-sans text-descrip-text mt-2.5">
<h3 class="text-descrip-text mt-2.5 text-center font-sans text-[15px]">
{{ t('maskEditor.brushSettings') }}
</h3>
@@ -10,19 +10,19 @@
<!-- Brush Shape -->
<div class="flex flex-col gap-3 pb-3">
<span class="text-left text-xs font-sans text-descrip-text">
<span class="text-descrip-text text-left font-sans text-xs">
{{ t('maskEditor.brushShape') }}
</span>
<div
class="flex flex-row gap-2.5 items-center h-[50px] w-full rounded-[10px] bg-secondary-background-hover"
class="flex h-[50px] w-full flex-row items-center gap-2.5 rounded-[10px] bg-secondary-background-hover"
>
<div
class="maskEditor_sidePanelBrushShapeCircle hover:bg-comfy-menu-bg"
:class="
cn(
store.brushSettings.type === BrushShape.Arc
? 'bg-(--p-button-text-primary-color) active'
? 'active bg-(--p-button-text-primary-color)'
: 'bg-transparent'
)
"
@@ -34,7 +34,7 @@
:class="
cn(
store.brushSettings.type === BrushShape.Rect
? 'bg-(--p-button-text-primary-color) active'
? 'active bg-(--p-button-text-primary-color)'
: 'bg-transparent'
)
"
@@ -45,27 +45,27 @@
<!-- Color -->
<div class="flex flex-col gap-3 pb-3">
<span class="text-left text-xs font-sans text-descrip-text">
<span class="text-descrip-text text-left font-sans text-xs">
{{ t('maskEditor.colorSelector') }}
</span>
<input
ref="colorInputRef"
v-model="store.rgbColor"
type="color"
class="h-10 rounded-md cursor-pointer"
class="h-10 cursor-pointer rounded-md"
/>
</div>
<!-- Thickness -->
<div class="flex flex-col gap-2">
<div class="flex items-center justify-between">
<span class="text-left text-xs font-sans text-descrip-text">
<span class="text-descrip-text text-left font-sans text-xs">
{{ t('maskEditor.thickness') }}
</span>
<input
v-model.number="brushSize"
type="number"
class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
class="border-p-form-field-border-color text-input-text w-16 rounded-md border bg-comfy-menu-bg px-2 py-1 text-center text-sm"
:min="1"
:max="250"
:step="1"
@@ -84,13 +84,13 @@
<!-- Opacity -->
<div class="flex flex-col gap-2">
<div class="flex items-center justify-between">
<span class="text-left text-xs font-sans text-descrip-text">
<span class="text-descrip-text text-left font-sans text-xs">
{{ t('maskEditor.opacity') }}
</span>
<input
v-model.number="brushOpacity"
type="number"
class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
class="border-p-form-field-border-color text-input-text w-16 rounded-md border bg-comfy-menu-bg px-2 py-1 text-center text-sm"
:min="0"
:max="1"
:step="0.01"
@@ -109,13 +109,13 @@
<!-- Hardness -->
<div class="flex flex-col gap-2">
<div class="flex items-center justify-between">
<span class="text-left text-xs font-sans text-descrip-text">
<span class="text-descrip-text text-left font-sans text-xs">
{{ t('maskEditor.hardness') }}
</span>
<input
v-model.number="brushHardness"
type="number"
class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
class="border-p-form-field-border-color text-input-text w-16 rounded-md border bg-comfy-menu-bg px-2 py-1 text-center text-sm"
:min="0"
:max="1"
:step="0.01"
@@ -134,13 +134,13 @@
<!-- Step Size -->
<div class="flex flex-col gap-2">
<div class="flex items-center justify-between">
<span class="text-left text-xs font-sans text-descrip-text">
<span class="text-descrip-text text-left font-sans text-xs">
{{ t('maskEditor.stepSize') }}
</span>
<input
v-model.number="brushStepSize"
type="number"
class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
class="border-p-form-field-border-color text-input-text w-16 rounded-md border bg-comfy-menu-bg px-2 py-1 text-center text-sm"
:min="1"
:max="100"
:step="1"

2
src/components/maskeditor/ColorSelectSettingsPanel.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="flex flex-col gap-3 pb-3">
<h3 class="text-center text-[15px] font-sans text-(--descrip-text) mt-2.5">
<h3 class="mt-2.5 text-center font-sans text-[15px] text-(--descrip-text)">
{{ t('maskEditor.colorSelectSettings') }}
</h3>

18
src/components/maskeditor/ImageLayerSettingsPanel.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="flex flex-col gap-3 pb-3">
<h3 class="text-center text-[15px] font-sans text-(--descrip-text) mt-2.5">
<h3 class="mt-2.5 text-center font-sans text-[15px] text-(--descrip-text)">
{{ t('maskEditor.layers') }}
</h3>
@@ -13,12 +13,12 @@
@update:model-value="onMaskOpacityChange"
/>
<span class="text-left text-xs font-sans text-(--descrip-text)">{{
<span class="text-left font-sans text-xs text-(--descrip-text)">{{
t('maskEditor.maskBlendingOptions')
}}</span>
<div
class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] -mt-2 -mb-1.5"
class="relative -mt-2 -mb-1.5 flex h-[50px] min-h-6 w-full flex-row items-center gap-2.5 rounded-[10px]"
>
<select
class="maskEditor_sidePanelDropdown"
@@ -31,11 +31,11 @@
</select>
</div>
<span class="text-left text-xs font-sans text-(--descrip-text)">{{
<span class="text-left font-sans text-xs text-(--descrip-text)">{{
t('maskEditor.maskLayer')
}}</span>
<div
class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] bg-secondary-background-hover"
class="relative flex h-[50px] min-h-6 w-full flex-row items-center gap-2.5 rounded-[10px] bg-secondary-background-hover"
:style="{
border: store.activeLayer === 'mask' ? '2px solid #007acc' : 'none'
}"
@@ -64,11 +64,11 @@
</button>
</div>
<span class="text-left text-xs font-sans text-(--descrip-text)">{{
<span class="text-left font-sans text-xs text-(--descrip-text)">{{
t('maskEditor.paintLayer')
}}</span>
<div
class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] bg-secondary-background-hover"
class="relative flex h-[50px] min-h-6 w-full flex-row items-center gap-2.5 rounded-[10px] bg-secondary-background-hover"
:style="{
border: store.activeLayer === 'rgb' ? '2px solid #007acc' : 'none'
}"
@@ -104,11 +104,11 @@
</button>
</div>
<span class="text-left text-xs font-sans text-(--descrip-text)">{{
<span class="text-left font-sans text-xs text-(--descrip-text)">{{
t('maskEditor.baseImageLayer')
}}</span>
<div
class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] bg-secondary-background-hover"
class="relative flex h-[50px] min-h-6 w-full flex-row items-center gap-2.5 rounded-[10px] bg-secondary-background-hover"
>
<input
type="checkbox"

10
src/components/maskeditor/MaskEditorContent.vue
View File

@@ -13,29 +13,29 @@
>
<canvas
ref="imgCanvasRef"
class="absolute top-0 left-0 size-full z-0"
class="absolute top-0 left-0 z-0 size-full"
@contextmenu.prevent
/>
<canvas
ref="rgbCanvasRef"
class="absolute top-0 left-0 size-full z-10"
class="absolute top-0 left-0 z-10 size-full"
@contextmenu.prevent
/>
<canvas
ref="maskCanvasRef"
class="absolute top-0 left-0 size-full z-30"
class="absolute top-0 left-0 z-30 size-full"
@contextmenu.prevent
/>
<!-- GPU Preview Canvas -->
<canvas
ref="gpuCanvasRef"
class="absolute top-0 left-0 size-full pointer-events-none"
class="pointer-events-none absolute top-0 left-0 size-full"
:class="{
'z-20': store.activeLayer === 'rgb',
'z-40': store.activeLayer === 'mask'
}"
/>
<div ref="canvasBackgroundRef" class="bg-white size-full" />
<div ref="canvasBackgroundRef" class="size-full bg-white" />
</div>
<div class="maskEditor-ui-container flex min-h-0 flex-1 flex-col">

2
src/components/maskeditor/PaintBucketSettingsPanel.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="flex flex-col gap-3 pb-3">
<h3 class="text-center text-[15px] font-sans text-(--descrip-text) mt-2.5">
<h3 class="mt-2.5 text-center font-sans text-[15px] text-(--descrip-text)">
{{ t('maskEditor.paintBucketSettings') }}
</h3>

2
src/components/maskeditor/PointerZone.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
ref="pointerZoneRef"
class="w-[calc(100%-4rem-220px)] h-full"
class="h-full w-[calc(100%-4rem-220px)]"
@pointerdown="handlePointerDown"
@pointermove="handlePointerMove"
@pointerup="handlePointerUp"

6
src/components/maskeditor/SidePanel.vue
View File

@@ -1,11 +1,11 @@
<template>
<div
class="flex flex-col gap-3 pb-3 h-full items-stretch! bg-(--comfy-menu-bg) overflow-y-auto w-55 px-2.5"
class="flex h-full w-55 flex-col items-stretch! gap-3 overflow-y-auto bg-(--comfy-menu-bg) px-2.5 pb-3"
>
<div class="w-full min-h-full">
<div class="min-h-full w-full">
<SettingsPanelContainer />
<div class="w-full h-0.5 bg-(--border-color) mt-6 mb-1.5" />
<div class="mt-6 mb-1.5 h-0.5 w-full bg-(--border-color)" />
<ImageLayerSettingsPanel :tool-manager="toolManager" />
</div>

4
src/components/maskeditor/ToolPanel.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="h-full z-8888 flex flex-col justify-between bg-comfy-menu-bg">
<div class="z-8888 flex h-full flex-col justify-between bg-comfy-menu-bg">
<div class="flex flex-col">
<div
v-for="tool in allTools"
@@ -19,7 +19,7 @@
</div>
<div
class="flex flex-col items-center cursor-pointer rounded-md mb-2 transition-colors duration-200 hover:bg-secondary-background-hover"
class="mb-2 flex cursor-pointer flex-col items-center rounded-md transition-colors duration-200 hover:bg-secondary-background-hover"
:title="t('maskEditor.clickToResetZoom')"
@click="onResetZoom"
>

6
src/components/maskeditor/controls/DropdownControl.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="flex flex-row gap-2.5 items-center min-h-6 relative">
<span class="text-left text-xs font-sans text-(--descrip-text)">{{
<div class="relative flex min-h-6 flex-row items-center gap-2.5">
<span class="text-left font-sans text-xs text-(--descrip-text)">{{
label
}}</span>
<select
class="absolute right-0 h-6 px-1.5 rounded-md border border-border-default transition-colors duration-100 bg-secondary-background focus:outline focus:outline-node-component-border"
class="absolute right-0 h-6 rounded-md border border-border-default bg-secondary-background px-1.5 transition-colors duration-100 focus:outline focus:outline-node-component-border"
:value="modelValue"
@change="onChange"
>

2
src/components/maskeditor/controls/SliderControl.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="flex flex-col gap-3 pb-3">
<span class="text-left text-xs font-sans text-(--descrip-text)">{{
<span class="text-left font-sans text-xs text-(--descrip-text)">{{
label
}}</span>
<input

4
src/components/maskeditor/controls/ToggleControl.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="flex flex-row gap-2.5 items-center min-h-6 relative">
<span class="text-left text-xs font-sans text-(--descrip-text)">{{
<div class="relative flex min-h-6 flex-row items-center gap-2.5">
<span class="text-left font-sans text-xs text-(--descrip-text)">{{
label
}}</span>
<label class="maskEditor_sidePanelToggleContainer">

14
src/components/maskeditor/dialog/TopBarHeader.vue
View File

@@ -11,7 +11,7 @@
>
<svg
viewBox="0 0 15 15"
class="h-6.25 w-6.25 pointer-events-none fill-current"
class="pointer-events-none h-6.25 w-6.25 fill-current"
>
<path
d="M8.77,12.18c-.25,0-.46-.2-.46-.46s.2-.46.46-.46c1.47,0,2.67-1.2,2.67-2.67,0-1.57-1.34-2.67-3.26-2.67h-3.98l1.43,1.43c.18.18.18.47,0,.64-.18.18-.47.18-.64,0l-2.21-2.21c-.18-.18-.18-.47,0-.64l2.21-2.21c.18-.18.47-.18.64,0,.18.18.18.47,0,.64l-1.43,1.43h3.98c2.45,0,4.17,1.47,4.17,3.58,0,1.97-1.61,3.58-3.58,3.58Z"
@@ -26,7 +26,7 @@
>
<svg
viewBox="0 0 15 15"
class="h-6.25 w-6.25 pointer-events-none fill-(--input-text)"
class="pointer-events-none h-6.25 w-6.25 fill-(--input-text)"
>
<path
class="cls-1"
@@ -35,7 +35,7 @@
</svg>
</button>
<div class="h-5 border-l border-border" />
<div class="border-border h-5 border-l" />
<button
:class="iconButtonClass"
@@ -44,7 +44,7 @@
>
<svg
viewBox="-6 -7 15 15"
class="h-6.25 w-6.25 pointer-events-none fill-(--input-text)"
class="pointer-events-none h-6.25 w-6.25 fill-(--input-text)"
>
<path
d="m2.25-2.625c.3452 0 .625.2798.625.625v5c0 .3452-.2798.625-.625.625h-5c-.3452 0-.625-.2798-.625-.625v-5c0-.3452.2798-.625.625-.625h5zm1.25.625v5c0 .6904-.5596 1.25-1.25 1.25h-5c-.6904 0-1.25-.5596-1.25-1.25v-5c0-.6904.5596-1.25 1.25-1.25h5c.6904 0 1.25.5596 1.25 1.25zm-.1673-2.3757-.4419.4419-1.5246-1.5246 1.5416-1.5417.442.4419-.7871.7872h.9373c1.3807 0 2.5 1.1193 2.5 2.5h-.625c0-1.0355-.8395-1.875-1.875-1.875h-.9375l.7702.7702z"
@@ -59,7 +59,7 @@
>
<svg
viewBox="-9 -7 15 15"
class="h-6.25 w-6.25 pointer-events-none fill-(--input-text)"
class="pointer-events-none h-6.25 w-6.25 fill-(--input-text)"
>
<g transform="scale(-1, 1)">
<path
@@ -76,7 +76,7 @@
>
<svg
viewBox="0 0 15 15"
class="h-6.25 w-6.25 pointer-events-none fill-(--input-text)"
class="pointer-events-none h-6.25 w-6.25 fill-(--input-text)"
>
<path
d="M7.5,1.5c-.28,0-.5.22-.5.5v11c0,.28.22.5.5.5s.5-.22.5-.5v-11c0-.28-.22-.5-.5-.5Z"
@@ -92,7 +92,7 @@
>
<svg
viewBox="0 0 15 15"
class="h-6.25 w-6.25 pointer-events-none fill-(--input-text)"
class="pointer-events-none h-6.25 w-6.25 fill-(--input-text)"
>
<path
d="M2,7.5c0-.28.22-.5.5-.5h11c.28,0,.5.22.5.5s-.22.5-.5.5h-11c-.28,0-.5-.22-.5-.5Z"