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.

Sign up for GitHub

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

Jump to bottom

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

Open
1 of 2 tasks
A-Shleifman opened this issue Dec 5, 2022 · 7 comments · May be fixed by #755
Open
1 of 2 tasks

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

A-Shleifman opened this issue Dec 5, 2022 · 7 comments · May be fixed by #755

Comments

@A-Shleifman
Copy link
Contributor

Build tool

Vite

Where do you see the problem?

  • 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
@A-Shleifman A-Shleifman mentioned this issue Dec 12, 2022
Open
2 tasks
@A-Shleifman A-Shleifman mentioned this issue Jan 17, 2023
Open
2 tasks
@thmsmlr
Copy link

thmsmlr commented May 26, 2023

I found a workaround in the meantime: #609 (comment)

@gary-lo
Copy link

gary-lo commented Jun 15, 2023

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

@A-Shleifman
Copy link
Contributor Author

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

  1. 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.

  2. 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.

@molvqingtai molvqingtai linked a pull request Jul 18, 2023 that will close this issue
Open
@Alm0g
Copy link

Alm0g commented Aug 11, 2023 •
edited
Loading

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:

chrome-extension-tools/packages/vite-plugin/src/node/plugin-contentScripts_dynamic.ts

Line 76 in 5bf6711

async resolveId(_source: string, importer?: string) {

@shirshendubhowmick
Copy link

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

@rezasohrabi
Copy link

rezasohrabi commented Apr 18, 2024 •
edited
Loading

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

@Reactiver
Copy link

Found workaround 🫡

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],

  // fix here
  safelist: [
    {
      pattern:  /^.*$/,  // 👈  This includes all Tailwind classes in the bundle
    },
  ],
};

Only for development mode:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  safelist: [
    process.env.NODE_ENV !== 'production' && {
      pattern: /^.*$/, // 👈  This includes all Tailwind classes in the bundle only for development mode
    },
  ],
};

P.S. I spent the whole day trying to fix this, but came up with an idea in the shower the next day 😁

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(hmr): fix tailwindcss hmr does not work (vite) molvqingtai/chrome-extension-tools
7 participants
@thmsmlr @A-Shleifman @gary-lo @shirshendubhowmick @rezasohrabi @Reactiver @Alm0g