search

sinanbekar / browser-extension-react-typescript-starter

🚀 React & TypeScript Starter for developing web extensions with hot reload!
MIT License
121 stars 20 forks source link

CSS Modules not reloading #50

Closed caleb654 closed 1 year ago

caleb654 commented 1 year ago

I might be missing something, but I was running with yarn dev and everything works with hot reloading except the CSS modules in the content folder. When I change the CSS nothing changes, even when I hard reload the page and extension. Any ideas on this?

Also is it possible to use Tailwind when injecting content into the page?

sinanbekar commented 1 year ago

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

sinanbekar commented 1 year ago

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

leerobert commented 1 year ago

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