Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stylus refuses to save any styles or acknowledge the most basic CSS commands #1856

Closed
DDBE12 opened this issue Dec 15, 2024 · 96 comments
Closed

Comments

@DDBE12
Copy link

DDBE12 commented Dec 15, 2024

Bug Report

Bug Description

I'm trying to use Stylus in Firefox. None of it works, it just plain refuses to save even the most basic, standard CSS examples, such as trying to make the background red. The editor throws up no error messages or anything.

I just click the 'Save' button, go to the website, re-load the site, and then it's telling me the list of styles is empty. This even happens when trying to apply it on all websites with *://*/* .

HELP!

@tophf
Copy link
Member

tophf commented Dec 15, 2024

Show a screenshot of your editor window and your CSS code. See also https://github.com/openstyles/stylus/wiki/Writing-styles

@DDBE12
Copy link
Author

DDBE12 commented Dec 15, 2024

grafik

@DDBE12
Copy link
Author

DDBE12 commented Dec 15, 2024

As you can prolly see, I'm trying to change the style of the Gradio form of FaceFusion all to the left in my tab list.

@tophf
Copy link
Member

tophf commented Dec 15, 2024

  1. Open about:debugging, click Inspect for Stylus extension and when devtools opens, see if there are errors in console
  2. Try https://github.com/openstyles/stylus/wiki/How-to-Debug-Database-Issue

@DDBE12
Copy link
Author

DDBE12 commented Dec 15, 2024

No errors detected.
grafik

@tophf
Copy link
Member

tophf commented Dec 15, 2024

Your screenshot shows the element inspector, not the console tab.

@DDBE12
Copy link
Author

DDBE12 commented Dec 15, 2024

So, this is what console reads: Four times, "Declaration ignored".
grafik

@tophf
Copy link
Member

tophf commented Dec 15, 2024

That's not the console I want to see. Open about:debugging page by copypasting it into the address bar, click Inspect for Stylus extension and when devtools opens, see if there are errors in console.

@tophf
Copy link
Member

tophf commented Dec 15, 2024

In your screenshot you were almost there. Simply switch to the console in that devtools.

@tophf
Copy link
Member

tophf commented Dec 15, 2024

@DDBE12
Copy link
Author

DDBE12 commented Dec 15, 2024

grafik

@DDBE12
Copy link
Author

DDBE12 commented Dec 15, 2024

So, no error there, either.

@tophf
Copy link
Member

tophf commented Dec 15, 2024

  1. The style is actually saved, which means the actual URL you visit might be different e.g. https not http or the port is different.

  2. Try making the style global:
    image

@DDBE12
Copy link
Author

DDBE12 commented Dec 15, 2024

Also, why is it not the "Console" when it reads exactly that?
grafik

@tophf
Copy link
Member

tophf commented Dec 15, 2024

Every context has its own console. I needed the background page context.

@DDBE12
Copy link
Author

DDBE12 commented Dec 15, 2024

Okay, when I set it to "Everything", GitHub turns red, but not Gradio.

@tophf
Copy link
Member

tophf commented Dec 15, 2024

What is gradio URL? It works for me on https://www.gradio.app

@DDBE12
Copy link
Author

DDBE12 commented Dec 15, 2024

Gradio alway runs locally in one's browser.
grafik

@e3dio
Copy link

e3dio commented Dec 15, 2024

Setting body{ background-color: red } does not automatically turn the page red. There could be a div in front of body that has different color. Did you inspect the page to see what elements are in front of body ? Do you know basic html/css ?

@tophf
Copy link
Member

tophf commented Dec 15, 2024

The icon in your screenshot shows that the style actually applies, so you need to use devtools to find what in the site's CSS overrides your style.

@tophf tophf closed this as completed Dec 15, 2024
@tophf
Copy link
Member

tophf commented Dec 15, 2024

The site may have an element that's shown over the entire page e.g. youtube does that. See also this article about specificity https://github.com/openstyles/stylus/wiki/Writing-styles#specificity

@DDBE12
Copy link
Author

DDBE12 commented Dec 15, 2024

There's this guide how to add themes to Gradio: https://www.gradio.app/guides/theming-guide But that's only for programmers of Gradio apps, not for mere users of those apps, so I've asked ChatGPT, which recommended Stylus to me.

@DDBE12
Copy link
Author

DDBE12 commented Dec 16, 2024

I've posted that guide to ask you guys if that is telling you anything about how to make Stylus work with this at all.

@tophf
Copy link
Member

tophf commented Dec 16, 2024

No, that's for their internal API. Stylus simply adds CSS to the page and lets the browser deal with it.

The usual reasons for CSS not being applied:

  • wrong selectors
  • insufficient specificity
  • the element is actually inside an iframe - you can see <iframe> in the writer at the bottom of the Stylus' popup
  • the element is actually inside a shadow DOM - there are companion userscripts that propagate CSS into shadow DOM, see Apply styles to ShadowDOM #739 (comment)

@DDBE12
Copy link
Author

DDBE12 commented Dec 16, 2024

I'm afraid this will take several years of me studying IT at university for me to understand how to use Stylus with Gradio.

@e3dio
Copy link

e3dio commented Dec 16, 2024

You need to open the Element Inspector, look around with mouse hovering to see what elements are on the page, look at their styles, try applying and changing different styles, and confirm what styles you need to save to Stylus to get the effect you want. It is very easy if you know what you are doing, but you seem completely new and you rely on AI to tell you everything so you lack basic troubleshooting skills

@tophf
Copy link
Member

tophf commented Dec 16, 2024

I guess any video tutorial on using devtools element inspector for CSS editing might be helpful or here's one for Stylus I just found: https://www.youtube.com/watch?v=GNAptZnPAmg

@DDBE12
Copy link
Author

DDBE12 commented Dec 16, 2024

@tophf Thanks, I've been watching that video before I've even started this thread, but I gave up, because none of what the guy in the video talks about works. For example, how am I supposed to identify some "h2my program", if there's no such thing or name in the Gradio website? So I gave up on that video and made this thread instead.

@tophf
Copy link
Member

tophf commented Dec 16, 2024

The video shows how to use devtools and it's what matters. Use devtools to look at the actual page structure so you don't try things blindly. Can you show it here?

@tophf
Copy link
Member

tophf commented Dec 16, 2024

It works for me:

image

Do you see your code from Stylus editor in devtools the way it's shown in my screenshot on the right center?

@DDBE12
Copy link
Author

DDBE12 commented Dec 16, 2024

Now I'm getting this error:

grafik

@tophf
Copy link
Member

tophf commented Dec 16, 2024

Remove { and } in the second line.

@DDBE12
Copy link
Author

DDBE12 commented Dec 16, 2024

I also saw I'd copied the wrong command from you. Still the same, though:

grafik

@tophf
Copy link
Member

tophf commented Dec 16, 2024

It's weird that there's still an error shown after you fixed the code. Do you see this code in devtools on the right the way it's shown in my screenshot?

@DDBE12
Copy link
Author

DDBE12 commented Dec 16, 2024

Devtools is looking like this now:

grafik

@tophf
Copy link
Member

tophf commented Dec 16, 2024

Try scrolling the right panel all the way to the bottom.

@tophf
Copy link
Member

tophf commented Dec 16, 2024

The :root element's style should be shown at the end.

@DDBE12
Copy link
Author

DDBE12 commented Dec 16, 2024

grafik

@tophf
Copy link
Member

tophf commented Dec 16, 2024

Yeah, like this, but is there an entry with your code?

@DDBE12
Copy link
Author

DDBE12 commented Dec 16, 2024

Nope.

@tophf
Copy link
Member

tophf commented Dec 16, 2024

If there's none, try enabling these two options in Stylus:

image

@tophf
Copy link
Member

tophf commented Dec 16, 2024

And reload the web page.

@DDBE12
Copy link
Author

DDBE12 commented Dec 16, 2024

I don't seem to have those "Advanced" toggles.

@DDBE12
Copy link
Author

DDBE12 commented Dec 16, 2024

Could it be I have an old version? I've got v1.5.51 here.

@tophf
Copy link
Member

tophf commented Dec 16, 2024

It has them. Just scroll the options window down.

@DDBE12
Copy link
Author

DDBE12 commented Dec 16, 2024

What options window? This? It doesn't have them:

grafik

Nothing here, either:

grafik

@tophf
Copy link
Member

tophf commented Dec 16, 2024

Click the gear icon in the Stylus popup or select options in the context menu for the toolbar icon.

@DDBE12
Copy link
Author

DDBE12 commented Dec 16, 2024

Ohhh!

@DDBE12
Copy link
Author

DDBE12 commented Dec 16, 2024

Okay, those two toggles are activated now. It seems to have turned a lot of code in devtools from greyed out and crossed out into fully working again, but still the same error message and this exact code not appearing there:

grafik

@tophf
Copy link
Member

tophf commented Dec 16, 2024

Maybe you've copied some invalid invisible character, try removing the spaces in the code.

@DDBE12
Copy link
Author

DDBE12 commented Dec 16, 2024

Still the same:

grafik

Also, I forgot also disclosing this additional error via mouse-over:

grafik

@tophf
Copy link
Member

tophf commented Dec 16, 2024

Try removing the style and creating it anew, maybe it's broken somehow. Also, judging by the documentation for gradio it may use an iframe. Check if you see it in devtools like this:

image

@DDBE12
Copy link
Author

DDBE12 commented Dec 16, 2024

I've manually typed every single character by hand now, and still the same two errors: "Empty rule" and not finding what it expects to find.

@tophf
Copy link
Member

tophf commented Dec 16, 2024

IDK, I give up then. Maybe I'll try installing gradio locally when I have free time someday...

@DDBE12
Copy link
Author

DDBE12 commented Dec 16, 2024

I'm not getting an exact "<iframe src...", but this:

grafik

grafik

grafik

@tophf
Copy link
Member

tophf commented Dec 16, 2024

Looks like it's not in an iframe, so I don't know what's wrong.

@DDBE12
Copy link
Author

DDBE12 commented Dec 16, 2024

Okay, so with Stylus not working at all on Gradio, I'll be removing it from Firefox.

@TayliaM
Copy link

TayliaM commented Dec 17, 2024

Okay, those two toggles are activated now. It seems to have turned a lot of code in devtools from greyed out and crossed out into fully working again, but still the same error message and this exact code not appearing there:

grafik

Just an casual observation, this code appears to have a vertical pipe "|" at the beginning of line 2, which would account for the 2 issues.

@tophf
Copy link
Member

tophf commented Dec 17, 2024

Oh I thought it was a fortuitously captured insertion point that blinks at the cursor position, bcause that's how it was in my screenshot, but indeed you may be right. I expected the user to copypaste the text from the comment without adding |. Next time I'll be more careful with my screenshots.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants