mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-05 05:00:03 +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>
76 lines
1.9 KiB
JSON
76 lines
1.9 KiB
JSON
{
|
|
"extends": [],
|
|
"overrides": [
|
|
{
|
|
"files": ["*.vue", "**/*.vue"],
|
|
"customSyntax": "postcss-html"
|
|
}
|
|
],
|
|
"rules": {
|
|
"import-notation": "string",
|
|
"font-family-no-missing-generic-family-keyword": true,
|
|
"declaration-property-value-no-unknown": [
|
|
true,
|
|
{
|
|
"typesSyntax": {
|
|
"radial-gradient()": "| <any-value>"
|
|
},
|
|
"ignoreProperties": {
|
|
"speak": ["none"],
|
|
"app-region": ["drag", "no-drag"],
|
|
"/^(width|height)$/": ["/^v-bind/"]
|
|
}
|
|
}
|
|
],
|
|
"color-function-notation": "modern",
|
|
"shorthand-property-no-redundant-values": true,
|
|
"selector-pseudo-element-colon-notation": "double",
|
|
"no-duplicate-selectors": true,
|
|
"font-weight-notation": "numeric",
|
|
"length-zero-no-unit": true,
|
|
"color-no-invalid-hex": true,
|
|
"number-max-precision": 4,
|
|
"property-no-vendor-prefix": true,
|
|
"value-no-vendor-prefix": true,
|
|
"selector-no-vendor-prefix": true,
|
|
"media-feature-name-no-vendor-prefix": true,
|
|
"selector-max-universal": 1,
|
|
"selector-max-type": 2,
|
|
"declaration-block-no-duplicate-properties": true,
|
|
"block-no-empty": true,
|
|
"no-descending-specificity": null,
|
|
"no-duplicate-at-import-rules": true,
|
|
"at-rule-disallowed-list": ["apply"],
|
|
"at-rule-no-unknown": [
|
|
true,
|
|
{
|
|
"ignoreAtRules": [
|
|
"tailwind",
|
|
"layer",
|
|
"config",
|
|
"theme",
|
|
"reference",
|
|
"plugin",
|
|
"custom-variant",
|
|
"utility",
|
|
"source"
|
|
]
|
|
}
|
|
],
|
|
"function-no-unknown": [
|
|
true,
|
|
{
|
|
"ignoreFunctions": ["theme", "v-bind", "from-folder", "from-json"]
|
|
}
|
|
]
|
|
},
|
|
"ignoreFiles": [
|
|
"node_modules/**",
|
|
"dist/**",
|
|
"playwright-report/**",
|
|
"public/**",
|
|
"src/lib/litegraph/**"
|
|
],
|
|
"files": ["**/*.css", "**/*.vue"]
|
|
}
|