From 9597e672a1a23679be14d6a97b135db1334a9781 Mon Sep 17 00:00:00 2001
From: Andrey Goncharov <aigoncharov@meta.com>
Date: Tue, 4 Oct 2022 05:07:36 -0700
Subject: [PATCH] Provide @emotion/css to plugins

Summary: Changelog: Provide `emotion/css` to plugins

Reviewed By: antonk52

Differential Revision: D40057817

fbshipit-source-id: 1e931eb8527d62dd4312556a6d493fdf3e17b45a
---
 desktop/flipper-common/src/plugin-external-modules.tsx |  1 +
 desktop/flipper-frontend-core/src/globalObject.tsx     |  2 ++
 .../src/globalsReplacements/fakeEmotionCss.tsx         | 10 ++++++++++
 desktop/flipper-server-companion/src/init.tsx          |  2 ++
 desktop/flipper-ui-core/src/dispatcher/plugins.tsx     |  2 ++
 desktop/pkg-lib/src/runBuild.tsx                       |  1 +
 6 files changed, 18 insertions(+)
 create mode 100644 desktop/flipper-server-companion/src/globalsReplacements/fakeEmotionCss.tsx

diff --git a/desktop/flipper-common/src/plugin-external-modules.tsx b/desktop/flipper-common/src/plugin-external-modules.tsx
index 15468468c..59ba41383 100644
--- a/desktop/flipper-common/src/plugin-external-modules.tsx
+++ b/desktop/flipper-common/src/plugin-external-modules.tsx
@@ -18,6 +18,7 @@ export const pluginExternalModules = {
   antd: 'antd',
   immer: 'Immer',
   '@emotion/styled': 'emotion_styled',
+  '@emotion/css': 'emotion_css',
   '@ant-design/icons': 'antdesign_icons',
   // Used by "bloks-logger" (see its bundle's content)
   'react/jsx-runtime': 'ReactJsxRuntime',
diff --git a/desktop/flipper-frontend-core/src/globalObject.tsx b/desktop/flipper-frontend-core/src/globalObject.tsx
index 52d0eca7d..4e67f8fb9 100644
--- a/desktop/flipper-frontend-core/src/globalObject.tsx
+++ b/desktop/flipper-frontend-core/src/globalObject.tsx
@@ -18,6 +18,7 @@ export interface GlobalObject {
   Immer: any;
   antd: any;
   emotion_styled: any;
+  emotion_css: any;
   antdesign_icons: any;
   ReactJsxRuntime: any;
 }
@@ -32,6 +33,7 @@ declare module globalThis {
   let Immer: any;
   let antd: any;
   let emotion_styled: any;
+  let emotion_css: any;
   let antdesign_icons: any;
   let ReactJsxRuntime: any;
 }
diff --git a/desktop/flipper-server-companion/src/globalsReplacements/fakeEmotionCss.tsx b/desktop/flipper-server-companion/src/globalsReplacements/fakeEmotionCss.tsx
new file mode 100644
index 000000000..7fe4ab506
--- /dev/null
+++ b/desktop/flipper-server-companion/src/globalsReplacements/fakeEmotionCss.tsx
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+export const css = () => () => ({});
diff --git a/desktop/flipper-server-companion/src/init.tsx b/desktop/flipper-server-companion/src/init.tsx
index 10954758d..de8e3d156 100644
--- a/desktop/flipper-server-companion/src/init.tsx
+++ b/desktop/flipper-server-companion/src/init.tsx
@@ -17,6 +17,7 @@ import {initializeRenderHost} from './initializeRenderHost';
 import * as React from './globalsReplacements/fakeReact';
 import * as ReactDOM from './globalsReplacements/fakeReactDOM';
 import {styled} from './globalsReplacements/fakeEmotionStyled';
+import * as emotionCss from './globalsReplacements/fakeEmotionCss';
 import * as legacyExports from './globalsReplacements/fakeLegacyExports';
 import Module from 'module';
 
@@ -38,6 +39,7 @@ export const initCompanionEnv = async (
     Immer,
     antd: {},
     emotion_styled: {default: styled},
+    emotion_css: emotionCss,
     antdesign_icons: {},
     ReactJsxRuntime: {},
   });
diff --git a/desktop/flipper-ui-core/src/dispatcher/plugins.tsx b/desktop/flipper-ui-core/src/dispatcher/plugins.tsx
index f968bf350..852594ad5 100644
--- a/desktop/flipper-ui-core/src/dispatcher/plugins.tsx
+++ b/desktop/flipper-ui-core/src/dispatcher/plugins.tsx
@@ -35,6 +35,7 @@ import {_SandyPluginDefinition} from 'flipper-plugin';
 import * as Immer from 'immer';
 import * as antd from 'antd';
 import * as emotion_styled from '@emotion/styled';
+import * as emotion_css from '@emotion/css';
 import * as antdesign_icons from '@ant-design/icons';
 import isPluginCompatible from '../utils/isPluginCompatible';
 import {createSandyPluginWrapper} from '../utils/createSandyPluginWrapper';
@@ -113,6 +114,7 @@ export default async (store: Store, _logger: Logger) => {
     Immer,
     antd,
     emotion_styled,
+    emotion_css,
     antdesign_icons,
     ReactJsxRuntime,
   });
diff --git a/desktop/pkg-lib/src/runBuild.tsx b/desktop/pkg-lib/src/runBuild.tsx
index 291f89b53..f6efab600 100644
--- a/desktop/pkg-lib/src/runBuild.tsx
+++ b/desktop/pkg-lib/src/runBuild.tsx
@@ -62,6 +62,7 @@ async function runBuild({
       'antd',
       'immer',
       '@emotion/styled',
+      '@emotion/css',
       '@ant-design/icons',
       // It is an optional dependency for rollup that we use in react-devtools
       'fsevents',