Errors with shadow-dom branch

[maenkhouseh]

Once I run pnpm run dev after switching to the shadow-dom branch I get so many errors in console (and the extension losses style), the errors look as such:

transforming...
[0] 5:02:41 PM [vite] (client) Pre-transform error: [sass] File URL path must be absolute
[0]   ╷
[0] 2 │ @use '/node_modules/vite-plugin-vue-devtools/src/overlay/devtools-overlay.css';
[0]   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[0]   ╵
[0]   src\assets\base.scss 2:1           @use
[0]   src\content-script\index.scss 1:1  root stylesheet
[0]   Plugin: vite:css
[0]   File: D:/dev-new/tendersalerts-extension/src/content-script/index.scss?inline
[0]   [sass] File URL path must be absolute
[0]     ╷
[0]   2 │ @use '/node_modules/vite-plugin-vue-devtools/src/overlay/devtools-overlay.css';
[0]     │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[0]     ╵
[0]     src\assets\base.scss 2:1           @use
[0]     src\content-script\index.scss 1:1  root stylesheet

Correct me if I am testing this in a wrong manner please, or let me know how to fix this, thanks in advance

[mubaidr]

Did you do pnpm i before the dev?

[maenkhouseh]

of course

[maenkhouseh]

in base.scss
using this:
@use '../../node_modules/vite-plugin-vue-devtools/src/overlay/devtools-overlay.css';

fixes the issue

daisyui works now in the shadow-dom version?

[mubaidr]

What os are you on?

[maenkhouseh]

currently windows

[mubaidr]

Just tested on linux, no errors during dev or build.

pnpm dev:chrome

> vite-vue3-chrome-extension-v3@0.0.1 dev:chrome /projects/vite-vue3-chrome-extension-v3
> vite -c vite.chrome.config.ts

Re-optimizing dependencies because lockfile has changed

  VITE v6.0.3  ready in 4783 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools

  ➜  press h + enter to show help

Maybe we need to test on windows specifically?

[maenkhouseh]

Yes, once updated, it worked and I ll test build and let you know

[maenkhouseh]

but daisyui seems not working, any fix?

[maenkhouseh]

Tried many things to make it work but none worked, any suggestions?

[maenkhouseh]

Any news?

[maenkhouseh]

@mubaidr is there a fix for this?

[mubaidr]

Apologies, but I did not have time to work further on tis. I will do, when i have time though.

[maenkhouseh]

Many thanks and much appreciated

[mubaidr]

I will try to debug this issue tonight, but can you explain why iframe is not valid option for this? In the latest branch, I have updated styles import to iframe, so it won't influence the parent webpage and vice versa.

[mubaidr]

@maenkhouseh I am looking for your feedback here, before I try to debug issue with shadow-dom branch.

[mubaidr]

Ohh And i almost forgot to say thank you for sponsoring this feature! Really appreciate that! @maenkhouseh

[maenkhouseh]

You are most welcome, and your work much appreciated.

[mubaidr]

As you can see in attached screenshot, daisy ui webpage has different theme and our content script has different theme.