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

fix: enable no-deprecated-classes tailwind lint rule (#9417)

Browse Source 
## Summary

Enable `better-tailwindcss/no-deprecated-classes` lint rule and auto-fix
all 103 violations across 65 files. First PR in a stacked series for
#9300.

## Changes

- **What**: Replace deprecated Tailwind v3 classes with v4 equivalents:
  - `rounded` → `rounded-sm` (85)
  - `flex-shrink-0` → `shrink-0` (16)
  - `flex-grow` → `grow` (2)
- Enable `no-deprecated-classes` as `'error'` in eslint config
- Update one test asserting on `'rounded'` class string

## Review Focus

Mechanical auto-fix PR — all changes produced by `eslint --fix`. No
visual or behavioral changes (Tailwind v4 aliases these classes
identically).

Fixes #9300 (partial — 1 of 3 rules)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9417-fix-enable-no-deprecated-classes-tailwind-lint-rule-31a6d73d3650819eaef4cf8ad84fb186)
by [Unito](https://www.unito.io)

Co-authored-by: Alexander Brown <drjkl@comfy.org>
This commit is contained in:
Christian Byrne
2026-03-04 23:41:23 -08:00
committed by GitHub
parent 7cd11f0da5
commit 493b1e42aa
66 changed files with 107 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/platform/assets/components/AssetBadgeGroup.vue
View File

@@ -7,7 +7,7 @@
:key="badge.label"
:class="
cn(
'px-2 py-1 rounded text-xs font-bold uppercase tracking-wider text-modal-card-tag-foreground bg-modal-card-tag-background break-all'
'px-2 py-1 rounded-sm text-xs font-bold uppercase tracking-wider text-modal-card-tag-foreground bg-modal-card-tag-background break-all'
)
"
>

2
src/platform/assets/components/Media3DTop.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="relative size-full overflow-hidden rounded">
<div class="relative size-full overflow-hidden rounded-sm">
<img
v-if="!thumbnailError"
:src="thumbnailSrc"

10
src/platform/assets/components/MediaAssetCard.vue
View File

@@ -87,13 +87,15 @@
<div v-if="loading" class="flex justify-between items-start">
<div class="flex flex-col gap-1">
<div
class="h-4 w-24 animate-pulse rounded bg-modal-card-background"
class="h-4 w-24 animate-pulse rounded-sm bg-modal-card-background"
/>
<div
class="h-3 w-20 animate-pulse rounded bg-modal-card-background"
class="h-3 w-20 animate-pulse rounded-sm bg-modal-card-background"
/>
</div>
<div class="h-6 w-12 animate-pulse rounded bg-modal-card-background" />
<div
class="h-6 w-12 animate-pulse rounded-sm bg-modal-card-background"
/>
</div>
<!-- Content -->
@@ -113,7 +115,7 @@
</div>
<!-- Right side: Output count -->
<div v-if="showOutputCount" class="flex-shrink-0">
<div v-if="showOutputCount" class="shrink-0">
<Button
v-tooltip.top.pt:pointer-events-none="
$t('mediaAsset.actions.seeMoreOutputs')

2
src/platform/assets/components/MediaAssetFilterMenu.vue
View File

@@ -24,7 +24,7 @@ TODO: Extract checkbox pattern into reusable Checkbox component
@keydown.space.prevent="toggleMediaType(filter.type)"
>
<div
class="flex h-4 w-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
class="flex h-4 w-4 shrink-0 items-center justify-center rounded-sm p-0.5 transition-all duration-200"
:class="
mediaTypeFilters.includes(filter.type)
? 'bg-primary-background border-primary-background'

2
src/platform/assets/components/MediaAudioTop.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="relative size-full overflow-hidden rounded">
<div class="relative size-full overflow-hidden rounded-sm">
<div
class="flex size-full flex-col items-center justify-center gap-2 bg-modal-card-placeholder-background transition-transform duration-300 group-hover:scale-105 group-data-[selected=true]:scale-105"
>

2
src/platform/assets/components/MediaImageTop.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="relative size-full overflow-hidden rounded bg-modal-card-placeholder-background"
class="relative size-full overflow-hidden rounded-sm bg-modal-card-placeholder-background"
@dblclick="emit('view')"
>
<img

2
src/platform/assets/components/MediaOtherTop.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="relative size-full overflow-hidden rounded">
<div class="relative size-full overflow-hidden rounded-sm">
<div
class="flex size-full items-center justify-center bg-modal-card-placeholder-background transition-transform duration-300 group-hover:scale-105 group-data-[selected=true]:scale-105"
>

2
src/platform/assets/components/MediaTextTop.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="relative size-full overflow-hidden rounded">
<div class="relative size-full overflow-hidden rounded-sm">
<div
class="flex size-full items-center justify-center bg-modal-card-placeholder-background transition-transform duration-300 group-hover:scale-105 group-data-[selected=true]:scale-105"
>

2
src/platform/assets/components/MediaVideoTop.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="relative size-full overflow-hidden rounded bg-black"
class="relative size-full overflow-hidden rounded-sm bg-black"
@mouseenter="isHovered = true"
@mouseleave="isHovered = false"
>

8
src/platform/assets/components/ModelImportProgressDialog.vue
View File

@@ -176,7 +176,7 @@ function closeDialog() {
>
<div class="flex min-w-0 flex-1 items-center gap-2 text-sm">
<template v-if="isInProgress">
<Loader size="sm" class="flex-shrink-0 text-muted-foreground" />
<Loader size="sm" class="shrink-0 text-muted-foreground" />
<span
class="min-w-0 flex-1 truncate font-bold text-base-foreground"
>
@@ -185,7 +185,7 @@ function closeDialog() {
</template>
<template v-else-if="failedJobs.length > 0">
<i
class="icon-[lucide--circle-alert] size-4 flex-shrink-0 text-destructive-background"
class="icon-[lucide--circle-alert] size-4 shrink-0 text-destructive-background"
/>
<span class="min-w-0 truncate font-bold text-base-foreground">
{{
@@ -197,7 +197,7 @@ function closeDialog() {
</template>
<template v-else>
<i
class="icon-[lucide--check-circle] size-4 flex-shrink-0 text-jade-600"
class="icon-[lucide--check-circle] size-4 shrink-0 text-jade-600"
/>
<span class="min-w-0 truncate font-bold text-base-foreground">
{{ t('progressToast.allDownloadsCompleted') }}
@@ -205,7 +205,7 @@ function closeDialog() {
</template>
</div>
<div class="flex flex-shrink-0 items-center gap-2">
<div class="flex shrink-0 items-center gap-2">
<span
v-if="isInProgress"
class="whitespace-nowrap text-sm text-muted-foreground"

2
src/platform/assets/components/UploadModelConfirmation.vue
View File

@@ -11,7 +11,7 @@
v-if="previewImage"
:src="previewImage"
:alt="metadata?.filename || metadata?.name || 'Model preview'"
class="size-14 flex-shrink-0 rounded object-cover"
class="size-14 shrink-0 rounded-sm object-cover"
/>
<p class="m-0 min-w-0 flex-1 truncate text-base-foreground">
{{ metadata?.filename || metadata?.name }}

2
src/platform/assets/components/UploadModelDialog.vue
View File

@@ -32,7 +32,7 @@
<!-- Navigation Footer - always visible -->
<UploadModelFooter
class="flex-shrink-0"
class="shrink-0"
:current-step="currentStep"
:is-fetching-metadata="isFetchingMetadata"
:is-uploading="isUploading"

4
src/platform/assets/components/UploadModelProgress.vue
View File

@@ -16,7 +16,7 @@
v-if="previewImage"
:src="previewImage"
:alt="metadata?.filename || metadata?.name || 'Model preview'"
class="size-14 flex-shrink-0 rounded object-cover"
class="size-14 shrink-0 rounded-sm object-cover"
/>
<div
class="flex min-w-0 flex-1 flex-col items-start justify-center gap-1"
@@ -47,7 +47,7 @@
v-if="previewImage"
:src="previewImage"
:alt="metadata?.filename || metadata?.name || 'Model preview'"
class="size-14 flex-shrink-0 rounded object-cover"
class="size-14 shrink-0 rounded-sm object-cover"
/>
<div
class="flex min-w-0 flex-1 flex-col items-start justify-center gap-1"

6
src/platform/cloud/onboarding/CloudAuthTimeoutView.vue
View File

@@ -9,7 +9,7 @@
</p>
<!-- Troubleshooting Section -->
<div class="mb-4 rounded bg-secondary-background px-3 py-2 text-left">
<div class="mb-4 rounded-sm bg-secondary-background px-3 py-2 text-left">
<h3 class="mb-2 text-sm font-semibold text-text-primary">
{{ $t('cloudOnboarding.authTimeout.troubleshooting') }}
</h3>
@@ -28,7 +28,7 @@
<!-- Technical Details (Collapsible) -->
<div v-if="errorMessage" class="mb-4 text-left">
<button
class="flex w-full items-center justify-between rounded bg-secondary-background px-4 py-2 text-sm text-text-secondary transition-colors hover:bg-secondary-background-hover border-0"
class="flex w-full items-center justify-between rounded-sm bg-secondary-background px-4 py-2 text-sm text-text-secondary transition-colors hover:bg-secondary-background-hover border-0"
@click="showTechnicalDetails = !showTechnicalDetails"
>
<span>{{ $t('cloudOnboarding.authTimeout.technicalDetails') }}</span>
@@ -41,7 +41,7 @@
</button>
<div
v-if="showTechnicalDetails"
class="mt-2 rounded border-muted-background border p-4 font-mono text-xs text-muted-foreground break-all"
class="mt-2 rounded-sm border-muted-background border p-4 font-mono text-xs text-muted-foreground break-all"
>
{{ errorMessage }}
</div>

2
src/platform/secrets/components/SecretListItem.vue
View File

@@ -13,7 +13,7 @@
/>
<span
v-else-if="secret.provider"
class="rounded bg-base-surface px-2 py-0.5 text-xs text-muted"
class="rounded-sm bg-base-surface px-2 py-0.5 text-xs text-muted"
>
{{ providerLabel }}
</span>

2
src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue
View File

@@ -12,7 +12,7 @@
}}
</h2>
<button
class="cursor-pointer rounded 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="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"
@click="() => handleClose()"
>
<i class="icon-[lucide--x] size-6" />

10
src/platform/workspace/components/WorkspaceSwitcherPopover.vue
View File

@@ -6,12 +6,12 @@
<div
v-for="i in 2"
:key="i"
class="flex h-[54px] animate-pulse items-center gap-2 rounded px-2 py-4"
class="flex h-[54px] animate-pulse items-center gap-2 rounded-sm px-2 py-4"
>
<div class="size-8 rounded-full bg-secondary-background" />
<div class="flex flex-1 flex-col gap-1">
<div class="h-4 w-24 rounded bg-secondary-background" />
<div class="h-3 w-16 rounded bg-secondary-background" />
<div class="h-4 w-24 rounded-sm bg-secondary-background" />
<div class="h-3 w-16 rounded-sm bg-secondary-background" />
</div>
</div>
</div>
@@ -23,7 +23,7 @@
<div
:class="
cn(
'group flex h-[54px] w-full items-center gap-2 rounded px-2 py-4',
'group flex h-[54px] w-full items-center gap-2 rounded-sm px-2 py-4',
'hover:bg-secondary-background-hover',
isCurrentWorkspace(workspace) && 'bg-secondary-background'
)
@@ -72,7 +72,7 @@
<div
:class="
cn(
'flex h-12 w-full items-center gap-2 rounded px-2 py-2',
'flex h-12 w-full items-center gap-2 rounded-sm px-2 py-2',
canCreateWorkspace
? 'cursor-pointer hover:bg-secondary-background-hover'
: 'cursor-default'

2
src/platform/workspace/components/dialogs/CreateWorkspaceDialogContent.vue
View File

@@ -10,7 +10,7 @@
{{ $t('workspacePanel.createWorkspaceDialog.title') }}
</h2>
<button
class="cursor-pointer rounded 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="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"
:aria-label="$t('g.close')"
@click="onCancel"
>

2
src/platform/workspace/components/dialogs/DeleteWorkspaceDialogContent.vue
View File

@@ -10,7 +10,7 @@
{{ $t('workspacePanel.deleteDialog.title') }}
</h2>
<button
class="cursor-pointer rounded 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="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"
:aria-label="$t('g.close')"
@click="onCancel"
>

2
src/platform/workspace/components/dialogs/EditWorkspaceDialogContent.vue
View File

@@ -10,7 +10,7 @@
{{ $t('workspacePanel.editWorkspaceDialog.title') }}
</h2>
<button
class="cursor-pointer rounded 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="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"
:aria-label="$t('g.close')"
@click="onCancel"
>

2
src/platform/workspace/components/dialogs/InviteMemberDialogContent.vue
View File

@@ -14,7 +14,7 @@
}}
</h2>
<button
class="cursor-pointer rounded 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="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"
:aria-label="$t('g.close')"
@click="onCancel"
>

2
src/platform/workspace/components/dialogs/InviteMemberUpsellDialogContent.vue
View File

@@ -14,7 +14,7 @@
}}
</h2>
<button
class="cursor-pointer rounded 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="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"
:aria-label="$t('g.close')"
@click="onDismiss"
>

2
src/platform/workspace/components/dialogs/LeaveWorkspaceDialogContent.vue
View File

@@ -10,7 +10,7 @@
{{ $t('workspacePanel.leaveDialog.title') }}
</h2>
<button
class="cursor-pointer rounded 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="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"
:aria-label="$t('g.close')"
@click="onCancel"
>

2
src/platform/workspace/components/dialogs/RemoveMemberDialogContent.vue
View File

@@ -10,7 +10,7 @@
{{ $t('workspacePanel.removeMemberDialog.title') }}
</h2>
<button
class="cursor-pointer rounded 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="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"
:aria-label="$t('g.close')"
@click="onCancel"
>

2
src/platform/workspace/components/dialogs/RevokeInviteDialogContent.vue
View File

@@ -10,7 +10,7 @@
{{ $t('workspacePanel.revokeInviteDialog.title') }}
</h2>
<button
class="cursor-pointer rounded 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="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"
:aria-label="$t('g.close')"
@click="onCancel"
>