Open A-Shleifman opened 1 year ago
I found a workaround in the meantime: https://github.com/crxjs/chrome-extension-tools/issues/609#issuecomment-1563634844
@A-Shleifman - have you found a workaround for react?
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.
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
@jacksteamdev Can we get this fixed ? Looks like a PR for this issue is available.
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
Build tool
Vite
Where do you see the problem?
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 thantailwind.css
.When changing CSS classes in components, HMR is triggered properly if styles are imported with
tailwind.css
, but not withtailwind.css?inline
. Both are supported by Vite without crxjsExample code
Reproduction
Example provided above
Logs
No response
System Info
Severity
annoyance