feat: Add emotion config

Author: jbee37142

template.json

@@ -1,6 +1,8 @@
 {
   "dependencies": {
     "@craco/craco": "^5.6.2",
+    "@emotion/core": "^10.0.27",
+    "@emotion/styled": "^10.0.27",
     "@reduxjs/toolkit": "^1.1.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
@@ -12,6 +14,7 @@
     "@types/react-redux": "^7.1.5",
     "@types/react-router": "^5.1.3",
     "@types/react-router-dom": "^5.1.3",
+    "babel-plugin-emotion": "^10.0.27",
     "eslint-plugin-simple-import-sort": "^5.0.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",

template/craco.config.js

@@ -1,19 +1,29 @@
-const path = require("path");
-const resolve = arg => path.resolve(__dirname, arg);
+const path = require('path')
+const resolve = arg => path.resolve(__dirname, arg)
 
 module.exports = function() {
   return {
+    babel: {
+      plugins: [
+        [
+          'emotion',
+          {
+            labelFormat: '[filename]--[local]',
+          },
+        ],
+      ],
+    },
     webpack: {
       alias: {
-        "@": resolve("src")
-      }
+        '@': resolve('src'),
+      },
     },
     jest: {
       configure: {
         moduleNameMapper: {
-          "^@/(.*)$": "<rootDir>/src/$1"
-        }
-      }
-    }
-  };
-};
+          '^@/(.*)$': '<rootDir>/src/$1',
+        },
+      },
+    },
+  }
+}