feat(compass-web): create browser-compatible compass package COMPASS-…

…7413 (#5249)

* feat(compass-web): create browser-compatible compass package

* chore(workspace): allow opening multiple tabs; handle namespaces in initial tabs

* chore(compass-web): add fonts and url handling in the sandbox

* chore(sidebar): adjust sidebar to work well in web environment

* chore(web): add rest of the plugins

* chore(webpack): move emotion server polyfill to the shared config

* chore(compass-web): depcheck fixes and very basic test setup

* chore: fix depalign

* chore(web): skip tests on rhel

configs/webpack-config-compass/polyfills/@emotion/server/create-instance/index.js

@@ -0,0 +1,3 @@
+export default function createEmotionServer() {
+  return {};
+}

configs/webpack-config-compass/src/index.ts

@@ -88,6 +88,21 @@ const sharedResolveOptions = (
       // KeyObject instances from the Node.js crypto API (https://tinyurl.com/2rrtu2hy).
       // Manually resolve `jose` to use the Node.js export here.
       jose: require.resolve('jose'),
+
+      // Leafygreen tries to include all the server-side emotion stuff in the
+      // client bundle, this requires packaging a ton of otherwise unneccessary
+      // polyfills.To work around this, we're providing a minimally required
+      // polyfill for code not to break. This is mostly a problem for our web
+      // packages, but also not a bad thing at all for the electron app itself.
+      '@emotion/server/create-instance': path.resolve(
+        __dirname,
+        '..',
+        'polyfills',
+        '@emotion',
+        'server',
+        'create-instance',
+        'index.js'
+      ),
     },
   };
 };
@@ -321,6 +336,23 @@ export function createWebConfig(args: Partial<ConfigArgs>): WebpackConfig {
       ...sharedResolveOptions(opts.target),
     },
     ignoreWarnings: sharedIgnoreWarnings,
+    plugins:
+      isServe(opts) && opts.hot
+        ? [
+            // Plugin types are not matching Webpack 5, but they work
+            new ReactRefreshWebpackPlugin() as unknown as WebpackPluginInstance,
+          ]
+        : opts.analyze
+        ? [
+            // Plugin types are not matching Webpack 5, but they work
+            new BundleAnalyzerPlugin({
+              logLevel: 'silent',
+              analyzerPort: 'auto',
+            }) as unknown as WebpackPluginInstance,
+
+            new DuplicatePackageCheckerPlugin(),
+          ]
+        : [],
   };
 }