CSS Modules not reloading about browser-extension-react-typescript-starter HOT 3 CLOSED

@caleb654
Ok, After reading https://tailwindcss.com/blog/tailwindcss-v3-2 release, you can use Tailwind CSS for content with Shadow DOM. This release adds official support for multiple configs in the same project so it won't add unnecessary CSS to the page. I will add better content example after @crxjs/vite-plugin v2.x stable release.

from browser-extension-react-typescript-starter.

Hi @caleb654, thank you for reaching out. This starter uses vite and @crxjs/vite-plugin under the hood for development. I can confirm that sometimes it fails to detect changes and process some files. I hope that it will be fixed in vite 3 and @crxjs/vite-plugin new release. You can track it here @crxjs/vite-plugin. As a silly workaround you can add ?inline like import styles from './Counter.module.css?inline', save then delete ?inline. Finally, do fully refresh the page and it will continue to work normally.

I wouldn't recommend using Tailwind CSS for injecting content into the page because of possible class, variable conflicts also it will inject other pages (popup, options etc... but unused in content) classes. You can try https://github.com/robbevp/postcss-multiple-tailwind but I didn't try it.

You can use @apply in the CSS module. You may be even needed Shadow DOM for encapsulation. https://alirezavalizade.medium.com/use-shadow-dom-for-encapsulation-css-in-google-extensions-19f0aef542c7

from browser-extension-react-typescript-starter.

@caleb654 Ok, After reading https://tailwindcss.com/blog/tailwindcss-v3-2 release, you can use Tailwind CSS for content with Shadow DOM. This release adds official support for multiple configs in the same project so it won't add unnecessary CSS to the page. I will add better content example after @crxjs/vite-plugin v2.x stable release.

Any chance you could put together this with @crxjs/vite-plugin@beta in a branch and perhaps merge when it is stable release? Tailwind CSS in content script would be a huge add.

from browser-extension-react-typescript-starter.