Polyfill removes styles from empty style tags which contains some CSS rules.

[rafkus]

Hello!
I wanted to introduce this polyfill into our project, but... I wouldn't be here if all went well :)

When I added the script I noticed some margins disappeared. Margins were added by mui makeStyles hook. According to this post (mui/material-ui#16756 (comment)) it seems to create empty style tags... which are not empty.

I don't think these style tags are actually empty. When you create a <style> element and add the rules to it via JS API (which many of the CSS-in-JS solutions do, due to performance reasons), then the resulting CSS won't show up as the innerHTML string. You should use document.styleSheets to enumerate all stylesheets and then check .rules.length to see if they are really empty.

You can play with it here: https://codesandbox.io/s/container-queries-polyfill-with-mui-makestyles-issue-feu3s?file=/demo.js
Removing polyfill dependency from external sources restores the padding.

According to the comment above I'm afraid it may affect CSS-in-JS libraries in general, but I didn't verify that.

Screenshot from console: empty style tag with some CSS:

Do you think it is possible to fix it somehow? Do you suggest any workaround?

Thank you for your work, best wishes!

[surma]

Should be fixed in v0.1.2 :)