Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing styles in build vs start #29

Closed
loliver opened this issue Nov 29, 2018 · 10 comments
Closed

Missing styles in build vs start #29

loliver opened this issue Nov 29, 2018 · 10 comments

Comments

@loliver
Copy link
Contributor

loliver commented Nov 29, 2018

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:
screen shot 2018-11-29 at 4 34 21 pm

vs

screen shot 2018-11-29 at 4 35 45 pm

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
Copy link
Member

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

@loliver
Copy link
Contributor Author

loliver commented Nov 29, 2018

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
Copy link
Member

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

@loliver
Copy link
Contributor Author

loliver commented Nov 29, 2018

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
Copy link
Member

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
Copy link
Contributor Author

loliver commented Dec 4, 2018

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

@loliver
Copy link
Contributor Author

loliver commented Dec 5, 2018

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
Copy link
Member

Is this an issue with styled-components?

@loliver
Copy link
Contributor Author

loliver commented Dec 5, 2018

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
Copy link
Contributor Author

loliver commented Dec 5, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants