Global styles get added in the wrong order when using styled-components

[gligoran]

Hi,

I'm trying to upgrade a project to Tailwind v2 that also uses TailwindUI.

I'm using react with styled-components.

I'm running into problems with @tailwindcss/forms that renders my input fields differently depending wether I declare them in the same file as my App component or in a separate file. It seems like the order in the generated style element is not the same.

I've built an example here: https://github.com/gligoran/twin-react-styled-components-bug (couldn't make it work on codesandbox: https://codesandbox.io/s/twin-react-styled-components-bug-bg82n).

The main part of the problem is this difference in order as you can see from these 2 screenshots:

[ben-rogerson]

Thanks for the bug demo on this.

Recently in our Discord server, Anark described a similar issue within a custom webpack setup.
The style order is described as being correct on the initial load but switches the ordering shortly after that.

In case anyone else ever runs into this, I fixed it by moving GlobalStyles into its own stateless CSSReset component and importing CSSReset and adding it to app.jsx instead of GlobalStyles

// CSSReset.js
import { GlobalStyles } from 'twin.macro'

export default function CSSReset() {
  return <GlobalStyles />
}

Could you perhaps try a similar solution here and report back?

[gligoran]

Hey @ben-rogerson.

Yes, that solves it for me as well. Is this considered a permanent or a temporary solution?

Oh, thanks for the great plugin/macro 👍

[ben-rogerson]

I recommend adding GlobalStyles in the index.js file:

// index.js
import React from 'react'
import { render } from 'react-dom'

import { GlobalStyles } from 'twin.macro'
import App from './App'

render(
  <>
    <GlobalStyles />
    <App />
  </>,
  document.getElementById('root'),
)

This also fixes the issue mentioned above but also avoids a new file having to be added.

[gligoran]

That was one of the first things I've tried when I came across this issue.

But with this solution even App.js in my example is an external component relative to where GlobalStyles are used, so even the Works section of the screenshot I've mentioned is not broken.

I've made a PR in my example repo where you can see the change and hooked it up to Vercel so you can see it live: https://twin-react-styled-components-bug-j2rvmq7nv.vercel.app/

[ben-rogerson]

Yeah damn, you're right! I was a little too hasty to close this.

I'm beginning to think it's an issue with styled-components rather than twin.
I tested with the raw global import and the problem still remains:

import { createGlobalStyle } from 'styled-components'
const GlobalStyles = createGlobalStyle`...`

render(
  <>
    <GlobalStyles />
    <App />
  </>,
  document.getElementById('root'),
)

I'll do some more digging 👍

[ben-rogerson]

There is an existing issue with styled-components with the ordering of global styles.
This issue only became visible in twin now because of the recent move to supply all base styles via the GlobalStyles import (rather than an external base.min.css file / unsupported addBase in plugins).

The workaround is to export <GlobalStyles /> from an external component:

// GlobalStyles.js
import React from 'react'
import { GlobalStyles } from 'twin.macro'

export default function GlobalStylesComponent() {
  return <GlobalStyles />
}

// index.js
import React from 'react'
import { render } from 'react-dom'
import App from './App'

import GlobalStyles from './GlobalStyles'

render(
  <>
    <GlobalStyles />
    <App />
  </>,
  document.getElementById('root'),
)

As I'm unsure how long this will take to be resolved, I'll update the examples to show the new way to add GlobalStyles.

[gligoran]

@ben-rogerson thanks for you explanation. I'll follow that issue in the styled-components/styled-components for more update. Hopefully it gets fixed soon.

[aclement-ikarusdev]

I am wondering if it's actually an issue with styled-components. I am having the exact same issue but with emotion/styled.

[ben-rogerson]

I am wondering if it's actually an issue with styled-components. I am having the exact same issue but with emotion/styled.

I haven't noticed this myself, would you be able to show me a minimum bug reproduction either on CodeSandbox or a repo?

[aclement-ikarusdev]

@ben-rogerson So apparently it wasn't emotion itself but the issue is with storybook, I made a fork of your example repo at: https://github.com/aclement-ikarusdev/twin.examples/tree/master/storybook-emotion

[ben-rogerson]

@ben-rogerson So apparently it wasn't emotion itself but the issue is with storybook, I made a fork of your example repo at: https://github.com/aclement-ikarusdev/twin.examples/tree/master/storybook-emotion

Thanks for pushing that example through - I've fixed the issue by adding a cache that specifies it's prepended to the head.