styled-components out of order in dev vs release build

Just as I was starting to make good progress in my tickets for an upcoming release I am slapped in the face with the most annoying issue where the CSS when I debug in dev is ordered differently that on a release build which causes the layout to be different/broken in release builds. When various CSS files are ordered differently in DEV vs RELEASE it causes unexpected results that cannot be seen unless a release build is done.

I opened this ticket on styled-components even though I have a feeling that it's due to webpack but hopefully some people will be able to comment out and shed light on the subject.

https://github.com/styled-components/styled-components/issues/3532

In the meantime I am moving away completely from styled-components as they are slowing down development now that the project is larger. Styled-components don't scale well when you try to reuse styles and extend them. They become impossible to debug - even with the babel config displayName which cause more hints in the HTML to match the code source. In reality you still end up searching and it's not sufficient as folders are missed in the hints so you don't get the full path of the code location.

References

https://github.com/webpack/webpack/issues/215

https://github.com/webpack-contrib/mini-css-extract-plugin/issues/188