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

[BUG] Plasmo does not load stylesheets for devtools panels #1135

Open
2 of 3 tasks
JustinGrote opened this issue Nov 23, 2024 · 3 comments
Open
2 of 3 tasks

[BUG] Plasmo does not load stylesheets for devtools panels #1135

JustinGrote opened this issue Nov 23, 2024 · 3 comments
Labels
bug Something isn't working

Comments

@JustinGrote
Copy link

What happened?

When using the import command either in uri mode or direct css mode to load a css file, the CSS is bundled to the panel.random.css file but no script link is added to the panel.random.html file.

If you do the same thing to devtools.tsx, the script file is injected into the bundled HTML head.

This makes it so I can't use ag table in a panel without hard-coding a jsdelivr.net or whatnot into the panel html

devtools.html
image

fontpicker.html
image

Notice no stylesheet

Version

Latest

What OS are you seeing the problem on?

Windows, Linux

What browsers are you seeing the problem on?

Chrome, Microsoft Edge

Relevant log output

No response

(OPTIONAL) Contribution

  • I would like to fix this BUG via a PR

Code of Conduct

  • I agree to follow this project's Code of Conduct
  • I checked the current issues for duplicate problems.
@JustinGrote JustinGrote added the bug Something isn't working label Nov 23, 2024
@JustinGrote
Copy link
Author

Dupe of #1028

@JustinGrote
Copy link
Author

JustinGrote commented Nov 23, 2024

Hit this using mantine as well, since they switched to separate CSS rather than emotion-based. hardcoded JSDelivr workaround for now.

@JustinGrote
Copy link
Author

JustinGrote commented Nov 24, 2024

This ended up being a dealbreaker for me so I switched to vite+crjx from plasmo since plasmo doesn't have much in the way of customizability.

In vite I had to define the panel html as a separate input entrypoint, since it effectively gets started in a different iframe than the popup, that way the stylesheet gets loaded and the initial input.tsx gets bundled and resolved correctly, and then just have a hardcoded reference to that in my devtools panel create process. Everything works great now including theming. If I tried to reference it as a static asset with ?url, then it doesn't resolve the index correctly.

I assume whatever bundler plasmo is using is assuming the panel pages are chained from the main index, and therefore don't need the CSS redefined in the style header, so hope that helps! Enjoyed plasmo till I grew out of it needing some robust panel support.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant