@wxt/unocss usage in content scripts

mklueh commented 3 weeks ago

Describe the bug

Hello,

I've seen the new @wxt/unocss is out, thank you very much :)

However, I cannot get it working with the content script either, but it works within the popup as expected.

Could you manage to get it working in the content script as well?

What is the general approach here, for example if I decide to use other frontend frameworks? Will they all break and lack CSS in the content script?

Reproduction

entrypoints/content/index.ts

import "uno.css";
import App from "./App.vue";
import { createApp } from "vue";

export default defineContentScript({
  matches: [URLS],

  runAt: "document_idle",
  cssInjectionMode: "ui",
....

wxt.config.ts

modules: [ "@wxt-dev/module-vue", "@wxt-dev/unocss" ],

unocss:{ configOrPath:"./unocss.config.ts"
},

manifest: { host_permissions: [URL_PATTERN],

permissions: [
  "alarms",
  "privacy",
  "cookies",
  "storage",
  "offscreen",
  "scripting",
  "activeTab",
  "webRequest",
  "loginState",
  "geolocation",
  "notifications",
  "nativeMessaging",
  "web_accessible_resources"
]

}


### Steps to reproduce

_No response_

### System Info

```shell
System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 1.18 GB / 15.77 GB
  Binaries:
    Node: 22.9.0 - ~\AppData\Local\Volta\tools\image\node\22.9.0\node.EXE
    Yarn: 4.5.1 - ~\AppData\Local\Volta\tools\image\yarn\4.5.1\bin\yarn.CMD
    npm: 10.8.3 - ~\AppData\Local\Volta\tools\image\node\22.9.0\npm.CMD
  Browsers:
    Chrome: 130.0.6723.70
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    vite: 5.4.10 => 5.4.10 
    wxt: 0.19.13 => 0.19.13

Used Package Manager

yarn

Validations

[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

mklueh commented 1 week ago

@Timeraa Hi, just thought I'd ping you quickly.

Have you managed to use UnoCSS with your module in the content script as well?

Timeraa commented 1 week ago

Hey @mklueh,

sorry for the late reply, It seems to work fine for me, see example linked below:

unocss.zip

mklueh commented 6 days ago

@Timeraa thank you for your help.

I managed to get it working after looking into your code, but I assume there is a bug.

When using cssInjectionMode: "ui" (and createShadowRootUi) it won't work and I needed to switch to cssInjectionMode: "manifest" to get it working and add

    content_scripts: [{
      css: [
        "content-scripts/content.css"
      ],
      matches: [...]
    }]

There seems to also be another issue regarding hot reloading. If you change a UnoCSS class lets say from initially text-gray-500 to 'text-gray-900' while in dev, the component will lose it's style. The new style is contained in content.css but not applied in the browser.

Not sure if this is a wxt thing or if it's just Chrome caching tho

wxt-dev / wxt