refactor: migrate styled-components to emotion

[tien]

Emotion is a much newer CSS in JS Framework that is a superset of Styled Components, it does everything that Styled Component does, in addition:

• Support in-line object styled CSS, giving much better TypeScript support & doesn't force you to name every single components of which you want to style:

<div css={{ background: "red", padding: "2rem" }} />

• More performance & smaller size, here is one test for reference.
• Support React 18 Concurrent React.
• Is preferred as the successor to Styled Component by the community, for example Storybook team migrated to emotion from Styled Component. Also used by many other projects such as Chakra UI, WordPress UI, etc.

[netlify]

✅ Deploy Preview for talisman-web ready!

Name	Link
🔨 Latest commit	04f7e89
🔍 Latest deploy log	https://app.netlify.com/sites/talisman-web/deploys/633a298e5afb2300093669e6
😎 Deploy Preview	https://deploy-preview-309--talisman-web.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[jonathanpdunne]

Tailwind would be awesome in the long term, but this change LGTM for now!

[tien]

Tailwind would be awesome in the long term, but this change LGTM for now!

Hey @jonathanpdunne I have had a quick chat with @alecdwm on this, actually.

It's down to personal preferences, of course. But I'm strongly leaning against using Tailwind for the following reasons:

I do prefer in-line styling to global styles as it promote composition of components rather than composition of styles.

But I dislike the CSS utility classes approach, where it's simply just hiding the underlying CSS & doesn't allow you to fully take advantage of what CSS has to offer.

Whereas there's no downside to just use CSS directly using Emotion like so: https://emotion.sh/docs/object-styles.

In my opinion, the following (with full TypeScript support):

<div css={{
  display: 'flex',
  flexDirection: 'column',
  backgroundColor: 'red',
  ':hover': {
    background: 'blue',
    flexDirection: 'row',
    padding: '1rem',
  },
  ':first-child': {
    borderRadius: "1rem",
    ':hover': {
      background: 'yellow',
    }
  },
}} />

Which get compiled to (result in much better debug experience)

<div class="css-1e2w6ik" />

Is much better and more readable than:

<div className="flex flex-col bg-red hover:bg-blue hover:row hover:p-1 first:rounded-2xl first:hover:bg-yellow"/>

You get the full power of CSS, much better knowledge over how CSS work.

An example where having full CSS capability is much better:

// Undoing the font size
<SomeComponentWithStyling css={{ fontSize: 'initial' }} />
// Tailwind would require knowing the exact default fontSize
<SomeComponentWithStyling className="text-xl" />