The styled-components are works well both in development and in production mode.
Classnames are generated, styles are applied, so no issues on user's side:
However, when I click on the <style> highlighted above, it brings me to the empty
<style data-styled="active" data-styled-version="5.3.0"></style> element.
I tried to set up Break on -> subtree modifications, I tried to set up an observer (I guess the break-on functionality uses it), no luck, the style element always empty and not modified (*on production), but, somehow, applied to the page. (I use lazy-loading, so styles not applied right away).
At the same time, in development mode the element is not empty and observer correctly catches any modifications to the style element with textNode addition/removal.
I read the docs, I searched for any possibility in configuring production differently, but haven't found anything so far.
I saw this one: react styled components not working in production, but styled does work in production.
I also saw this one: https://github.com/styled-components/styled-components/issues/2911, but I do not use global styles (with styled).
I removed pretty every isDevelopment condition from webpack config, so they are quite the same in terms of file-loaders.
And just answering the possible "Why do you need it be filled, if applied to the page anyway"-questions - I need it. I am using some shadow-dom implementations that are style-isolated, so I am observing the styled-style element for modifications to copy needed ones to the shadow-dom. And it works perfectly in development, but not in production.
Any thoughts? Currently looking to replace styled-components with styled-jsx, but it does not work very well.