PlasmoHQ
[BUG] Plasmo does not load stylesheets for devtools panels
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
fontpicker.html
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
- [X] I agree to follow this project's Code of Conduct
- [X] I checked the current issues for duplicate problems.
Hit this using mantine as well, since they switched to separate CSS rather than emotion-based. hardcoded JSDelivr workaround for now.
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.