Allow plugins to use css

Summary:
Flipper plugins fail when importing css from third-party dependencies. This diff tries to fix that.

Effectively, the plugin can import the css and export it when is bundled.

When we load the plugin, we check if there's a css file for it. If there's one, we return it and try to use it.

Reviewed By: aigoncharov

Differential Revision: D40758178

fbshipit-source-id: e53afffcc481504905d5eeb1aea1f9114ee2a86b

desktop/flipper-ui-browser/src/initializeRenderHost.tsx

@@ -80,14 +80,15 @@ export function initializeRenderHost(
       return flipperServerConfig.gatekeepers[gatekeeper] ?? false;
     },
     flipperServer,
-    async requirePlugin(path) {
-      let source = await flipperServer.exec('plugin-source', path);
+    async requirePlugin(path): Promise<{plugin: any; css?: string}> {
+      const source = await flipperServer.exec('plugin-source', path);
 
+      let js = source.js;
       // append source url (to make sure a file entry shows up in the debugger)
-      source += `\n//# sourceURL=file://${path}`;
+      js += `\n//# sourceURL=file://${path}`;
       if (isProduction()) {
         // and source map url (to get source code if available)
-        source += `\n//# sourceMappingURL=file://${path}.map`;
+        js += `\n//# sourceMappingURL=file://${path}.map`;
       }
 
       // Plugins are compiled as typical CJS modules, referring to the global
@@ -95,10 +96,10 @@ export function initializeRenderHost(
       // Note that we use 'eval', and not 'new Function', because the latter will cause the source maps
       // to be off by two lines (as the function declaration uses two lines in the generated source)
       // eslint-disable-next-line no-eval
-      const cjsLoader = eval('(module) => {' + source + '\n}');
+      const cjsLoader = eval('(module) => {' + js + '\n}');
       const theModule = {exports: {}};
       cjsLoader(theModule);
-      return theModule.exports;
+      return {plugin: theModule.exports, css: source.css};
     },
     getStaticResourceUrl(path): string {
       // the 'static' folder is mounted as static middleware in Express at the root