Fix wasm_proxied_mount_css to not reuse an existing style element

[whitphx]

Description

Fixes #7694

See this comment about this PR -> #7709 (comment)

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	building...
	Storybook	failed!	Details
🦄	Changes	detected!	Details

---

Install Gradio from this PR

pip install https://gradio-builds.s3.amazonaws.com/077218139b4ac1a947dad385e3cf227215425b9c/gradio-4.21.0-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@077218139b4ac1a947dad385e3cf227215425b9c#subdirectory=client/python"

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/app	patch
gradio	patch

• Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Fix wasm_proxied_mount_css to not reuse an existing style element

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

[whitphx]

This was implemented after the non-Wasm ver. which skips mounting the CSS if there is always a mounted element as below.

gradio/js/app/src/css.ts

Lines 17 to 19 in 28342a2

	const existing_link = document.querySelector(`link[href='${_url}']`);
	if (existing_link) return Promise.resolve();

However, Lite is different from the normal one in that the app can be executed repeatedly and the frontend can be refreshed many times, so this design was not correct and the requested CSS must be mounted, replacing the old one.

[whitphx]

Even this change, the playground still has a problem that the background is not styled correctly.
Will fix it as well.

Playground:
Expected:

[whitphx]

The reason why the background theme is not applied is this:

gradio/js/app/src/Index.svelte

Lines 259 to 261 in 28342a2

	if (window.__gradio_mode__ !== "website") {
	active_theme_mode = handle_darkmode(wrapper);
	}

Because handle_darkmode() is not called here due to the if-condition, darkmode() is not called finally, then the background-update code below is not executed.

gradio/js/app/src/Index.svelte

Line 238 in 28342a2

bg_element.style.background = "var(--body-background-fill)";

→What about enforcing the light theme instead of skipping applying the theme when window.__gradio_mode__ === "website"? Created a separate PR: #7710

[aliabd]

Thanks @whitphx everything lgtm.

there's a funny effect on playground where the theme also affects the code component.

but i actually think that's fine

[whitphx]

@aliabd Thanks!
Let's discuss about the playground theming issue if you find it not good later 👍

[abidlabs]

Merging as well so that we can do a release soon. Thanks again @whitphx!