unocss does not work in dev mode due to a __uno.css.js name not supported in chrome

[weiShaoY]

Build tool

Rollup

Where do you see the problem?

• In the browser
• In the terminal

Describe the bug

/crxjs-project/dist
错误
Cannot load extension with file or directory name __uno.css.js. Filenames starting with "_" are reserved for use by the system.
无法加载清单。

Reproduction

这个报错,老哥们能指点下吗

Logs

System Info

1

Severity

annoyance

[Toumash]

@weiShaoY could you rename the file?
Any reproduction steps? How can i reproduce it on my machine?

[weiShaoY]

@weiShaoY你能重命名这个文件吗？ 有复现步骤吗？我该如何在我的机器上复现它？

Install unocss in your project https://unocss-cn.pages.dev/

[Toumash]

It is not a problem with crx, but with unocss and google chrome - google chrome disallows the files to have "_" prefix.
vite can rename the file, but the unocss will still try to access it using the hardcoded name.

Good thing is that it is only needed in dev mode for HRM/inspector.
If you use build mode the thing works just fine without errors.

I've tried various different settings

UnoCSS({
      inspector: false,
      mode: "per-module",
      envMode: "build",
      cli: {
        entry: {
          outFile: "dist/unocss.js",
          patterns: ["src/**/*.{tsx,ts,css}"],
        },
      },
    }),

But none of them seem to work - still __unocss.js in the dist/ folder

[weiShaoY]

It is not a problem with crx, but with unocss and google chrome - google chrome disallows the files to have "_" prefix. vite can rename the file, but the unocss will still try to access it using the hardcoded name.

Good thing is that it is only needed in dev mode for HRM/inspector. If you use build mode the thing works just fine without errors.

I've tried various different settings

UnoCSS({
      inspector: false,
      mode: "per-module",
      envMode: "build",
      cli: {
        entry: {
          outFile: "dist/unocss.js",
          patterns: ["src/**/*.{tsx,ts,css}"],
        },
      },
    }),

But none of them seem to work - still __unocss.js in the dist/ folder

Okay, thanks! UnoCSS is widely used in the Vue ecosystem. I've submitted the issue to UnoCSS and am waiting for their response.

[weiShaoY]

stacksjs/eslint-plugin#79

Hello, unocss has already resolved this issue.

However, when using atomic frameworks like unocss or twcss in crxjs, styles often become completely invalid, even after restarting the project. It only takes effect after deleting node_modules and re-running pnpm i. Could you please investigate this?

[Toumash]

@weiShaoY any hints how to reproduce it? Is it always the case when using the mentioned atomic frameworks or just sometimes?
Now we have the react playground inside the crxjs project so it is easier to have a reproduction working. I can do it but i need some reproduction instructions

[Toumash]

I've created a PR to fix this issue: #1099

The fix addresses both problems mentioned:

1. Underscore filename issue: UnoCSS's __uno.css filename starts with underscore which Chrome Extensions don't allow. The fix sanitizes filenames by stripping leading underscores.

2. HMR not updating styles: There was a race condition where virtual CSS modules would return cached content instead of re-fetching from Vite. The fix ensures virtual modules are always re-written when their content may have changed.

Please test with the branch and let me know if it resolves your issue!