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

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

Closed
gligoran opened this issue Dec 26, 2020 · 36 comments
Closed

Comments

@gligoran
Copy link

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:

image

image

@ben-rogerson
Copy link
Owner

ben-rogerson commented Dec 27, 2020

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

This comment has been minimized.

@ben-rogerson

This comment has been minimized.

@gligoran

This comment has been minimized.

@ben-rogerson ben-rogerson reopened this Jan 4, 2021
@ben-rogerson

This comment has been minimized.

@ben-rogerson
Copy link
Owner

ben-rogerson commented Jan 4, 2021

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.

@ben-rogerson ben-rogerson pinned this issue Jan 4, 2021
@ben-rogerson ben-rogerson changed the title Plugin base loads in the wrong order Global styles get added in the wrong order when using styled-components Jan 4, 2021
@gligoran
Copy link
Author

gligoran commented Jan 6, 2021

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

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

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

@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
Copy link
Owner

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

mcgrathg commented Feb 13, 2021

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.

image

@mcgrathg
Copy link

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

ben-rogerson commented Feb 14, 2021

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

@ethanve
Copy link

ethanve commented Feb 15, 2021

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

@ben-rogerson
Copy link
Owner

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

@ethanve
Copy link

ethanve commented Feb 17, 2021

@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
Copy link
Owner

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

ethanve commented Feb 17, 2021

@ben-rogerson missed a commit. Just pushed!

@anthify
Copy link

anthify commented Mar 12, 2021

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

ben-rogerson commented Mar 23, 2021

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

ethanve commented Mar 24, 2021

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

@stenowtf
Copy link

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

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

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

@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
Copy link
Owner

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

@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
Screenshot 2021-10-13 at 10 27 10
CSS output
Screenshot 2021-10-13 at 10 25 45

@ben-rogerson
Copy link
Owner

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

@LouisJackson
Copy link

Gotcha, thanks!

sdorra added a commit to cloudogu/bugshot that referenced this issue Dec 21, 2021
The switch is required in order to fix a problem with the order of global styles.

ben-rogerson/twin.macro#277
@Shaker-Hamdi
Copy link

Any updates on that issue?

@timstarkk
Copy link

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:
Screen Shot 2022-09-22 at 12 19 38 PM

@ben-rogerson ben-rogerson unpinned this issue Dec 6, 2022
@koniuszy
Copy link

koniuszy commented Dec 6, 2022

@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 ben-rogerson pinned this issue Dec 6, 2022
@ben-rogerson
Copy link
Owner

Fair call 👍

@mtedao
Copy link

mtedao commented May 3, 2023

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

@shepherdjerred
Copy link

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!

ben-rogerson added a commit that referenced this issue Jan 19, 2024
<p>This PR was automatically created by Snyk using the credentials of a
real user.</p><br /><h3>Snyk has created this PR to upgrade
postcss-selector-parser from 6.0.10 to 6.0.13.</h3>

:information_source: Keep your dependencies up-to-date. This makes it
easier to fix existing vulnerabilities and to more quickly identify and
fix newly disclosed vulnerabilities when they affect your project.
<hr/>

- The recommended version is **3 versions** ahead of your current
version.
- The recommended version was released **7 months ago**, on 2023-05-15.


<details>
<summary><b>Release notes</b></summary>
<br/>
  <details>
    <summary>Package name: <b>postcss-selector-parser</b></summary>
    <ul>
      <li>
<b>6.0.13</b> - <a
href="https://snyk.io/redirect/github/postcss/postcss-selector-parser/releases/tag/v6.0.13">2023-05-15</a></br><h1>6.0.13</h1>
<ul>
<li>Fixed: throw on unexpected pipe symbols</li>
</ul>
      </li>
      <li>
<b>6.0.12</b> - <a
href="https://snyk.io/redirect/github/postcss/postcss-selector-parser/releases/tag/v6.0.12">2023-04-29</a></br><h1>6.0.12</h1>
<ul>
<li>Fixed: <code>clone</code> arguments should be optional</li>
</ul>
      </li>
      <li>
<b>6.0.11</b> - <a
href="https://snyk.io/redirect/github/postcss/postcss-selector-parser/releases/tag/v6.0.11">2022-11-20</a></br><h1>6.0.11</h1>
<ul>
<li>Fixed: parse attribute case insensitivity flag</li>
</ul>
      </li>
      <li>
<b>6.0.10</b> - <a
href="https://snyk.io/redirect/github/postcss/postcss-selector-parser/releases/tag/v6.0.10">2022-03-30</a></br><h1>6.0.10</h1>
<ul>
<li>Fixed: <code>isPseudoElement()</code> supports
<code>:first-letter</code> and <code>:first-line</code></li>
</ul>
      </li>
    </ul>
from <a
href="https://snyk.io/redirect/github/postcss/postcss-selector-parser/releases">postcss-selector-parser
GitHub release notes</a>
  </details>
</details>


<details>
  <summary><b>Commit messages</b></summary>
  </br>
  <details>
    <summary>Package name: <b>postcss-selector-parser</b></summary>
    <ul>
<li><a
href="https://snyk.io/redirect/github/postcss/postcss-selector-parser/commit/9b5ade24d4c15029a65dddf6d6bdedbf67789045">9b5ade2</a>
chore(release): 6.0.13</li>
<li><a
href="https://snyk.io/redirect/github/postcss/postcss-selector-parser/commit/317e2753d91f8a978987a1b7a2ccac2c9bc04bbb">317e275</a>
fix: throw on unexpected pipe symbols (#278)</li>
<li><a
href="https://snyk.io/redirect/github/postcss/postcss-selector-parser/commit/2c24f44512d9416329f6e397ad0d3c1be56bcee6">2c24f44</a>
docs: update clone (#277)</li>
<li><a
href="https://snyk.io/redirect/github/postcss/postcss-selector-parser/commit/66b51528c1a74f98c387e767c5564ace2a8d271f">66b5152</a>
chore(release): 6.0.12</li>
<li><a
href="https://snyk.io/redirect/github/postcss/postcss-selector-parser/commit/63b463e075ddeb4e1670de5635f1f2fb23b303e2">63b463e</a>
fix(types): clone (#276)</li>
<li><a
href="https://snyk.io/redirect/github/postcss/postcss-selector-parser/commit/6d3bd5728a787127021ab82e874c2e6bc582a5dd">6d3bd57</a>
chore(deps): bump json5 from 2.2.1 to 2.2.3 (#274)</li>
<li><a
href="https://snyk.io/redirect/github/postcss/postcss-selector-parser/commit/fe807ad92fe0091d81c55866bdb9a1ed2726801b">fe807ad</a>
chore: update dependencies (#268)</li>
<li><a
href="https://snyk.io/redirect/github/postcss/postcss-selector-parser/commit/e6b4029387572dce965345f6de00b5e3bf666bc9">e6b4029</a>
chore(release): 6.0.11</li>
<li><a
href="https://snyk.io/redirect/github/postcss/postcss-selector-parser/commit/fd5f0bfbddf036eb3e788e1dcd90341af292e07f">fd5f0bf</a>
fix: attribute case insensitivity parsing</li>
<li><a
href="https://snyk.io/redirect/github/postcss/postcss-selector-parser/commit/c3db2ff377c33d8ee1a95466edf3120a9d2511e6">c3db2ff</a>
docs: fix &#x60;container.atPosition()&#x60; API (#264)</li>
    </ul>

<a
href="https://snyk.io/redirect/github/postcss/postcss-selector-parser/compare/91a0147812f219b9a64cd2d6a595e0a4b85c161b...9b5ade24d4c15029a65dddf6d6bdedbf67789045">Compare</a>
  </details>
</details>
<hr/>

**Note:** *You are seeing this because you or someone else with access
to this repository has authorized Snyk to open upgrade PRs.*

For more information: <img
src="https://api.segment.io/v1/pixel/track?data=eyJ3cml0ZUtleSI6InJyWmxZcEdHY2RyTHZsb0lYd0dUcVg4WkFRTnNCOUEwIiwiYW5vbnltb3VzSWQiOiI2YWU5M2NlYi0zMmMzLTQ0OTAtOWRlYi0xZDhiYTFjOThmZTYiLCJldmVudCI6IlBSIHZpZXdlZCIsInByb3BlcnRpZXMiOnsicHJJZCI6IjZhZTkzY2ViLTMyYzMtNDQ5MC05ZGViLTFkOGJhMWM5OGZlNiJ9fQ=="
width="0" height="0"/>

🧐 [View latest project
report](https://app.snyk.io/org/ben-rogerson/project/5166ef83-6f86-471f-9f97-28d8b4709d32?utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)

🛠 [Adjust upgrade PR
settings](https://app.snyk.io/org/ben-rogerson/project/5166ef83-6f86-471f-9f97-28d8b4709d32/settings/integration?utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)

🔕 [Ignore this dependency or unsubscribe from future upgrade
PRs](https://app.snyk.io/org/ben-rogerson/project/5166ef83-6f86-471f-9f97-28d8b4709d32/settings/integration?pkg&#x3D;postcss-selector-parser&amp;utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr#auto-dep-upgrades)

<!---
(snyk:metadata:{"prId":"6ae93ceb-32c3-4490-9deb-1d8ba1c98fe6","prPublicId":"6ae93ceb-32c3-4490-9deb-1d8ba1c98fe6","dependencies":[{"name":"postcss-selector-parser","from":"6.0.10","to":"6.0.13"}],"packageManager":"npm","type":"auto","projectUrl":"https://app.snyk.io/org/ben-rogerson/project/5166ef83-6f86-471f-9f97-28d8b4709d32?utm_source=github&utm_medium=referral&page=upgrade-pr","projectPublicId":"5166ef83-6f86-471f-9f97-28d8b4709d32","env":"prod","prType":"upgrade","vulns":[],"issuesToFix":[],"upgrade":[],"upgradeInfo":{"versionsDiff":3,"publishedDate":"2023-05-15T16:35:49.762Z"},"templateVariants":[],"hasFixes":false,"isMajorUpgrade":false,"isBreakingChange":false,"priorityScoreList":[]})
--->

Co-authored-by: snyk-bot <snyk-bot@snyk.io>
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