mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-28 10:44:12 +00:00
482ad401d4
## 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>
51 lines
1.7 KiB
Markdown
51 lines
1.7 KiB
Markdown
---
|
|
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
|