Missing styles in build vs start

Hi there,

I’m having all sorts of issues that I can’t seem to pin down with my built assets not retaining a portion of their styles, using styled-components.

Eg:

vs

My webpack config as is follows:

  webpackConfig: () => ({
    module: {
      rules: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          query: {
            plugins: ['lodash'],
            presets: [
              '@babel/preset-react',
              [
                '@babel/preset-env',
                {
                  targets: ['last 2 versions', 'ie >= 11']
                }
              ]
            ]
          },
          exclude: [
            /node_modules\/(?!(@anz)\/).*/
          ]
        },
        {
          test: /\.(otf|ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
          loader: 'file-loader'
        },
        {
          test: /\.(jpe?g|png|gif|svg|ico)$/,
          loader: 'file-loader?name=assets/[name].[ext]',
          exclude: '/node_modules/'
        }
      ]
    },
    resolve: {
      extensions: ['.js', '.jsx', '.json']
    }
  })

and frame component is:

import React from 'react'
import { StyleSheetManager } from 'styled-components'

export default ({ children, frameWindow }) => (
  <StyleSheetManager target={frameWindow.document.head}>
    {children}
  </StyleSheetManager>
)

Everything works perfectly using start but the built assets seem to lose some of their font-family, padding, and margin, while color and border seem to stay attached somehow. No webpack errors in the terminal while building, and the generated style tags in each frame’s head are empty in build, but full of expected classes etc in start.

[loliver]

Upgrading to styled-components 4.x.x and using createGlobalStyles instead of injectGlobal works, guessing this will fall in to the black hole of every other issue people have had with injectGlobal which caused them to deprecate it.

If you’re interested in looking any further in to this go ahead but I’m happy to close it and move on and just wait until we are at a point that we can upgrade styled-components.

[loliver]

https://github.com/patrickmarabeas/nothing-to-see-here/tree/stuff

Pat has kindly donated a private repo so it’s less likely I’ll get fired out of a cannon in to the sun for doing this, haha.