From 828385e246f21933b3561c26b145a59f4b2bb308 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Thu, 28 May 2020 10:12:10 -0700
Subject: [PATCH] Enable babel transformer for emotion

Summary: This diff enables the babel transformer for emotion. It is supposed to be a bit faster, but the most interesting thing is that it will show component names inside the dom tree, which, at least for me, will be a huge performance booster is it will make it much easier to find out to which component style changes need to be applied

Reviewed By: nikoant

Differential Revision: D21722021

fbshipit-source-id: cab1278046b1aa7f8b875c016d43dfafdbaa0a2d
---
 .../ExportDataPluginSheet.node.tsx.snap       | 96 +++++++++----------
 .../ShareSheetPendingDialog.node.tsx.snap     | 32 +++----
 .../__tests__/DataInspector.node.tsx          |  2 +-
 desktop/babel-transformer/package.json        |  1 +
 desktop/babel-transformer/src/transform.ts    |  3 +
 desktop/yarn.lock                             |  2 +-
 6 files changed, 70 insertions(+), 66 deletions(-)

diff --git a/desktop/app/src/chrome/__tests__/__snapshots__/ExportDataPluginSheet.node.tsx.snap b/desktop/app/src/chrome/__tests__/__snapshots__/ExportDataPluginSheet.node.tsx.snap
index 5e00f6ab4..eb7b9dfe9 100644
--- a/desktop/app/src/chrome/__tests__/__snapshots__/ExportDataPluginSheet.node.tsx.snap
+++ b/desktop/app/src/chrome/__tests__/__snapshots__/ExportDataPluginSheet.node.tsx.snap
@@ -2,27 +2,27 @@
 
 exports[`SettingsSheet snapshot with nothing enabled 1`] = `
 <div
-  className="css-1alsdwv"
+  className="css-1xa1n93-View-FlexBox-FlexColumn"
 >
   <div
-    className="css-14m1iua"
+    className="css-n1ycch-View-FlexBox-FlexColumn"
   >
     <div
-      className="css-1k4677w"
+      className="css-6ueghe-View-FlexBox-FlexColumn ecr18to0"
     >
       <span
-        className="css-15682x"
+        className="css-1qd3nqz-Text"
       >
         Select the plugins for which you want to export the data
       </span>
       <div
-        className="css-9dmkpi"
+        className="css-1tewvx4-View-FlexBox-FlexColumn"
       >
         <div
-          className="css-1k4677w"
+          className="css-6ueghe-View-FlexBox-FlexColumn ecr18to0"
         >
           <div
-            className="css-1obf64m"
+            className="css-yzqaun-TooltipContainer e1abcqbd0"
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
           >
@@ -30,7 +30,7 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
               className="css-1jrm6r3"
             >
               <div
-                className="css-a1glw"
+                className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
                 style={
                   Object {
                     "alignItems": "center",
@@ -38,16 +38,16 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
                 }
               >
                 <span
-                  className="css-1cegttb"
+                  className="css-1186rtw-Text e19o3fcp0"
                 >
                   TestDevicePlugin
                 </span>
                 <div
-                  className="css-12zzrdt"
+                  className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
                 />
                 <input
                   checked={false}
-                  className="css-1y77uts"
+                  className="css-yvyra-CheckboxContainer e28aqfo0"
                   disabled={false}
                   onChange={[Function]}
                   type="checkbox"
@@ -55,15 +55,15 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
               </div>
             </div>
             <div
-              className="css-1nj3es"
+              className="css-1p0wwd3-View"
             />
           </div>
         </div>
         <div
-          className="css-1k4677w"
+          className="css-6ueghe-View-FlexBox-FlexColumn ecr18to0"
         >
           <div
-            className="css-1obf64m"
+            className="css-yzqaun-TooltipContainer e1abcqbd0"
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
           >
@@ -71,7 +71,7 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
               className="css-1jrm6r3"
             >
               <div
-                className="css-a1glw"
+                className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
                 style={
                   Object {
                     "alignItems": "center",
@@ -79,16 +79,16 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
                 }
               >
                 <span
-                  className="css-1cegttb"
+                  className="css-1186rtw-Text e19o3fcp0"
                 >
                   TestPlugin
                 </span>
                 <div
-                  className="css-12zzrdt"
+                  className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
                 />
                 <input
                   checked={false}
-                  className="css-1y77uts"
+                  className="css-yvyra-CheckboxContainer e28aqfo0"
                   disabled={false}
                   onChange={[Function]}
                   type="checkbox"
@@ -96,7 +96,7 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
               </div>
             </div>
             <div
-              className="css-1nj3es"
+              className="css-1p0wwd3-View"
             />
           </div>
         </div>
@@ -106,16 +106,16 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
       className="css-1yqvjo0"
     >
       <div
-        className="css-a1glw"
+        className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
       >
         <div
-          className="css-12zzrdt"
+          className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
         />
         <div
           className="css-12n892b"
         >
           <div
-            className="css-1ee9nwd"
+            className="css-dltu4w-StyledButton enfqd40"
             onClick={[Function]}
             onMouseDown={[Function]}
             onMouseUp={[Function]}
@@ -124,12 +124,12 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
           </div>
         </div>
         <div
-          className="css-1obf64m"
+          className="css-yzqaun-TooltipContainer e1abcqbd0"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
           <div
-            className="css-6lxjsf"
+            className="css-3z5lpm-StyledButton enfqd40"
             disabled={true}
             onClick={[Function]}
             onMouseDown={[Function]}
@@ -147,27 +147,27 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
 
 exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
 <div
-  className="css-1alsdwv"
+  className="css-1xa1n93-View-FlexBox-FlexColumn"
 >
   <div
-    className="css-14m1iua"
+    className="css-n1ycch-View-FlexBox-FlexColumn"
   >
     <div
-      className="css-1k4677w"
+      className="css-6ueghe-View-FlexBox-FlexColumn ecr18to0"
     >
       <span
-        className="css-15682x"
+        className="css-1qd3nqz-Text"
       >
         Select the plugins for which you want to export the data
       </span>
       <div
-        className="css-9dmkpi"
+        className="css-1tewvx4-View-FlexBox-FlexColumn"
       >
         <div
-          className="css-1k4677w"
+          className="css-6ueghe-View-FlexBox-FlexColumn ecr18to0"
         >
           <div
-            className="css-1obf64m"
+            className="css-yzqaun-TooltipContainer e1abcqbd0"
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
           >
@@ -175,7 +175,7 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
               className="css-1jrm6r3"
             >
               <div
-                className="css-a1glw"
+                className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
                 style={
                   Object {
                     "alignItems": "center",
@@ -183,16 +183,16 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
                 }
               >
                 <span
-                  className="css-1cegttb"
+                  className="css-1186rtw-Text e19o3fcp0"
                 >
                   TestDevicePlugin
                 </span>
                 <div
-                  className="css-12zzrdt"
+                  className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
                 />
                 <input
                   checked={false}
-                  className="css-1y77uts"
+                  className="css-yvyra-CheckboxContainer e28aqfo0"
                   disabled={false}
                   onChange={[Function]}
                   type="checkbox"
@@ -200,15 +200,15 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
               </div>
             </div>
             <div
-              className="css-1nj3es"
+              className="css-1p0wwd3-View"
             />
           </div>
         </div>
         <div
-          className="css-1k4677w"
+          className="css-6ueghe-View-FlexBox-FlexColumn ecr18to0"
         >
           <div
-            className="css-1obf64m"
+            className="css-yzqaun-TooltipContainer e1abcqbd0"
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
           >
@@ -216,7 +216,7 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
               className="css-1jrm6r3"
             >
               <div
-                className="css-a1glw"
+                className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
                 style={
                   Object {
                     "alignItems": "center",
@@ -224,16 +224,16 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
                 }
               >
                 <span
-                  className="css-1cegttb"
+                  className="css-1186rtw-Text e19o3fcp0"
                 >
                   TestPlugin
                 </span>
                 <div
-                  className="css-12zzrdt"
+                  className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
                 />
                 <input
                   checked={true}
-                  className="css-1y77uts"
+                  className="css-yvyra-CheckboxContainer e28aqfo0"
                   disabled={false}
                   onChange={[Function]}
                   type="checkbox"
@@ -241,7 +241,7 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
               </div>
             </div>
             <div
-              className="css-1nj3es"
+              className="css-1p0wwd3-View"
             />
           </div>
         </div>
@@ -251,16 +251,16 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
       className="css-1yqvjo0"
     >
       <div
-        className="css-a1glw"
+        className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
       >
         <div
-          className="css-12zzrdt"
+          className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
         />
         <div
           className="css-12n892b"
         >
           <div
-            className="css-1ee9nwd"
+            className="css-dltu4w-StyledButton enfqd40"
             onClick={[Function]}
             onMouseDown={[Function]}
             onMouseUp={[Function]}
@@ -269,12 +269,12 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
           </div>
         </div>
         <div
-          className="css-1obf64m"
+          className="css-yzqaun-TooltipContainer e1abcqbd0"
           onMouseEnter={[Function]}
           onMouseLeave={[Function]}
         >
           <div
-            className="css-1ee9nwd"
+            className="css-dltu4w-StyledButton enfqd40"
             disabled={false}
             onClick={[Function]}
             onMouseDown={[Function]}
diff --git a/desktop/app/src/chrome/__tests__/__snapshots__/ShareSheetPendingDialog.node.tsx.snap b/desktop/app/src/chrome/__tests__/__snapshots__/ShareSheetPendingDialog.node.tsx.snap
index 488a6aa79..e556a8581 100644
--- a/desktop/app/src/chrome/__tests__/__snapshots__/ShareSheetPendingDialog.node.tsx.snap
+++ b/desktop/app/src/chrome/__tests__/__snapshots__/ShareSheetPendingDialog.node.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
 <div
-  className="css-ha9vz3"
+  className="css-4jq4zm-View-FlexBox-FlexColumn"
   style={
     Object {
       "width": undefined,
@@ -10,27 +10,27 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
   }
 >
   <div
-    className="css-mgujkx"
+    className="css-augv40-View-FlexBox-FlexColumn"
   >
     <div
-      className="css-1hed33k"
+      className="css-hs91vy-LoadingIndicator eq9prj20"
       size={30}
     />
     <span
-      className="css-1r5zvq8"
+      className="css-1bcpoxy-Text"
       color="#6f6f6f"
     >
       Update
     </span>
   </div>
   <div
-    className="css-a1glw"
+    className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
   >
     <div
-      className="css-12zzrdt"
+      className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
     />
     <div
-      className="css-1ee9nwd"
+      className="css-dltu4w-StyledButton enfqd40"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
@@ -38,7 +38,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
       Cancel
     </div>
     <div
-      className="css-1ee9nwd"
+      className="css-dltu4w-StyledButton enfqd40"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
@@ -52,7 +52,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
 
 exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
 <div
-  className="css-ha9vz3"
+  className="css-4jq4zm-View-FlexBox-FlexColumn"
   style={
     Object {
       "width": undefined,
@@ -60,27 +60,27 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
   }
 >
   <div
-    className="css-mgujkx"
+    className="css-augv40-View-FlexBox-FlexColumn"
   >
     <div
-      className="css-1hed33k"
+      className="css-hs91vy-LoadingIndicator eq9prj20"
       size={30}
     />
     <span
-      className="css-1r5zvq8"
+      className="css-1bcpoxy-Text"
       color="#6f6f6f"
     >
       wubba lubba dub dub
     </span>
   </div>
   <div
-    className="css-a1glw"
+    className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
   >
     <div
-      className="css-12zzrdt"
+      className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
     />
     <div
-      className="css-1ee9nwd"
+      className="css-dltu4w-StyledButton enfqd40"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
@@ -88,7 +88,7 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
       Cancel
     </div>
     <div
-      className="css-1ee9nwd"
+      className="css-dltu4w-StyledButton enfqd40"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
diff --git a/desktop/app/src/ui/components/data-inspector/__tests__/DataInspector.node.tsx b/desktop/app/src/ui/components/data-inspector/__tests__/DataInspector.node.tsx
index 26f2048c5..426926fb2 100644
--- a/desktop/app/src/ui/components/data-inspector/__tests__/DataInspector.node.tsx
+++ b/desktop/app/src/ui/components/data-inspector/__tests__/DataInspector.node.tsx
@@ -130,7 +130,7 @@ test('can filter for data', async () => {
     <span>
       "j
       <span
-        class="css-1tdfls1"
+        class="css-i709sw-Highlighted ep1h60f0"
       >
         son
       </span>
diff --git a/desktop/babel-transformer/package.json b/desktop/babel-transformer/package.json
index 924e0c58c..8311c678f 100644
--- a/desktop/babel-transformer/package.json
+++ b/desktop/babel-transformer/package.json
@@ -25,6 +25,7 @@
     "@babel/types": "^7.9.0",
     "@types/fs-extra": "^8.1.0",
     "@types/node": "^13.7.5",
+    "babel-plugin-emotion": "^10.0.33",
     "fs-extra": "^8.1.0",
     "tslib": "^1"
   },
diff --git a/desktop/babel-transformer/src/transform.ts b/desktop/babel-transformer/src/transform.ts
index 96be54109..a6a048d81 100644
--- a/desktop/babel-transformer/src/transform.ts
+++ b/desktop/babel-transformer/src/transform.ts
@@ -41,12 +41,14 @@ const objectRestSpreadPlugin = require('@babel/plugin-proposal-object-rest-sprea
 const flowStripTypesPlugin = require('@babel/plugin-transform-flow-strip-types');
 const dynamicRequiresPlugin = require('./dynamic-requires');
 const typeScriptPlugin = require('@babel/plugin-transform-typescript');
+const emotionPlugin = require('babel-plugin-emotion');
 const tsTransformPlugins = [
   typeScriptPlugin,
   classPropertiesPlugin,
   commonJsPlugin,
   optionalChainingPlugin,
   coalescingOperatorPlugin,
+  [emotionPlugin, {autoLabel: true}],
 ];
 const jsTransformPlugins = [
   commonJsPlugin,
@@ -56,6 +58,7 @@ const jsTransformPlugins = [
   optionalChainingPlugin,
   coalescingOperatorPlugin,
   dynamicRequiresPlugin,
+  [emotionPlugin, {autoLabel: true}],
 ];
 
 export default function transform({
diff --git a/desktop/yarn.lock b/desktop/yarn.lock
index 2c2484cfe..4a9612110 100644
--- a/desktop/yarn.lock
+++ b/desktop/yarn.lock
@@ -3184,7 +3184,7 @@ babel-plugin-dynamic-import-node@^2.3.0:
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-emotion@^10.0.27:
+babel-plugin-emotion@^10.0.27, babel-plugin-emotion@^10.0.33:
   version "10.0.33"
   resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz#ce1155dcd1783bbb9286051efee53f4e2be63e03"
   integrity sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==