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

chore: upgrade styled components v6 xstyled v4 #2524

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

mleralec
Copy link
Contributor

@mleralec mleralec commented Aug 27, 2024

Upgrade guide

  • Upgrade styled-components to v6
  • Upgrade @xstyled/styled-components to v4
  • Remove @types/styled-components (types are now included in styled-components@6.*.*)
  • Use styled.whateverBox instead of styled.div with ${system} pattern (The definition of the return type of the styled function has change)
const StyledTest = styled.div`
  ${system}
`
const Test = () => <Test backgroundColor="tomato" />

This snippet will throw an error because the prop backgroundColor doesn't exit on StyledTest

To fix the error, you need to use the following pattern:

const StyledTest = styled.box``
// or
const StyledTest = styled.div<WuiProps>`
  ${system}
` 

Those two snippets are equivalent, please use the first one (more concise)

  • Update the rule toHaveStyleRule on test by adding spaces on rgb/rgba keywords:
- expect(yourElement).toHaveStyleRule('color', 'rgba(0,0,0,1)')
+ expect(yourElement).toHaveStyleRule('color', 'rgba(0, 0, 0, 1)')

Other breaking changes:

  • Removed deprecated stuff on @welcome-ui/system
  • Some changes on theme cf 1736741

Copy link

👀 Visit Preview

@github-actions github-actions bot added the wip label Aug 27, 2024
@mleralec mleralec force-pushed the chore-upgrade-styled-components-v6-xstyled-v4 branch 4 times, most recently from 564bf01 to d087006 Compare August 27, 2024 14:31
@mleralec mleralec force-pushed the chore-upgrade-styled-components-v6-xstyled-v4 branch 2 times, most recently from b33f082 to 98edc6c Compare August 29, 2024 07:06
@mleralec mleralec force-pushed the chore-upgrade-styled-components-v6-xstyled-v4 branch from 98edc6c to d03a13f Compare August 29, 2024 08:25
@@ -63,7 +63,7 @@ const Home = () => {
return (
<Box as="main" p="xl">
<Box margin="0 auto" maxWidth={600}>
<Text color="secondary-red" textAlign="center" variant="subtitle-md">
Copy link
Contributor Author

@mleralec mleralec Aug 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @theo-mesnil what is the secondary-red color? 🤔

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

An invention (it's the next colors but it's not ok here :D)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mleralec it's fixed here #2539

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

Successfully merging this pull request may close these issues.

3 participants