How to setup create-react-app with twin.macro and emotion

Sascha Metz — Mon, 29 Mar 2021 15:25:14 +0000

You know tailwind is a great tool, but you also may know that, in react world, it even gets better. We are talking about twin.macro here. It combines all the benefits of tailwind with all the benefits of the css-in-js approach.

twin.macro already provides really good documentation for setting it up with pretty much every technology out there, but I stumbled upon some minor issues with create-react-app/emotion which can be fixed with some pretty easy steps I am going to share with you.

Follow the steps from the tutorial

You can pretty much follow all the steps from this tutorial, until this point where it tells you to extend JSX with a jsx-pragma in front of every twin.macro import. The documentation underneath says the following:

You can automate the injection of the jsx pragma but you’ll need to use a package like rewire create react app to allow changes to the project .babelrc. Check the twin emotion + react docs for the babel config to use.

This is where the documentation leaves room for your own solution, so this will be what this blog post is about.

Setting up CRACO

create-react-app doesn't allow you to edit its babel settings by default. To add our settings we have to hook in our babel-configuration somewhere. There were times where you had to eject from create-react-app for this, but luckily nowadays there are plenty of solutions.

One of these solutions is CRACO which stands for "Create React App Configuration Override". Sounds exactly what we need here, so let's get into it.

Install craco with npm install @craco/craco or yarn add @craco/craco
Add a craco.config.js to your project root with the following content as a substitute for a .babelrc file:

module.exports = {
  babel: {
    plugins: [
      "babel-plugin-macros",
      [
        "@emotion/babel-plugin-jsx-pragmatic",
        {
          export: "jsx",
          import: "__cssprop",
          module: "@emotion/react",
        },
      ],
      [
        "@babel/plugin-transform-react-jsx",
        {
          pragma: "__cssprop",
          pragmaFrag: "React.Fragment",
        },
      ],
    ],
  },
}

Change the scripts inside your package.json to the following:

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }
}

That's all if you followed the macro tutorial right, you should be able to start developing with npm start. Have fun!

Resources

How to translate the Gatsby SEO Component to TypeScript

Sascha Metz — Sun, 28 Mar 2021 20:58:36 +0000

Ever since I consider myself a TypeScript fanboy, when starting a new Gatsby Project with gatsby-starter-default, or similar, I've always had the problem of how to type the SEO Component from Gatsby.

At the beginning of my TypeScript journey, I did the "easy" thing - Setting allowJS: truein my tsconfig and leaving the SEO Component as is... But we all know, this is not a satisfying way of solving problems, so I took the time and want to share my results with you.

TL;DR

import React from "react"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"

export function SEO({
  description = "",
  lang = "en",
  meta = [],
  title,
}: SEOProps) {
  const { site } = useStaticQuery<QueryTypes>(SEOStaticQuery)

  const metaDescription = description || site.siteMetadata.description
  const defaultTitle = site.siteMetadata?.title

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : undefined}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata?.author || ``,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
      ].concat(meta)}
    />
  )
}

// Types
type SEOProps = {
  description?: string
  lang?: string
  meta?: Meta
  title: string
}

type Meta = ConcatArray<PropertyMetaObj | NameMetaObj>

type PropertyMetaObj = {
  property: string
  content: string
}

type NameMetaObj = {
  name: string
  content: string
}

type QueryTypes = {
  site: {
    siteMetadata: {
      title: string
      description: string
      author: string
    }
  }
}

// Queries
const SEOStaticQuery = graphql`
  query {
    site {
      siteMetadata {
        title
        description
        author
      }
    }
  }
`

The Props

Let's start with the JS-Version of the component, where the gatsby developers left us a pretty good description of how the props should look like by providing propTypes and defaultProps.

SEO.defaultProps = {
  lang: `en`,
  meta: [],
  description: ``,
}

SEO.propTypes = {
  description: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.arrayOf(PropTypes.object),
  title: PropTypes.string.isRequired,
}

Our TypesScript type would look like this:

type SEOProps = {
  title: string
  description?: string
  lang?: string
  meta?: Meta
}

Since title is the only propType using the TYPE.isRequired property we add a ? to all other keys in our type-object to make them optional.

The Meta Prop

We see the meta-prop is passed through to the Helmet component by using the Array.concat() method to add our values from the meta prop to some defaults. You would assume that the meta prop is just typed as Array, but TypeScript is throwing an error here when passing meta to Helmet. Luckily TypeScript exactly tells you what is expected here:

We can use the ConcatArray Generic here.

We see that the objects inside the meta array are expected in two possible versions:

Version 1

{
  name: "***NAME***"
  content: "***CONTENT***"
}

Version 2

{
  property: "***PROPETY***"
  content: "***CONTENT***"
}

We can describe these objects via types:

type NameMetaObj = {
  name: string
  content: string
}

type PropertyMetaObj = {
  property: string
  content: string
}

Now we can describe our meta property as a ConcatArray Generic with the Union Type of NameMetaObj and PropertyMetaObj as its argument.🧐 In TypeScript, this reads like this:

type Meta = ConcatArray<NameMetaObj | PropertyMetaObj>

Default Props

Using defaultProps in React/TypeScript is as easy as setting them inside the props destructuring in the component definition:

export function SEO({
  description = "",
  lang = "de",
  meta = [],
  title,
}: SEOProps) {
  // Component
}

React Helmet Types

At this point, you may be finished, but in case you haven't installed @types/react-helmet yet, your editor may yell something about not using Helmet as a JSX.Component at you. Just install react-helmet types package and you're good to go.

yarn add @types/react-helmet -D

npm install @types/react-helmet --save-dev

Note: If your editor still yells at you, make sure your TypeScript configuration (tsconfig.json e.g.) includes all @types packages.

The Query

We can even get fancier and type the static query because useStaticQuery provides the ability to describe the expected results

type QueryTypes = {
  site: {
    siteMetadata: {
      title: string
      description: string
      author: string
    }
  }
}

Provide it to the useStaticQuery call and enjoy the features TypeScript holds for you.

// Inside the Component
const { site } = useStaticQuery<QueryTypes>(SEOStaticQuery)

Wrap Up

That's it for now, feel free to reach out if I missed anything. Please note that this is my first blog post ever... So be kind ;)

DEV Community: Sascha Metz