Not working with react, tailwindcss production setup

[dreamboyx1]

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 :).

[dreamboyx1]

Tried the older versions this morning and seems to be working as expected with 1.0.1 and 1.0.0. Well, that is not working either.

[typhonrt]

@dreamboyx1.... I'm new to using this polyfill, but I spent ~12+ hours debugging my deployment issue to a complex environment that I don't totally control; lots of large style files and such. It sounds like things are working intermittingly for you just as they were for me. It turns out the old school hack of using an image to attempt to detect when the transpiled styles / data blob has loaded failed ~half the time or more. When stylesSheet.refresh() gets invoked the style sheet is still null and the selector data for CQ replacement fails to register.

In my production environment there are many style files on the page that don't need to be transpiled / updated; also potentially size of style file could cause things to fail with the image load hack. Changing to using the load event listener works despite the comment in the code that says onload / load events don't fire twice. At least I know it works on the latest Firefox; I'm looking into setting up the WPT / test / GH actions on a separate repo now for broader browser testing.

I removed this:
https://github.com/GoogleChromeLabs/container-query-polyfill/blob/main/src/engine.ts#L615-L617

and handled loading the transpiled data blob similar to this:

const loadCallback = () => {
  styleSheet.refresh();
  node.removeEventListener('load', loadCallback);
}

node.addEventListener('load', loadCallback);
node.href = URL.createObjectURL(blob);

In my fork I fix the loading hack and don't replace style files that don't have container queries. This was quite the challenge to debug due to the intermittent nature of the problem in my production environment. Hopefully that helps or at least gives something to try.

[mocanew]

Another issue I encountered on Firefox is that after the style files are processed, and link hrefs are replaced with blobs, images (e.g. background-image) will not work anymore. I did not research this issue further, but it seems the problem is that Firefox does not interpret URLs correctly in such cases. In addition to the image issue, after the polyfill loads and processes all styles, there's a moment when Firefox seems to unload the old styles but not synchronously load the new ones, leading to a white "flash", which is quite jarring.

While my issue is not relevant to the current one discussed, my solution was similar to @typhonrt's: processing only the styles containing container queries. In my case, I ended up separating container queries in separate files from regular CSS. Maybe this (extracting only the container queries into a new <style> instead of modifying original sources) would be a good idea to implement in the polyfill if it doesn't break anything else.

[SandroMueller]

@dreamboyx1.... I'm new to using this polyfill, but I spent ~12+ hours debugging my deployment issue to a complex environment that I don't totally control; lots of large style files and such. It sounds like things are working intermittingly for you just as they were for me. It turns out the old school hack of using an image to attempt to detect when the transpiled styles / data blob has loaded failed ~half the time or more. When stylesSheet.refresh() gets invoked the style sheet is still null and the selector data for CQ replacement fails to register.

In my production environment there are many style files on the page that don't need to be transpiled / updated; also potentially size of style file could cause things to fail with the image load hack. Changing to using the load event listener works despite the comment in the code that says onload / load events don't fire twice. At least I know it works on the latest Firefox; I'm looking into setting up the WPT / test / GH actions on a separate repo now for broader browser testing.

I removed this: https://github.com/GoogleChromeLabs/container-query-polyfill/blob/main/src/engine.ts#L615-L617

and handled loading the transpiled data blob similar to this:

const loadCallback = () => {
  styleSheet.refresh();
  node.removeEventListener('load', loadCallback);
}

node.addEventListener('load', loadCallback);
node.href = URL.createObjectURL(blob);

In my fork I fix the loading hack and don't replace style files that don't have container queries. This was quite the challenge to debug due to the intermittent nature of the problem in my production environment. Hopefully that helps or at least gives something to try.

The fix worked for me. Thanks a lot, @typhonrt!