mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-28 02:34:10 +00:00

Files

Alexander Brown 482ad401d4 fix: eradicate tailwind @apply usage in vue styles (#9146 )

## Summary

Remove Tailwind `@apply` from Vue styles across `src/` and
`apps/desktop-ui/src/` to align with Tailwind v4 guidance, replacing
usages with template utilities or native CSS while preserving behavior.

## Changes

- **What**:
- Batch 1: migrated low-risk template/style utility bundles out of
`@apply`.
- Batch 2: converted PrimeVue/`:deep()` override `@apply` blocks to
native CSS declarations.
- Batch 3: converted `src/components/node/NodeHelpContent.vue` markdown
styling from `@apply` to native CSS/token-based declarations.
- Batch 4: converted final desktop pseudo-element `@apply` styles and
removed stale `@reference` directives no longer required.
- Verified `rg -n "^\s*@apply\b" src apps -g "*.vue"` has no real CSS
`@apply` directives remaining (only known template false-positive event
binding in `NodeSearchContent.vue`).

## Review Focus

- Visual parity in components that previously depended on `@apply` in
`:deep()` selectors and markdown content:
  - topbar tabs/popovers, dialogs, breadcrumb, terminal overrides
  - desktop install/dialog/update/maintenance surfaces
  - node help markdown rendering
- Confirm no regressions from removal of now-unneeded `@reference`
directives.

## Screenshots (if applicable)

- No new screenshots included in this PR.
- Screenshot Playwright suite was run with `--grep="@screenshot"` and
reports baseline diffs in this environment (164 passed, 39 failed, 3
skipped) plus a teardown `EPERM` restore error on local path
`C:\Users\DrJKL\ComfyUI\LTXV\user`.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9146-fix-eradicate-tailwind-apply-usage-in-vue-styles-3116d73d3650813d8642e0bada13df32)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

2026-02-24 21:23:52 -08:00

1.7 KiB

Raw Blame History

globs

**/*.vue

Vue Component Conventions

Applies to all .vue files anywhere in the codebase.

Vue 3 Composition API

Use <script setup lang="ts"> for component logic
Destructure props (Vue 3.5 style with defaults) like const { color = 'blue' } = defineProps<...>()
Use ref/reactive for state
Use computed() for derived state
Use lifecycle hooks: onMounted, onUpdated, etc.

Component Communication

Prefer emit/@event-name for state changes (promotes loose coupling)
Use defineExpose only for imperative operations (form.validate(), modal.open())
Proper props and emits definitions

VueUse Composables

Prefer VueUse composables over manual event handling:

useElementHover instead of manual mouseover/mouseout listeners
useIntersectionObserver for visibility detection instead of scroll handlers
useFocusTrap for modal/dialog focus management
useEventListener for auto-cleanup event listeners

Prefer Vue native options when available:

defineModel instead of useVModel for two-way binding with props

Styling

Use inline Tailwind CSS only (no <style> blocks)
Use cn() from @/utils/tailwindUtil for conditional classes
Refer to packages/design-system/src/css/style.css for design tokens and tailwind configuration
Exception: when third-party libraries render runtime DOM outside Vue templates (for example xterm internals inside PrimeVue terminal wrappers), scoped :deep() selectors are allowed. Add a brief inline comment explaining why the exception is required.

Best Practices

Extract complex conditionals to computed
In unmounted hooks, implement cleanup for async operations

1.7 KiB Raw Blame History