@wxt/unocss usage in content scripts

mklueh commented 2 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 3 days 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 day ago

Hey @mklueh,

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

unocss.zip

wxt-dev / wxt