@wxt/unocss usage in content scripts

[mklueh]

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

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

[mklueh]

@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]

Hey @mklueh,

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

unocss.zip

[mklueh]

@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

[Timeraa]

Hey sorry for the extremely late reply... I've been playing around with the shadowRootUi and couldn't get the css to work at first too UNTIL I created an empty css file in the content script's folder (named after the shadow root's name property` and then UnoCSS did indeed also work, can you see if you still have that issue and report back? If you can't get it to work I can see if I can wing up a small repro.

[mklueh]

@Timeraa no problem. I'm glad you could reproduce it and I'll try it, but wouldn't it be better to solve it somehow?
It does look like a hackaround to me and others will also fall into that "trap" sooner or later.

[Timeraa]

Yeah it is a bit of a workaround right now, just can't really put in the effort to see if I can fix it easily- my project's been taking so much out of me haha

[mklueh]

@Timeraa no problem! thanks for your effort anyway :)

Do you know another hackaround to make the CSS reload / re-inject once you use new unocss classes without restarting the entire server, or is this rather an issue with the wxt core and not this plugin?