GoogleChromeLabs / GoogleChromeLabs/container-query-polyfill
Not working with react, tailwindcss production setup
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.1k
- Forks
- 48
- PR merge metrics
- No merged PRs in 30d
Description
I've been spending way to many hours trying to get this plugin to work with our react, tailwind app. I was really excited about using it, but alas it is not going well. I've managed to put together a minimal reproducible Create React App (CRA) package here.
https://github.com/dreamboyx1/container-query-polyfill-example
- Mac Firefox 106.0.5 (64-bit)
- MacOS 12.6.1
Steps are:
`npm install`
`npm run prod`
This should start a static server using serve. You should then point your browser to: http://localhost:3000/
It will work ok running in development mode. That is, it will work as expected. It just does not work with a production build. So, I think some tailwind optimization or tree shaking is stomping on things. Not quite clear, yet. However, since this setup is super common, it would be great if this worked or at least there were some workaround to get it all working together.
I may dig in more, but I've more than exhausted my time box for now. Hopefully some other folks will be interested as well. Or maybe someone will tell me I'm an idiot and doing it wrong, which is ok and would not be the first time :).
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked minimal Create React App reproduction and run npm install followed by npm run prod, then open http://localhost:3000/ in Firefox. Compare the production behavior with development mode and investigate the interaction with Tailwind optimization or tree shaking. Done means the polyfill works in the production setup or a documented workaround is identified.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, tailwindcss
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100