CSS changes are not applied without ?url (HMR)

[42willow]

Describe the bug

I am manually injecting a CSS file located within entrypoints/

entrypoints/content.ts

import "./some.css";
// if the above line isn't included, then a change in that file will not trigger a reload
// if the above line is included, then a change in that file will trigger a reload, but not update the contents of the css file
// to actually update the css, you have to quit wxt entirely and start a new dev server

export default defineContentScript({
  matches: ['*://example.com/*'],
  cssInjectionMode: "manual", // this line doesn't seem to make a difference, unless the lines 12-17 are commented out, in which case it prevents styles from being injected
  main() {
    console.log('Hello content.');
    // if the below lines are commented out (and line 9, css injection mode), the issue is fixed
    // let link = document.createElement("link");
    // link.rel = "stylesheet";
    // link.href = browser.runtime.getURL("/assets/some.css" as any);
    // link.classList.add("schooltape");
    // document.head.appendChild(link);
  },
});

May be related to #386

Reproduction

1. clone https://github.com/42Willow/wxt-css-reload-bug-repro and cd
2. pnpm install
3. pnpm run dev
4. navigate to https://example.com
5. modify entrypoints/some.css - extension reloads but styles are not changed

It doesn't seem to have any effect on whether the css file is explicitly imported into the content script or not, only that the extension only reloads if there is a change and the css file has been imported by the content script. Is this intended behaviour? as the css file is located within entrypoints/

Steps to reproduce

built files are located in dist/ of the repo provided above (output of pnpm dev)

System Info

System:
    OS: Linux 6.6 NixOS 24.11 (Vicuna) 24.11 (Vicuna)
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
    Memory: 9.29 GB / 15.26 GB
    Container: Yes
    Shell: 0.98.0 - /run/current-system/sw/bin/nu
  Binaries:
    Node: 20.17.0 - /etc/profiles/per-user/willow/bin/node
    npm: 10.8.2 - /etc/profiles/per-user/willow/bin/npm
    pnpm: 9.10.0 - /etc/profiles/per-user/willow/bin/pnpm
    bun: 1.1.29 - /etc/profiles/per-user/willow/bin/bun
  Browsers:
    Chromium: 129.0.6668.89
  npmPackages:
    wxt: ^0.19.11 => 0.19.11

Used Package Manager

pnpm

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.

[aklinker1]

You should use import cssUrl from "./some.css?url", then add the stylesheet with browser.runtime.getURL(cssUrl as any);.

https://vite.dev/guide/assets.html#importing-asset-as-url

That should effectively "include" the CSS file in the build, making Vite send the correct reload events on save, while also allowing you to load it into a stylesheet manually.

[aklinker1]

You could also try Vite's ?raw to import the CSS as a string, and set a style's body to that text instead of using a URL.

https://vite.dev/guide/assets.html#importing-asset-as-string

[42willow]

thanks! I managed to get it to work based on the advice in your first comment - but for some reason I still need the import "./some.css" alongside the `import cssUrl from "./some.css?url"

With ?url:

See: 42willow/wxt-css-reload-bug-repro@832cb56

With ?raw:

import cssString from "./some.css?raw";
import "./some.css"; // need this line still! otherwise it won't work

export default defineContentScript({
  matches: ["*://example.com/*"],
  // cssInjectionMode: "manual", // this line doesn't seem to make a difference
  main() {
    console.log("Hello content.");
    // add style with cssString
    const style = document.createElement("style");
    style.textContent = cssString;
    document.head.appendChild(style);
  },
});

I'm not sure whether this is intended behaviour as I have limited experience - but it'd probably be helpful to have this documented

[42willow]

schooltape/schooltape@3cd293e
Making these changes seemed to have the unintended effect of injecting the styles into every page! On second look, maybe I need to set the injection mode to manual...

See: schooltape/schooltape#169

[42willow]

for anyone who comes across this issue, here's a working solution:

import cssString from "./some.css?url";
import "./some.css"; // needed or file change wont trigger a reload

export default defineContentScript({
  matches: ["<all_urls>"],
  cssInjectionMode: "manual", // needed or styles will be injected on everything that matches the match
  main() {
    console.log("Hello content.");
    // add style with cssString
    const style = document.createElement("style");
    style.textContent = cssString;
    document.head.appendChild(style);
  },
});

I'll close this as this works now

[1natsu172]

@aklinker1 His problem was solved with workaround, but I think it is fundamentally a bug in WXT. I tried with scaffolded projects, HMR does not work and .output/chrome-mv3/content-scripts/content.css is not updated when using suffixes such as ?raw , ?inline, ?url. Essentially, the side effect import css should be unnecessary.

BTW, in the vite itself, HMR works even with suffixes.

[1natsu172]

Alright, I debugged it and figured out the problem. So I will submit a PR.