Missing styles in build vs start

[loliver]

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.

[markdalgleish]

Any chance I could get a minimal reproduction of this issue somewhere?

[loliver]

I'll find somewhere to put the dist out on the internet for the time being, will let you know when/where it is once I figure that out.

E: Or did you want the src as well?

[markdalgleish]

Source is more important, so I can have a poke around at the build.

[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.

[markdalgleish]

Thanks for letting me see your usage—the reproduction is a bit heavy, though, so I don't really have the time to dig in. Are you able to create a new project and reproduce the issue there? It'll probably help you narrow down exactly what's wrong, too.

[loliver]

Yeah no probs, I'll have a look in to it tomorrow and see what I can pull out.

[loliver]

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

Hopefully this is what you were looking for, it's only got our Text component which depends on global styles, styled-components injectGlobal doesn't appear to be applied which may be the issue here but not sure how to fix that with the StyleSheetManager component.

[markdalgleish]

Is this an issue with styled-components?

[loliver]

I think it could be, tried out manually running injectGlobal in frame-component as per https://stackoverflow.com/questions/45489383/how-to-inject-global-styles-while-rendering-server-side-with-styled-components?rq=1 but that didn't seem to do the trick, will keep digging.

[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.