Using @wxt-dev/module-vue together with UnoCSS

[mklueh]

Feature Request / Example Provision

Hello,

first of all thank you for the wxt plugin, it makes things really easy so far.

However, I'm usually using Vue together with UnoCSS and I'm failing to do so with WXT, especially using @wxt-dev/module-vue.

Is this in general possible and could you provide an example if this is already working?

I'm currently running into diverse issues like this

ERROR ../../../node_modules/pkg-types/dist/index.mjs (1:9): "statSync" is not exported by "__vite-browser-external:node:fs", imported by "../../../node_modules/pkg-types/dist/index.mjs".

or this, depending on my config

- Preparing...
[plugin:unocss:global:build:bundle] [plugin unocss:global:build:bundle] [unocss] Entry module not found. Did you add `import 'uno.css'` in your main entry?
x Build failed in 2.72s
 ERROR  ../../../node_modules/pkg-types/dist/index.mjs (1:9): "statSync" is not exported by "__vite-browser-external:node:fs", imported by "../../../node_modules/pkg-types/dist/index.mjs".
file: C:/Users/MyPc/Workspace/my-project/node_modules/pkg-types/dist/index.mjs:1:9

1: import { statSync, promises } from 'node:fs';
            ^
2: import { resolve, join, isAbsolute, dirname } from 'pathe';
3: import { resolvePath } from 'mlly';

  file: C:/Users/MyPc/Workspace/my-project/node_modules/pkg-types/dist/index.mjs:1:9

  1: import { statSync, promises } from 'node:fs';
  ^
  2: import { resolve, join, isAbsolute, dirname } from 'pathe';
  3: import { resolvePath } from 'mlly';

  at getRollupError (/C:/Users/MyPc/Workspace/my-project/node_modules/rollup/dist/es/shared/parseAst.js:392:41)
  at error (/C:/Users/MyPc/Workspace/my-project/node_modules/rollup/dist/es/shared/parseAst.js:388:42)
  at Module.error (/C:/Users/MyPc/Workspace/my-project/node_modules/rollup/dist/es/shared/node-entry.js:14900:16)
  at Module.traceVariable (/C:/Users/MyPc/Workspace/my-project/node_modules/rollup/dist/es/shared/node-entry.js:15347:29)
  at ModuleScope.findVariable (/C:/Users/MyPc/Workspace/my-project/node_modules/rollup/dist/es/shared/node-entry.js:13248:39)
  at ReturnValueScope.findVariable (/C:/Users/MyPc/Workspace/my-project/node_modules/rollup/dist/es/shared/node-entry.js:5221:38)
  at FunctionBodyScope.findVariable (/C:/Users/MyPc/Workspace/my-project/node_modules/rollup/dist/es/shared/node-entry.js:5221:38)
  at BlockScope.findVariable (/C:/Users/MyPc/Workspace/my-project/node_modules/rollup/dist/es/shared/node-entry.js:5221:38)
  at Identifier.bind (/C:/Users/MyPc/Workspace/my-project/node_modules/rollup/dist/es/shared/node-entry.js:4871:40)
  at CallExpression.bind (/C:/Users/MyPc/Workspace/my-project/node_modules/rollup/dist/es/shared/node-entry.js:2836:23)
✖ Command failed after 17.9 s
 ERROR  Failed to build content
  at buildEntrypoints (/C:/Users/MyPc/Workspace/my-project/node_modules/wxt/dist/core/utils/building/build-entrypoints.mjs:19:13)
  at rebuild (/C:/Users/MyPc/Workspace/my-project/node_modules/wxt/dist/core/utils/building/rebuild.mjs:15:21)
  at internalBuild (/C:/Users/MyPc/Workspace/my-project/node_modules/wxt/dist/core/utils/building/internal-build.mjs:43:32)
  at buildAndOpenBrowser (/C:/Users/MyPc/Workspace/my-project/node_modules/wxt/dist/core/create-server.mjs:78:28)
  at Object.start (/C:/Users/MyPc/Workspace/my-project/node_modules/wxt/dist/core/create-server.mjs:43:9)
  at /C:/Users/MyPc/Workspace/my-project/node_modules/wxt/dist/cli/commands.mjs:32:5
  at CAC.<anonymous> (/C:/Users/MyPc/Workspace/my-project/node_modules/wxt/dist/cli/cli-utils.mjs:16:22)
  at /C:/Users/MyPc/Workspace/my-project/node_modules/wxt/dist/cli/index.mjs:11:1

And this is my config, which is probably totally wrong.

import UnoCSS from "unocss/vite";
import { defineConfig } from "wxt";
import vue from "@vitejs/plugin-vue";
// See https://wxt.dev/api/config.html
export default defineConfig({
  modules: ["@wxt-dev/module-vue"],
  vite: () => ({
    plugins: [
      //vue(),
      UnoCSS()
    ]
  }),
....

Thank you In advance

[Timeraa]

unocss.zip

Here's the starter template with vue and unocss

Your wxt.config.ts should look like this:

import { defineConfig } from "wxt";
import UnoCSS from "unocss/vite";

// See https://wxt.dev/api/config.html
export default defineConfig({
	modules: ["@wxt-dev/module-vue"],
	hooks: {
		"vite:build:extendConfig": (entries, config) => {
			if (entries.find(e => e.inputPath.endsWith(".html")))
				config.plugins!.push(UnoCSS());
		},
		"vite:devServer:extendConfig": config => {
			config.plugins!.push(UnoCSS());
		}
	}
});

And then very important is that you import the style in your entrypoint

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

createApp(App).mount("#app");

Greetings from Germany 😅

[Timeraa]

@aklinker1 Should I make a wxt module for unocss or maybe add it to the vue one as an opt-in feature?

[aklinker1]

It should be a separate module.

[mklueh]

@Timeraa Thanks for your help!

However, I'm now running into this issue:

 ERROR  [vite]: Rollup failed to resolve import "virtual:uno.css" from "C:/Users/MyPC/Workspace/my-project/apps/myapp/browser-extension/entrypoints/content/index.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
build.rollupOptions.external
  This is most likely unintended because it can break your application at runtime.
  If you do want to externalize this module explicitly add it to
  build.rollupOptions.external
  at viteWarn (/C:/Users/MyPC/Workspace/my-project/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:65532:17)
  at onRollupWarning (/C:/Users/MyPC/Workspace/my-project/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:65564:5)
  at onwarn (/C:/Users/MyPC/Workspace/my-project/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:65227:7)
  at /C:/Users/MyPC/Workspace/my-project/node_modules/rollup/dist/es/shared/node-entry.js:18742:13
  at Object.logger [as onLog] (/C:/Users/MyPC/Workspace/my-project/node_modules/rollup/dist/es/shared/node-entry.js:20381:9)
  at ModuleLoader.handleInvalidResolvedId (/C:/Users/MyPC/Workspace/my-project/node_modules/rollup/dist/es/shared/node-entry.js:19331:26)
  at /C:/Users/MyPC/Workspace/my-project/node_modules/rollup/dist/es/shared/node-entry.js:19289:26
✖ Command failed after 4.942 s
 ERROR  Failed to build content
  at buildEntrypoints (/C:/Users/MyPC/Workspace/my-project/node_modules/wxt/dist/core/utils/building/build-entrypoints.mjs:19:13)
  at rebuild (/C:/Users/MyPC/Workspace/my-project/node_modules/wxt/dist/core/utils/building/rebuild.mjs:15:21)
  at internalBuild (/C:/Users/MyPC/Workspace/my-project/node_modules/wxt/dist/core/utils/building/internal-build.mjs:43:32)
  at build (/C:/Users/MyPC/Workspace/my-project/node_modules/wxt/dist/core/build.mjs:5:10)
  at /C:/Users/MyPC/Workspace/my-project/node_modules/wxt/dist/cli/commands.mjs:44:5
  at CAC.<anonymous> (/C:/Users/MyPC/Workspace/my-project/node_modules/wxt/dist/cli/cli-utils.mjs:16:22)
  at /C:/Users/MyPC/Workspace/my-project/node_modules/wxt/dist/cli/index.mjs:11:1

[aklinker1]

This line is only adding the unocss vite plugin to HTML builds.

if (entries.find(e => e.inputPath.endsWith(".html")))
				config.plugins!.push(UnoCSS());

If you're using it in content scripts, you need to update the .find.

[mklueh]

@aklinker1 oh thanks!

[mklueh]

@aklinker1 it seems I'm still something missing to get it working in the content script.

The css file is created correctly and the content seems to be there

However, the ui of the content script is not styled.

I'm also seeing this log

[unocss] Entry module not found. Did you add import 'uno.css' in your main entry?

Eventhough I have the

import "uno.css"; //or import "virtual:uno.css";

in place in my content/index.ts, as well as my App.vue

Is there anything else I need to do in order to get this working?