Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS changes are not detected when manually injecting (HMR?) #1062

Open
5 tasks done
42willow opened this issue Oct 11, 2024 · 0 comments
Open
5 tasks done

CSS changes are not detected when manually injecting (HMR?) #1062

42willow opened this issue Oct 11, 2024 · 0 comments
Labels
pending-triage Someone (usually a maintainer) needs to look into this to see if it's a bug

Comments

@42willow
Copy link
Contributor

42willow commented Oct 11, 2024

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

@42willow 42willow added the pending-triage Someone (usually a maintainer) needs to look into this to see if it's a bug label Oct 11, 2024
@42willow 42willow changed the title CSS changes are not detected when manually injecting CSS changes are not detected when manually injecting (HMR?) Nov 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pending-triage Someone (usually a maintainer) needs to look into this to see if it's a bug
Projects
None yet
Development

No branches or pull requests

1 participant