HMR doesn't work with .css?inline (inline css imports)

[A-Shleifman]

Build tool

Vite

Where do you see the problem?

• [X] In the browser
• [ ] In the terminal

Describe the bug

I'm importing tailwind css to inject it into a shadow DOM. I don't want it to be available anywhere else, so I have to import it as tailwind.css?inline rather than tailwind.css.

When changing CSS classes in components, HMR is triggered properly if styles are imported with tailwind.css, but not with tailwind.css?inline. Both are supported by Vite without crxjs

//👇 HMR works when loading as either a content script (with crxjs) or directly in the browser
import styles from 'tailwind.css';

//👇 HMR works directly in the browser, but not when loaded with crxjs
import styles from 'tailwind.css?inline';

Example code

import styles from 'index.css?inline';
import { createRoot } from 'react-dom/client';

let root = document.querySelector('#box-root');

if (!root) {
  root = document.createElement('div');
  root.id = '#box-root';
  document.body.prepend(root);

  const Box = () => <div className="h-[400px] w-screen bg-[purple]" />;

  createRoot(root).render(
    <>
      <style type="text/css">{styles}</style>

      <Box />
    </>,
  );
}

Reproduction

Example provided above

Logs

No response

System Info

System:
    OS: macOS 13.0
    CPU: (10) arm64 Apple M1 Max
    Memory: 11.73 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Chrome: 107.0.5304.121
    Safari: 16.1
  npmPackages:
    @crxjs/vite-plugin: ^2.0.0-beta.6 => 2.0.0-beta.7
    vite: ^3.2.4 => 3.2.4

Severity

annoyance

[thmsmlr]

I found a workaround in the meantime: https://github.com/crxjs/chrome-extension-tools/issues/609#issuecomment-1563634844

[gary-lo]

@A-Shleifman - have you found a workaround for react?

[A-Shleifman]

Apart from fixing this problem in crxjs, there are 3 options that I can think of:

1) Do what @thmsmlr suggested - run a watcher and touch the tailwind.css file on change. Although, I'm not sure importing css globally and then disabling it is required for this to work. Maybe something like this would work

npx chokidar-cli 'src' -c 'touch tailwind.css'

but I haven't tested it

2) The other option is to have a very light extension application which renders an iframe with the rest of the application (e.g. Next.js). It would be over-engineering in most cases and it makes calling chrome API much harder (required posting messages between the extension and the iframe), but that's what I did as it allows me to change the code without releasing a new extension version. As the iframe is a completely separate application, it's much easier to test it and HMR works very well.

3) You could try Plasmo. It's a framework for writing extensions. They might have a working HMR with tailwind, but I chose crxjs as I needed low-level control over the extension, which frameworks take away.

[Alm0g]

I'm not sure this issue is specific to Tailwind. HMR does not seem to work with .ts?script too.

Before loading the extension, it detects changes. However, once I load the extension, changes are no longer detected only to those ?script files, yielding the following error:

2:26:13 PM [crx] files ready in 885ms
  vite:hmr [file change] src/.../statusButton.ts +49s
  vite:hmr [no modules matched] src/.../statusButton.ts +1ms
2:27:01 PM [crx] files start dist/...

Is it possible that it can't find it due to the script having an extra scriptId? src/.../statusButton.ts?scriptId=RS3RX15B

---

Moving from the current stable version (1.0.14) to beta (2.0.0-beta.18) seems to fix the issue for vite2.9.15. When I moved to vite4.4.9, again, the no module matched error returned.

---

I believe the wrong handling's origin is here: https://github.com/crxjs/chrome-extension-tools/blob/5bf6711ec75e74f31b22474a7465a72a052089e0/packages/vite-plugin/src/node/plugin-contentScripts_dynamic.ts#L76

[shirshendubhowmick]

@jacksteamdev Can we get this fixed ? Looks like a PR for this issue is available.

[rezasohrabi]

For anyone seeking robust HMR support with inline CSS, I recommend checking out chrome-ext-starter. This project not only offers excellent HMR support but also integrates Tailwind CSS and Daisy UI seamlessly into the shadow DOM. It's a great choice for projects requiring efficient handling of inline CSS updates. also you can visit here for quick overview