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?

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

[mcgrathg]

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?

@ben-rogerson I'm seeing this issue with NextJS and Emotion.

The base styles from the preflight normalizer are overriding the input styles from @tailwindcss/forms.

I forked the Next Emotion twin.macro example to add the forms plugin here: https://codesandbox.io/s/relaxed-sound-xb4t6.

The text inputs are using the reset style from preflight, instead of the form plugin's styling that has a little bit of padding.

[mcgrathg]

Using your CSSReset fix from above seems to have fixed this for NextJS & Emotion.

https://codesandbox.io/s/twinmacro-example-with-tailwindforms-global-component-workaround-ke6ud

[ben-rogerson]

Interesting - I've heard a couple of similar stories lately with emotion so I think I'll make this the preferred approach.

[ethanve]

I'm actually experiencing this with a custom GlobalStyles component and @tailwindcss/forms. Doesn't seem to propagate correctly

[ben-rogerson]

@ethanve If you could post a repo up, I could take a look into it further

[ethanve]

@ethanve If you could post a repo up, I could take a look into it further

Here you go -- thank you! I'm sure it's something on my end.

https://github.com/ethanve/twin-macro-cra-styled-form-bug

[ben-rogerson]

@ethanve If you could post a repo up, I could take a look into it further

Here you go -- thank you! I'm sure it's something on my end.

ethanve/twin-macro-cra-styled-form-bug

Hey @ethanve that's just a brand new cra app - would you be able to demonstrate the issue in that repo?

[ethanve]

@ben-rogerson missed a commit. Just pushed!

[anthify]

I'm having the same issue where @tailwind/forms is being overridden by the global styles. The workaround doesn't work for me, and I'm using it with Next.js and styled-components.

[ben-rogerson]

@ethanve @anthify I've taken a look into the issue with styled-components + twin and found that styled-components is not preserving the global styles ordering. There are a few issues on the topic already (Issue / Issue / Issue) and I've added to one of them at the start of 2021 and haven't noticed action on any of them.

The unfortunate reality is that the styled-components project isn't being maintained anymore.
There has been a lack of updates/fixes by the single remaining maintainer.
I'm worried about the future of styled-components and lack of updates/fixes coming through.
There are too many critical issues and nothing is being discussed by maintainers or acted upon.
It's a shame given how many developers are still enjoying the project but I cannot recommend anyone to start a new project with styled-components until we start seeing bugfixes again.

Edit: Styled components is being worked on again. But they are focussing on a complete rewrite in typescript for v6 so that explains the lack of fixes for existing issues.

[ethanve]

@ben-rogerson thank you for the detailed response! What would you recommend using to start a new project then?

[stenowtf]

I was having the same problem on global styles ordering with a new CRA + styled-components and I "solved" it by switching to emotion. Bummer.

[ben-rogerson]

@ben-rogerson thank you for the detailed response! What would you recommend using to start a new project then?

Emotion, goober or stitches. All of these libraries have the ability to maintain the ordering of global styles.

[AaronFeledy]

I was running into this issue and none of the above fixed it for me. Ultimately, I discovered that in my .babelrc, I had the @emotion/babel-plugin-jsx-pragmatic plugin configured with "module": "@emotion/core" which was a remnant from an older version of Emotion. Emotion 11 should be using "module": "@emotion/react". Once I changed the core to react, it started working as expected.

[LouisJackson]

@ben-rogerson I think the fixes doesn't work for when twin.macro is used with StyledComponents and Storybook. Any workaround for this?

[ben-rogerson]

@LouisJackson I've made a storybook-styled-components-typescript example which doesn't seem to have that issue - does that setup work for you?

[LouisJackson]

@ben-rogerson Hello, I've forked this example and added a plugin to the tailwind config file using the addComponent function. And my css is added in wrong order, so the bug is there.
Plugin Log output

CSS output

[ben-rogerson]

You've found a different issue there @LouisJackson - I've split that off to another issue.

[LouisJackson]

Gotcha, thanks!

[Shaker-Hamdi]

Any updates on that issue?

[timstarkk]

Our team had this issue today using @emotion/react and storybook.
The styles were only ordered incorrectly while viewing components in storybook, the issue was not affecting the actual application.

we fixed by moving <GlobalStyles /> to be called after <Story /> like shown below:

[koniuszy]

@ben-rogerson I've migrated to emotion a few days ago and this Issue (including the solution) was crucial, it should stayed pinned in my opinion, unless there is another solution I am not aware of?

[ben-rogerson]

Fair call 👍

[mtedao]

I have same issue when created app with Vite and the fix doesn't works for me

[shepherdjerred]

I'm running into this issue using the Vite react styled-components typescript template. It looked similar to this issue -- the reset was causing my buttons not to have a background color.

Sorry, I don't have an example, but I have a fix for anyone else who is running into this issue.

1. Remove all references to GlobalStyles from twin.macro.
2. Create an index.css which has the following contents:

   @tailwind base;
   

3. Import index.css in your main.tsx file.

This fixed the issue for me. I'm looking forward to a more proper fix in the future!