Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-01-26 19:09:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove user.css on cloud to prevent failed requests on startup (#7442)

Browse Source 
## Summary

Removes the user.css put at top of the index.html when building for
cloud.

On local, now compiles to this (pictured):
<img width="1909" height="184" alt="image"
src="https://github.com/user-attachments/assets/be03beea-35e9-47d6-a293-08f2971b04be"
/>

Formatted, that looks like:

```html
<!doctype html>
<html lang="en">
   <head>
      <link rel="stylesheet" href="user.css">
      <link rel="stylesheet" href="api/userdata/user.css">
      <meta charset="UTF-8">
      <title>ComfyUI</title>
      <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
      <link rel="stylesheet" href="materialdesignicons.min.css"/>
      <meta name="mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <link rel="manifest" href="./assets/manifest-CebUEmtR.json">
      <script type="module" crossorigin src="./assets/index-DuwpHar_.js"></script>
      <link rel="modulepreload" crossorigin href="./assets/vendor-other--dOoND1c.js">
      <link rel="modulepreload" crossorigin href="./assets/vendor-primevue-BPXiTI_h.js">
      <link rel="modulepreload" crossorigin href="./assets/vendor-vue-RrbnUvXR.js">
      <link rel="modulepreload" crossorigin href="./assets/vendor-xterm-BZLod3g9.js">
      <link rel="modulepreload" crossorigin href="./assets/vendor-three-aR6ntw5X.js">
      <link rel="modulepreload" crossorigin href="./assets/vendor-tiptap-BVGjFCxT.js">
      <link rel="stylesheet" crossorigin href="./assets/vendor-other-DODGPXtn.css">
      <link rel="stylesheet" crossorigin href="./assets/vendor-xterm-BKlWQB97.css">
      <link rel="stylesheet" crossorigin href="./assets/index-CX9dQXxD.css">
   </head>
   <body class="litegraph grid">
      <div id="vue-app"></div>
   </body>
</html>
```

On cloud, this:

<img width="1911" height="1106" alt="image"
src="https://github.com/user-attachments/assets/bbf6046b-e2fd-4e02-bb71-cba27f579271"
/>


## Context

On the cloud distribution, there are currently 401 errors appearing in
the console from requests attempting to load custom user stylesheets:

- `https://cloud.comfy.org/user.css` (returns 200)
- `https://cloud.comfy.org/api/userdata/user.css` (returns 401)

This is a feature inherited from local ComfyUI that allows users to add
custom stylesheets. The implementation naively requests the stylesheet
from the server, and if the user has added one, it gets loaded;
otherwise, the request fails.

This PR removes the custom stylesheet loading from the cloud
distribution by removing it from teh index.html and only re-injecting it
on non-cloud builds.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7442-remove-user-css-on-cloud-to-prevent-failed-requests-on-startup-2c86d73d3650813d82a0deb3b01cee74)
by [Unito](https://www.unito.io)
This commit is contained in:
Christian Byrne
2025-12-13 17:38:04 -08:00
committed by GitHub
parent 5f20d554f3
commit 194fbdf520
2 changed files with 33 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -5,8 +5,6 @@
<title>ComfyUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="materialdesignicons.min.css" />
<link rel="stylesheet" type="text/css" href="user.css" />
<link rel="stylesheet" type="text/css" href="api/userdata/user.css" />
<!-- Fullscreen mode on mobile browsers -->
<meta name="mobile-web-app-capable" content="yes">

33
vite.config.mts
View File

@@ -234,6 +234,39 @@ export default defineConfig({
tailwindcss(),
typegpuPlugin({}),
comfyAPIPlugin(IS_DEV),
// Inject legacy user stylesheet links for desktop/localhost only
{
name: 'inject-user-stylesheet-links',
enforce: 'post',
transformIndexHtml(html) {
if (DISTRIBUTION === 'cloud') return html
return {
html,
tags: [
{
tag: 'link',
attrs: {
rel: 'stylesheet',
type: 'text/css',
href: 'user.css'
},
injectTo: 'head-prepend'
},
{
tag: 'link',
attrs: {
rel: 'stylesheet',
type: 'text/css',
href: 'api/userdata/user.css'
},
injectTo: 'head-prepend'
}
]
}
}
},
// Twitter/Open Graph meta tags plugin (cloud distribution only)
{
name: 'inject-twitter-meta',