Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-23 15:59:47 +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"