search

lisonge / vite-plugin-monkey

A vite plugin server and build your.user.js for userscript engine like Tampermonkey, Violentmonkey, Greasemonkey, ScriptCat
MIT License
1.33k stars 70 forks source link

Is it possible to opt out of SystemJS usage when using async/await imports? And/or cleanup error messages #173

Closed blakehurd closed 1 month ago

blakehurd commented 1 month ago

This is a minor issue (cosmetic, more than functional), but I thought I'd bring it up as it adds noise to the error logs and some unnecessary HTTP requests in my use case. I'd also like to remove the @require on SystemJS assuming I don't actually need them.

When a userscript is using iframes and supporting Greasemonkey compatibility, using async imports of css instead of static imports is beneficial, to ensure the CSS is added correctly/at the right time. When importing CSS in this manner, it works and I can use .default to get the CSS. However, the SystemJS invocation from the vite-plugin-monkey created code seems to largely fail with a couple of noisy error logs.

Omitted the origin/full URLs as they're not relevant.

mainline:1 Access to script at '.../style-7450c90d-aca50956.js' from origin '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
.../style-7450c90d-aca50956.js:1       
       Failed to load resource: net::ERR_FAILED
3userscript.html?name=....user.js&id=fcd33a59-d9b7-49ee-9892-8566aad7de97:5 Uncaught (in promise) Error: Error loading .../style-7450c90d-aca50956.js (SystemJS Error#3 https://github.com/systemjs/systemjs/blob/main/docs/errors.md#3)

The .css being imported in this way does not have a corresponding .js file, so I'm not sure why vite-plugin-monkey is trying to load it in this fashion, unless it's trying to polyfill for older browsers (based on my reading of what SystemJS does).

lisonge commented 1 month ago 
import cssText from './your_style.css?inline'

const style = document.createElement('style')
style.textContent = cssText

if(your_condition){
  document.head.append(style)
}
blakehurd commented 1 month ago

Thanks! Looks like I had everything except I didn't know about the ?inline flag. That seems to do exactly what I wanted.

FYI, there's an eslint unresolved module error with this approach for some reason (addition of ?inline perhaps?). The plugin seems to work fine/as expected though, so I just ignored the errors.

lisonge commented 1 month ago

https://vitejs.dev/guide/features.html#disabling-css-injection-into-the-page