-
Notifications
You must be signed in to change notification settings - Fork 208
Deprecate glamorous π in favor of emotion π©βπ€ #419
Comments
Things are looking very positive for this. If someone would like to help a LOT of people here are a few things you could do:
A good starting point for the codemod could be the one I wrote for upgrading people's version of glamorous due to the theme breaking change we had a few months ago: https://github.com/paypal/glamorous/blob/master/other/codemods/theme-move.js I don't think that I'll have time to do either of these things any time soon, but I'd love it if anyone would like to pitch in to do it :) I'm 99% certain that we'll be doing this. |
I can think of one concern, this move can confuse people (like some already asked) and raise this question that what would happen to glamorous-native again and again. Adding a notice mentioning "This is actively maintained" or something like that in that project's readme would be helpful :) |
nice! I recently migrated our entire codebase from glamorous to emotion. I'll see if I have some cycles to write up some of the things I did to migrate and any gotchas I ran into |
One thing that can (probably) confuse people is TS support. Emotion's TS support is quite immature compared to Glamorous. It does almost nothing with CSS typing, does not have proper plugin type, ... |
@Ailrun, that is a very valid concern and I'm sure it would be frustrating for folks like you and others who have poured a TON of effort into making glamorous as great as it is with regards to TypeScript. Hopefully by switching to emotion we can combine efforts with other folks to take the things we've learned from glamorous to improve the Typings in emotion. |
@kentcdodds Hm... then, I should spend some time on emotion typing to move there safely. Thank you for kind comment. |
Does anyone have a react+emotion demo repo/codepen or something I could test a few things with? My primary use case with Glamorous has been css-object composition+ThemeProvider--nested arrays of objects or functions-returning-objects. I'd like to validate that emotion can work with some of those patterns. Soon enough I'll test it out, but if there's already a codesandbox or something I could test things very quickly. @kentcdodds You're making a very awesome decision to rally around a single solution. Love the direction here. |
@kentcdodds Emotion does not seem to have any notion of prop filtering, and the associated API's Update: Apparently Emotion supports a Update: Emotion has similar capabilities, but as usual, the devil is in the details. It does not appear that this will be a simple migration. Need time to investigate further, but unfortunately don't have it at present. Issues documented in mineral-ui/mineral-ui#692 |
Interesting. Could you file an issue on emotion @brentertz? Let's see if this is something they'd be willing to implement. Either that or we could implement a small layer on top of emotion that could do this. |
Emotion should handle all that jazz just fine. We use it on production and receiving serializable theme objects through the wire + ofc we use some local functions etc to style based on props. |
I'm curious about the implication for this kind of use: <glamorous.Div
backgroundColor={theme.color('white')}
paddingTop={theme.size(0.1)}
paddingLeft={theme.size(0.2)}
paddingRight={theme.size(0.2)}
display="flex"
jusitfyContent="center"
alignItems="center"
>
This gets nicely styled using props
</glamorous.Div> |
In |
From #421
Is that true? In that case moving from glamorous to emotion is a no go for me and users of create-react-app who like to still use the object notation. |
@bjoernricks that's not true, emotion handles object syntax without babel's help |
@bjoernricks the babel plugin is only needed if you want a similar API to glamorous. Without babel plugin: import styled from 'react-emotion'
const Foo = styled('div')({
position: 'relative'
}) With babel plugin: import styled from 'react-emotion'
const Foo = styled.div({
position: 'relative'
}) So whilst the plugin isn't required, it certainly makes the migration easier. Update: FYI, I also use Someone has built a plugin for emotion too π |
Also there is a plan to support |
fyi: v2 of |
Two things that emotion doesn't do are exactly the things that I used glamorous for:
<Div width={100} height={100}>
<H1 backgroundColor="green">Hello</H1>
</Div>
So, not really feeling 'emotion is better than glamorous'. |
@dragosbulugean I started migrating and found <div
css={{
width: 100,
height: 100,
}}
>
<h1
css={{
backgroundColor: 'green',
}}
>
Hello
</h1>
</div> to be a suitable alternative. I even like it a bit more. |
@VinSpee thanks, but where do you get the div and h1 from? not sure you are allowed to name them exactly like the included dom react components. |
@dragosbulugean it uses a babel transform: |
In addition, the |
Upgraded a pretty huge side project of mine (approx a year worth of dev on it) within an hour. Pretty decent! Huge thanks to @TejasQ for the codemod. βοΈ Side note: emotion is really fast! Noticed a distinct improvement in perf already. Great decision to move towards it. π |
@ctrlplusb awesome to hear it! Glad I could help! I hope your project flourishes! |
I just migrated quite a big project using a lot of glamorous features to emotion. I'm almost done, and it took me about a day of work. Notable things the codemod does not support (yet):
|
Wow! Thanks so much @danielberndt! Would you be interested to implement these features in the codemod together? |
@TejasQ this would be quite a nice opportunity for me to dig into AST-transformations which I've never done before. :) |
@danielberndt No worries whatsoever. The easiest thing would probably be working with generic default import specifiers (number 2 on your list). Shall I reserve that for you? I could even just submit PRs that you review and could use for learning. What would you prefer? |
Ah, how nice! Yes, if you have the time, feel free to go ahead and implement it yourself. I'd be very happy to learn from your changes π |
I don't really have the time, but I'll make the time for you. <3 |
@danielberndt does the standard |
@antoniobrandao both If you want to prevent glamorous from appling the const StyledLink = glamourous(Link, {forwardProps: ["innerRef"]})({...styles}) This feature is not supported by emotion and instead you need to do something like: const MyLink = ({underlyingInnerRef, ...rest}) => <Link innerRef={underlyingInnerRef} {...rest}/>
const StyledLink = emotion(MyLink)({...styles})
// use it like this
<StyledLink underlyingInnerRef={handlerReceivingTheATag}/>
// or to be more specific about the differences:
<StyledLink
underlyingInnerRef={handlerReceivingTheATag}
innerRef={handlerReceivingTheLinkComponent}
ref={handlerReceivingTheStyledLinkComponent}
/> |
@danielberndt thanks man |
How does this work in Emotion with object styles? Can't find it in the docs. Glamorous way to make a element that is blue by default, be red when it has a certain class:
|
const SomeDiv = styled.div({
color: 'blue',
['&.someClass']: {
color: 'red',
}
}) |
Thanks @VinSpee π |
Thanks @VinSpee. FWIW you do not need the CMD+F "linkClass" here https://codesandbox.io/s/xrpjw8jnnq |
Does anyone have guidelines for migrating from glamorous to styled-components? Having a lot of trouble getting it to work properly. |
@syberen is there a reason you've chosen to migrate from glamorous to styled-components instead of to emotion? π€ |
@TejasQ We're researching both options, but styled-components does seem to have a larger community and I've gotten some reports of buggy behavior from emotion from fellow developers, although I don't know the details. |
Not sure where did that come from, but we barely receive any bug reports for emotion and even if there are bugs reported they are fixed pretty quickly. |
Hello people! I'm most excited about all the transforms around the import g from "glamorous";
<g.Div marginTop={5}/>
// transformed to β
<div css={{marginTop: 5}}/>
<g.Div marginTop={5} css={{marginTop: 10}} marginBottom="5" onClick={handler}/>
// transformed to β
<div onClick={handler} css={{
marginTop: 10,
marginTop: 5,
marginBottom: "5"
}} />
<g.Img width={100}/>
// transformed to β
<img width={100} />
<g.Span width={100}/>
// transformed to β
<span css={{width: 100}} />
<g.Span css={redStyles} marginLeft={5}/>
// transformed to β
<span css={{ ...redStyles, marginLeft: 5}} /> There's also an Thanks a lot to @TejasQ for the helpful code reviews! The code is in quite a readable state, should you be curious about babel-transforms :) |
That's fantastic @danielberndt! Thank you and @TejasQ for all your work on that π π π π π π |
I just published glamorous@5 and deprecated it so people installing latest will now get a deprecation message. (This means that existing projects using 4.x will not see a deprecation message, only people installing glamorous for the first time). I will also be archiving this repository in the next few days. https://glamorous.rocks will remain untouched for the foreseeable future (though the repo https://github.com/kentcdodds/glamorous-website will be archived as well). I would like to give a special thank you to everyone who helped make this project what it was and inspired other projects to be built and enhanced pushing the css-in-js coding style forward. It was an awesome run. Thanks everyone who helped make the transition as smooth as possible. I love you all <3 |
Love you too Kent π |
For a long time now I've been considering deprecating glamorous (NOT glamorous-native) in favor of emotion.
Here's my reasoning:
I would not recommend people spend a bunch of time migrating to emotion. glamorous isn't bad, it's just not as good as emotion and I don't think it would be worth the effort to manually migrate. That said, I'm fairly confident that a codemod could be written to automatically migrate your glamorous code to emotion.
What a deprecation would mean:
What a deprecation would NOT mean:
What I want from you:
Please give this a π if you agree or a π if you disagree.
If you disagree, please list reasons why and whether you would be willing to assume the maintainer role.
Thanks friends!
The text was updated successfully, but these errors were encountered: