Are Glamor vs. Emotion's object syntax the same?

[KyleAMathews]

E.g. can I switch from using Glamor's css prop to Emotion's?

[emmatown]

They're very similar, most projects will be able to switch without changing any styles. There are some slight differences, currently emotion doesn't support array fallbacks but I just opened #634 to address that and emotion doesn't stringify values for content like glamor does but I just opened #633 to warn in cases where glamor would stringify.

There are also some small differences in how the css prop works between glamor and emotion. Firstly, emotion's css prop currently works by transforming the css prop to a className prop in a babel plugin so spreading an object with a css key doesn't work. This is likely going to change soon, you can see what it's probably going to look like in https://github.com/emotion-js/next. The other difference is that emotion classNames passed take precedence over the styles passed to the css prop, this is so that you can override a components styles by using the css prop with it. For example, the example below is hotpink in emotion and green in glamor

const SomeComponent = ({ className }) => (
  <div css={{ color: "green" }} className={className} />
);

render(<SomeComponent css={{ color: "hotpink" }} />);

[tkh44]

Closed in #633. If you have any more questions @KyleAMathews lmk.

[KyleAMathews]

Thanks for the detailed response! Looks like it'd pretty easy to switch.