search

greasify / vite-userscript-plugin

⚡️ A Vite plugin to build userscripts for Tampermonkey, Greasemonkey and Violentmonkey.
https://npmjs.com/vite-userscript-plugin
MIT License
45 stars 3 forks source link

CSS Inject support #29

Open TechplexEngineer opened 1 month ago

TechplexEngineer commented 1 month ago

Thanks for building this

I noticed that previous versions have CSS Inject support. https://github.com/greasify/vite-userscript-plugin/pull/28 I'm attempting to use this plugin with svelte to build a userscript but the component styles are not getting applied.

Any thoughts on how it might be possible to load component styles?

Thanks

<main>
  <h1>Modal</h1>
</main>
<div class="modalBackdrop"></div>

<style>
  main {
    width: 80vw;
    height: 100vh;
  }
  .modalBackdrop {
    --bs-backdrop-zindex: 1050;
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--bs-backdrop-zindex);
    width: 100vw;
    height: 100vh;
    background-color: var(--bs-backdrop-bg);
  }
</style>
crashmax-dev commented 1 month ago

Hi @TechplexEngineer

I removed support for automatic style injection because of unpredictable behavior and lack of control over styles, so for this purpose there is GM_addStyle, but since we have sfc framework, the use of css modules does not make much sense, I came to the fact that you can use the @resource directive to load styles (but only if you use gh pages as a repository of scripts), for this purpose I reproduced the work in this repository, you may be interested in it.