Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-30 19:21:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

apply stylelint auto fixes (#5940)

Browse Source 
## Summary

Applied stylelint auto-fixes and resolved manual CSS issues across 25
files to achieve full compliance with stylelint rules.

## Changes

- **What**: Auto-fixed 68 CSS issues (legacy color functions,
font-weight keywords, shorthand properties, pseudo-element notation) and
manually resolved 6 remaining issues (duplicate selectors, vendor prefix
duplicates, font fallbacks, Vue v-bind whitelisting)
- **Config**: Disabled `no-descending-specificity` rule (43 warnings
require architectural CSS refactor)

## Review Focus

Verify no visual regressions from modernized CSS syntax:
- Modern [color function
notation](https://www.w3.org/TR/css-color-4/#funcdef-rgb): `rgba(0, 0,
0, 0.5)` → `rgb(0 0 0 / 50%)`
- Numeric font weights: `bold`/`normal` → `700`/`400`
- Pseudo-element double colons: `:before` → `::before

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5940-apply-stylelint-auto-fixes-2846d73d365081ee8031c212a69a4bd4)
by [Unito](https://www.unito.io)

---------

Co-authored-by: DrJKL <DrJKL0424@gmail.com>
This commit is contained in:
Christian Byrne
2025-10-07 18:49:50 -07:00
committed by GitHub
parent fe0eaaefb3
commit 8fc54646de
21 changed files with 94 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
.stylelintrc.json
View File

@@ -7,15 +7,15 @@
} }
], ],
"rules": { "rules": {
"import-notation": "url", "import-notation": "string",
"font-family-no-missing-generic-family-keyword": true, "font-family-no-missing-generic-family-keyword": true,
"declaration-block-no-redundant-longhand-properties": true,
"declaration-property-value-no-unknown": [ "declaration-property-value-no-unknown": [
true, true,
{ {
"ignoreProperties": { "ignoreProperties": {
"speak": ["none"], "speak": ["none"],
"app-region": ["drag", "no-drag"] "app-region": ["drag", "no-drag"],
"/^(width|height)$/": ["/^v-bind/"]
} }
} }
], ],
@@ -35,7 +35,7 @@
"selector-max-type": 2, "selector-max-type": 2,
"declaration-block-no-duplicate-properties": true, "declaration-block-no-duplicate-properties": true,
"block-no-empty": true, "block-no-empty": true,
"no-descending-specificity": true, "no-descending-specificity": null,
"no-duplicate-at-import-rules": true, "no-duplicate-at-import-rules": true,
"at-rule-no-unknown": [ "at-rule-no-unknown": [
true, true,
@@ -57,7 +57,8 @@
true, true,
{ {
"ignoreFunctions": [ "ignoreFunctions": [
"theme" "theme",
"v-bind"
] ]
} }
] ]

14
apps/desktop-ui/src/components/install/InstallLocationPicker.vue
View File

@@ -286,6 +286,12 @@ const onFocus = async () => {
.p-accordionheader { .p-accordionheader {
@apply rounded-t-xl rounded-b-none; @apply rounded-t-xl rounded-b-none;
} }
.p-accordionheader-toggle-icon {
&::before {
content: '\e902';
}
}
} }
.p-accordioncontent { .p-accordioncontent {
@@ -302,13 +308,5 @@ const onFocus = async () => {
content: '\e933'; content: '\e933';
} }
} }
.p-accordionpanel-active {
.p-accordionheader-toggle-icon {
&::before {
content: '\e902';
}
}
}
} }
</style> </style>

4
apps/desktop-ui/src/views/DesktopUpdateView.vue
View File

@@ -65,12 +65,12 @@ onUnmounted(() => electron.Validation.dispose())
.download-bg::before { .download-bg::before {
@apply m-0 absolute text-muted; @apply m-0 absolute text-muted;
font-family: 'primeicons'; font-family: 'primeicons', sans-serif;
top: -2rem; top: -2rem;
right: 2rem; right: 2rem;
speak: none; speak: none;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-variant: normal; font-variant: normal;
text-transform: none; text-transform: none;
line-height: 1; line-height: 1;

4
apps/desktop-ui/src/views/MaintenanceView.vue
View File

@@ -186,12 +186,12 @@ onUnmounted(() => electron.Validation.dispose())
.backspan::before { .backspan::before {
@apply m-0 absolute text-muted; @apply m-0 absolute text-muted;
font-family: 'primeicons'; font-family: 'primeicons', sans-serif;
top: -2rem; top: -2rem;
right: -2rem; right: -2rem;
speak: none; speak: none;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: 400;
font-variant: normal; font-variant: normal;
text-transform: none; text-transform: none;
line-height: 1; line-height: 1;

20
apps/desktop-ui/src/views/ServerStartView.vue
View File

@@ -18,16 +18,16 @@
style=" style="
background: radial-gradient( background: radial-gradient(
ellipse 800px 600px at center, ellipse 800px 600px at center,
rgba(23, 23, 23, 0.95) 0%, rgb(23 23 23 / 0.95) 0%,
rgba(23, 23, 23, 0.93) 10%, rgb(23 23 23 / 0.93) 10%,
rgba(23, 23, 23, 0.9) 20%, rgb(23 23 23 / 0.9) 20%,
rgba(23, 23, 23, 0.85) 30%, rgb(23 23 23 / 0.85) 30%,
rgba(23, 23, 23, 0.75) 40%, rgb(23 23 23 / 0.75) 40%,
rgba(23, 23, 23, 0.6) 50%, rgb(23 23 23 / 0.6) 50%,
rgba(23, 23, 23, 0.4) 60%, rgb(23 23 23 / 0.4) 60%,
rgba(23, 23, 23, 0.2) 70%, rgb(23 23 23 / 0.2) 70%,
rgba(23, 23, 23, 0.1) 80%, rgb(23 23 23 / 0.1) 80%,
rgba(23, 23, 23, 0.05) 90%, rgb(23 23 23 / 0.05) 90%,
transparent 100% transparent 100%
); );
" "

6
knip.config.ts
View File

@@ -44,9 +44,9 @@ const config: KnipConfig = {
compilers: { compilers: {
// https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199 // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199
css: (text: string) => css: (text: string) =>
[ [...text.replaceAll('plugin', 'import').matchAll(/(?<=@)import[^;]+/g)]
...text.replaceAll('plugin', 'import').matchAll(/(?<=@)import[^;]+/g) .map((match) => match[0].replace(/url\(['"]?([^'"()]+)['"]?\)/, '$1'))
].join('\n') .join('\n')
}, },
vite: { vite: {
config: ['vite?(.*).config.mts'] config: ['vite?(.*).config.mts']

80
packages/design-system/src/css/style.css
View File

@@ -9,35 +9,6 @@
@config '../../tailwind.config.ts'; @config '../../tailwind.config.ts';
:root {
--fg-color: #000;
--bg-color: #fff;
--comfy-menu-bg: #353535;
--comfy-menu-secondary-bg: #292929;
--comfy-topbar-height: 2.5rem;
--comfy-input-bg: #222;
--input-text: #ddd;
--descrip-text: #999;
--drag-text: #ccc;
--error-text: #ff4444;
--border-color: #4e4e4e;
--tr-even-bg-color: #222;
--tr-odd-bg-color: #353535;
--primary-bg: #236692;
--primary-fg: #ffffff;
--primary-hover-bg: #3485bb;
--primary-hover-fg: #ffffff;
--content-bg: #e0e0e0;
--content-fg: #000;
--content-hover-bg: #adadad;
--content-hover-fg: #000;
/* Code styling colors for help menu*/
--code-text-color: rgba(0, 122, 255, 1);
--code-bg-color: rgba(96, 165, 250, 0.2);
--code-block-bg-color: rgba(60, 60, 60, 0.12);
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--fg-color: #fff; --fg-color: #fff;
@@ -129,6 +100,35 @@
} }
:root { :root {
--fg-color: #000;
--bg-color: #fff;
--comfy-menu-bg: #353535;
--comfy-menu-secondary-bg: #292929;
--comfy-topbar-height: 2.5rem;
--comfy-input-bg: #222;
--input-text: #ddd;
--descrip-text: #999;
--drag-text: #ccc;
--error-text: #ff4444;
--border-color: #4e4e4e;
--tr-even-bg-color: #222;
--tr-odd-bg-color: #353535;
--primary-bg: #236692;
--primary-fg: #ffffff;
--primary-hover-bg: #3485bb;
--primary-hover-fg: #ffffff;
--content-bg: #e0e0e0;
--content-fg: #000;
--content-hover-bg: #adadad;
--content-hover-fg: #000;
/* Code styling colors for help menu*/
--code-text-color: rgb(0 122 255 / 1);
--code-bg-color: rgb(96 165 250 / 0.2);
--code-block-bg-color: rgb(60 60 60 / 0.12);
/* --- */
--backdrop: var(--color-white); --backdrop: var(--color-white);
--dialog-surface: var(--color-neutral-200); --dialog-surface: var(--color-neutral-200);
--node-component-border: var(--color-gray-400); --node-component-border: var(--color-gray-400);
@@ -150,7 +150,9 @@
--node-component-tooltip-border: var(--color-sand-100); --node-component-tooltip-border: var(--color-sand-100);
--node-component-tooltip-surface: var(--color-white); --node-component-tooltip-surface: var(--color-white);
--node-component-widget-input: var(--fg-color); --node-component-widget-input: var(--fg-color);
--node-component-widget-input-surface: rgb(from var(--color-zinc-500) r g b / 10%); --node-component-widget-input-surface: rgb(
from var(--color-zinc-500) r g b / 10%
);
--node-component-widget-skeleton-surface: var(--color-zinc-300); --node-component-widget-skeleton-surface: var(--color-zinc-300);
--node-stroke: var(--color-stone-100); --node-stroke: var(--color-stone-100);
} }
@@ -496,7 +498,7 @@ body {
/* Strong and emphasis */ /* Strong and emphasis */
.comfy-markdown-content strong { .comfy-markdown-content strong {
font-weight: bold; font-weight: 700;
} }
.comfy-markdown-content em { .comfy-markdown-content em {
@@ -507,7 +509,7 @@ body {
display: none; /* Hidden by default */ display: none; /* Hidden by default */
position: fixed; /* Stay in place */ position: fixed; /* Stay in place */
z-index: 100; /* Sit on top */ z-index: 100; /* Sit on top */
padding: 30px 30px 10px 30px; padding: 30px 30px 10px;
background-color: var(--comfy-menu-bg); /* Modal background */ background-color: var(--comfy-menu-bg); /* Modal background */
color: var(--error-text); color: var(--error-text);
box-shadow: 0 0 20px #888888; box-shadow: 0 0 20px #888888;
@@ -555,8 +557,8 @@ body {
background-color: var(--comfy-menu-bg); background-color: var(--comfy-menu-bg);
font-family: sans-serif; font-family: sans-serif;
padding: 10px; padding: 10px;
border-radius: 0 8px 8px 8px; border-radius: 0 8px 8px;
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4); box-shadow: 3px 3px 8px rgb(0 0 0 / 0.4);
} }
.comfy-menu-header { .comfy-menu-header {
@@ -574,7 +576,7 @@ body {
} }
.comfy-menu .comfy-menu-actions button { .comfy-menu .comfy-menu-actions button {
background-color: rgba(0, 0, 0, 0); background-color: rgb(0 0 0 / 0);
padding: 0; padding: 0;
border: none; border: none;
cursor: pointer; cursor: pointer;
@@ -689,7 +691,7 @@ span.drag-handle::after {
min-width: 160px; min-width: 160px;
margin: 0; margin: 0;
padding: 3px; padding: 3px;
font-weight: normal; font-weight: 400;
} }
.comfy-list-items button { .comfy-list-items button {
@@ -806,7 +808,7 @@ dialog {
} }
dialog::backdrop { dialog::backdrop {
background: rgba(0, 0, 0, 0.5); background: rgb(0 0 0 / 0.5);
} }
.comfy-dialog.comfyui-dialog.comfy-modal { .comfy-dialog.comfyui-dialog.comfy-modal {
@@ -1012,9 +1014,6 @@ audio.comfy-audio.empty-audio-widget {
.lg-node { .lg-node {
/* Disable text selection on all nodes */ /* Disable text selection on all nodes */
user-select: none; user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
} }
.lg-node .lg-slot, .lg-node .lg-slot,
@@ -1041,7 +1040,6 @@ audio.comfy-audio.empty-audio-widget {
filter: none; filter: none;
backdrop-filter: none; backdrop-filter: none;
text-shadow: none; text-shadow: none;
-webkit-mask-image: none;
mask-image: none; mask-image: none;
clip-path: none; clip-path: none;
background-image: none; background-image: none;

2
src/components/graph/NodeTooltip.vue
View File

@@ -136,7 +136,7 @@ useEventListener(window, 'click', hideTooltip)
pointer-events: none; pointer-events: none;
background: var(--comfy-input-bg); background: var(--comfy-input-bg);
border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); box-shadow: 0 0 5px rgb(0 0 0 / 0.4);
color: var(--input-text); color: var(--input-text);
font-family: sans-serif; font-family: sans-serif;
left: 0; left: 0;

4
src/components/graph/modals/ZoomControlsModal.vue
View File

@@ -229,10 +229,10 @@ watch(
</script> </script>
<style> <style>
.zoomInputContainer:focus-within { .zoomInputContainer:focus-within {
border: 1px solid rgb(204, 204, 204); border: 1px solid rgb(204 204 204);
} }
.dark-theme .zoomInputContainer:focus-within { .dark-theme .zoomInputContainer:focus-within {
border: 1px solid rgb(204, 204, 204); border: 1px solid rgb(204 204 204);
} }
</style> </style>

6
src/components/helpcenter/HelpCenterMenuContent.vue
View File

@@ -526,7 +526,7 @@ onMounted(async () => {
overflow-y: auto; overflow-y: auto;
background: var(--p-content-background); background: var(--p-content-background);
border-radius: 12px; border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); box-shadow: 0 8px 32px rgb(0 0 0 / 0.15);
border: 1px solid var(--p-content-border-color); border: 1px solid var(--p-content-border-color);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
position: relative; position: relative;
@@ -611,7 +611,7 @@ onMounted(async () => {
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 600; font-weight: 600;
color: var(--p-text-muted-color); color: var(--p-text-muted-color);
margin: 0 0 0.5rem 0; margin: 0 0 0.5rem;
padding: 0 1rem; padding: 0 1rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
@@ -669,7 +669,7 @@ onMounted(async () => {
background: var(--p-content-background); background: var(--p-content-background);
border-radius: 12px; border-radius: 12px;
border: 1px solid var(--p-content-border-color); border: 1px solid var(--p-content-border-color);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); box-shadow: 0 8px 32px rgb(0 0 0 / 0.15);
overflow: hidden; overflow: hidden;
transition: opacity 0.15s ease-out; transition: opacity 0.15s ease-out;
} }

5
src/components/node/NodePreview.vue
View File

@@ -202,7 +202,6 @@ const truncateDefaultValue = (value: any, charLimit: number = 32): string => {
._sb_node_preview { ._sb_node_preview {
background-color: var(--comfy-menu-bg); background-color: var(--comfy-menu-bg);
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-size: small;
color: var(--descrip-text); color: var(--descrip-text);
border: 1px solid var(--descrip-text); border: 1px solid var(--descrip-text);
min-width: 300px; min-width: 300px;
@@ -265,7 +264,7 @@ const truncateDefaultValue = (value: any, charLimit: number = 32): string => {
._long_field { ._long_field {
background: var(--bg-color); background: var(--bg-color);
border: 2px solid var(--border-color); border: 2px solid var(--border-color);
margin: 5px 5px 0 5px; margin: 5px 5px 0;
border-radius: 10px; border-radius: 10px;
line-height: 1.7; line-height: 1.7;
text-wrap: nowrap; text-wrap: nowrap;
@@ -278,7 +277,7 @@ const truncateDefaultValue = (value: any, charLimit: number = 32): string => {
._sb_preview_badge { ._sb_preview_badge {
text-align: center; text-align: center;
background: var(--comfy-input-bg); background: var(--comfy-input-bg);
font-weight: bold; font-weight: 700;
color: var(--error-text); color: var(--error-text);
} }
</style> </style>

2
src/components/searchbox/NodeSearchItem.vue
View File

@@ -89,7 +89,7 @@ const props = defineProps<{
:deep(.highlight) { :deep(.highlight) {
background-color: var(--p-primary-color); background-color: var(--p-primary-color);
color: var(--p-primary-contrast-color); color: var(--p-primary-contrast-color);
font-weight: bold; font-weight: 700;
border-radius: 0.25rem; border-radius: 0.25rem;
padding: 0 0.125rem; padding: 0 0.125rem;
margin: -0.125rem 0.125rem; margin: -0.125rem 0.125rem;

2
src/components/sidebar/SidebarIcon.vue
View File

@@ -89,7 +89,7 @@ const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
.side-bar-button-selected .side-bar-button-icon { .side-bar-button-selected .side-bar-button-icon {
font-size: var(--sidebar-icon-size) !important; font-size: var(--sidebar-icon-size) !important;
font-weight: bold; font-weight: 700;
} }
</style> </style>

4
src/components/sidebar/tabs/modelLibrary/ModelPreview.vue
View File

@@ -72,7 +72,7 @@ const modelDef = props.modelDef
object-fit: contain; object-fit: contain;
} }
.model_preview_title { .model_preview_title {
font-weight: bold; font-weight: 700;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
} }
@@ -89,6 +89,6 @@ const modelDef = props.modelDef
font-size: 10px; font-size: 10px;
} }
.model_preview_prefix { .model_preview_prefix {
font-weight: bold; font-weight: 700;
} }
</style> </style>

2
src/components/sidebar/tabs/queue/TaskItem.vue
View File

@@ -66,7 +66,7 @@
outlined outlined
@click="handleOutputLengthClick" @click="handleOutputLengthClick"
> >
<span style="font-weight: bold">{{ flatOutputs.length }}</span> <span style="font-weight: 700">{{ flatOutputs.length }}</span>
</Button> </Button>
</div> </div>
</div> </div>

4
src/components/topbar/WorkflowTabPopover.vue
View File

@@ -223,8 +223,8 @@ defineExpose({
@apply shadow-2xl; @apply shadow-2xl;
} }
.workflow-popover-fade.p-popover:after, .workflow-popover-fade.p-popover::after,
.workflow-popover-fade.p-popover:before { .workflow-popover-fade.p-popover::before {
--p-popover-border-color: var(--comfy-menu-secondary-bg); --p-popover-border-color: var(--comfy-menu-secondary-bg);
left: 50%; left: 50%;
transform: translateX(calc(-50% + var(--shift))); transform: translateX(calc(-50% + var(--shift)));

7
src/extensions/core/groupNodeManage.css
View File

@@ -30,14 +30,14 @@
} }
.comfy-group-manage h2 { .comfy-group-manage h2 {
margin: 0; margin: 0;
font-weight: normal; font-weight: 400;
} }
.comfy-group-manage main { .comfy-group-manage main {
display: flex; display: flex;
overflow: hidden; overflow: hidden;
} }
.comfy-group-manage .drag-handle { .comfy-group-manage .drag-handle {
font-weight: bold; font-weight: 700;
} }
.comfy-group-manage-list { .comfy-group-manage-list {
border-right: 1px solid var(--comfy-menu-bg); border-right: 1px solid var(--comfy-menu-bg);
@@ -49,8 +49,7 @@
} }
.comfy-group-manage-list-items { .comfy-group-manage-list-items {
max-height: calc(100% - 40px); max-height: calc(100% - 40px);
overflow-y: scroll; overflow: hidden scroll;
overflow-x: hidden;
} }
.comfy-group-manage-list li { .comfy-group-manage-list li {
display: flex; display: flex;

4
src/platform/updates/components/ReleaseNotificationToast.vue
View File

@@ -172,7 +172,7 @@ onMounted(async () => {
width: 448px; width: 448px;
padding: 16px 16px 8px; padding: 16px 16px 8px;
background: #353535; background: #353535;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); box-shadow: 0 4px 4px rgb(0 0 0 / 0.25);
border-radius: 12px; border-radius: 12px;
outline: 1px solid #4e4e4e; outline: 1px solid #4e4e4e;
outline-offset: -1px; outline-offset: -1px;
@@ -193,7 +193,7 @@ onMounted(async () => {
width: 42px; width: 42px;
height: 42px; height: 42px;
padding: 10px; padding: 10px;
background: rgba(0, 122, 255, 0.2); background: rgb(0 122 255 / 0.2);
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
justify-content: center; justify-content: center;

8
src/platform/updates/components/WhatsNewPopup.vue
View File

@@ -218,7 +218,7 @@ defineExpose({
width: 400px; width: 400px;
outline: 1px solid #4e4e4e; outline: 1px solid #4e4e4e;
outline-offset: -1px; outline-offset: -1px;
box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 32px rgb(0 0 0 / 0.3);
position: relative; position: relative;
} }
@@ -293,12 +293,6 @@ defineExpose({
transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg);
} }
/* Content Section */
.popup-content {
display: flex;
flex-direction: column;
}
.content-text { .content-text {
color: white; color: white;
font-size: 14px; font-size: 14px;

8
src/scripts/ui/menu/menu.css
View File

@@ -17,7 +17,7 @@
} }
.comfyui-button:active { .comfyui-button:active {
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.5); box-shadow: inset 1px 1px 10px rgb(0 0 0 / 0.5);
} }
.comfyui-button:disabled { .comfyui-button:disabled {
@@ -39,13 +39,13 @@
/* Popup */ /* Popup */
.comfyui-popup { .comfyui-popup {
position: absolute; position: absolute;
left: var(--left);
right: var(--right);
top: var(--top); top: var(--top);
right: var(--right);
bottom: var(--bottom); bottom: var(--bottom);
left: var(--left);
z-index: 2000; z-index: 2000;
max-height: calc(100vh - var(--limit) - 10px); max-height: calc(100vh - var(--limit) - 10px);
box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3); box-shadow: 3px 3px 5px 0 rgb(0 0 0 / 0.3);
} }
.comfyui-popup:not(.open) { .comfyui-popup:not(.open) {

2
src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
View File

@@ -239,6 +239,6 @@ const toggleExtensionsPanel = () => {
</script> </script>
<style scoped> <style scoped>
.conflict-list-item:hover { .conflict-list-item:hover {
background-color: rgba(0, 122, 255, 0.2); background-color: rgb(0 122 255 / 0.2);
} }
</style> </style>