Switch from styled-components to emotion

The switch is required in order to fix a problem with the order of global styles.

ben-rogerson/twin.macro#277

.babelrc

@@ -1,7 +1,8 @@
 {
   "presets": [
     ["@babel/preset-react", { "runtime": "automatic" }],
+    "@emotion/babel-preset-css-prop",
     "@babel/preset-typescript"
   ],
-  "plugins": ["babel-plugin-twin", "babel-plugin-macros", "styled-components"]
+  "plugins": ["babel-plugin-twin", "babel-plugin-macros"]
 }

package.json

@@ -9,21 +9,22 @@
     "develop": "NODE_ENV=development webpack --watch"
   },
   "dependencies": {
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.19.1",
-    "react-img-editor": "^0.2.1",
-    "styled-components": "^5.3.3"
+    "react-img-editor": "^0.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
+    "@emotion/babel-preset-css-prop": "^11.2.0",
     "@tailwindcss/forms": "^0.3.4",
     "@types/chrome": "^0.0.163",
     "@types/react": "^17.0.34",
     "@types/react-dom": "^17.0.11",
-    "@types/styled-components": "^5.1.15",
     "babel-loader": "^8.2.3",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-twin": "^1.0.2",
@@ -38,7 +39,7 @@
   },
   "babelMacros": {
     "twin": {
-      "preset": "styled-components"
+      "preset": "emotion"
     }
   }
 }

src/editor/GlobalStyles.tsx

@@ -1,18 +1,18 @@
 import React from "react";
-import { createGlobalStyle } from "styled-components";
+import { Global } from "@emotion/react";
 import tw, { theme, GlobalStyles as BaseStyles } from "twin.macro";
 
-const CustomStyles = createGlobalStyle({
+const customStyles = {
   body: {
     ...tw`antialiased`,
     WebkitTapHighlightColor: theme`colors.purple.500`,
   },
-});
+};
 
 const GlobalStyles = () => (
   <>
     <BaseStyles />
-    <CustomStyles />
+    <Global styles={customStyles} />
   </>
 );
 

src/twin.d.ts

@@ -1,19 +1,9 @@
-import "twin.macro";
-import styledImport, { CSSProp, css as cssImport } from "styled-components";
+import 'twin.macro'
+import styledImport from '@emotion/styled'
+import { css as cssImport } from '@emotion/react'
 
-declare module "twin.macro" {
+declare module 'twin.macro' {
   // The styled and css imports
-  const styled: typeof styledImport;
-  const css: typeof cssImport;
-}
-
-declare module "react" {
-  // The css prop
-  interface HTMLAttributes<T> extends DOMAttributes<T> {
-    css?: CSSProp;
-  }
-  // The inline svg css prop
-  interface SVGProps<T> extends SVGProps<SVGSVGElement> {
-    css?: CSSProp;
-  }
+  const styled: typeof styledImport
+  const css: typeof cssImport
 }

tsconfig.json

@@ -1,13 +1,21 @@
 {
-    "compilerOptions": {
-      "outDir": "./dist/",
-     "sourceMap": true,
-      "noImplicitAny": true,
-      "module": "commonjs",
-      "target": "es5",
-      "jsx": "react",
-      "allowJs": true,
-      "moduleResolution": "node",
-      "esModuleInterop": true
-    }
-  }
+  "compilerOptions": {
+    "module": "ESNext",
+    "target": "ESNext",
+    "moduleResolution": "node",
+    "jsx": "preserve",
+    "baseUrl": "./src",
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsxImportSource": "@emotion/react" // Add the css prop
+  },
+  "include": ["src"]
+}