From e1578ee2b5b4dfbab59113a9c58854799f4f7b42 Mon Sep 17 00:00:00 2001
From: Clint Andrew Hall <clint.hall@elastic.co>
Date: Fri, 11 Mar 2022 11:58:24 -0600
Subject: [PATCH] [emotion] Output meaningful classnames in dev mode (#127531)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 packages/kbn-babel-preset/webpack_preset.js      |  2 +-
 packages/kbn-storybook/src/lib/decorators.tsx    |  2 ++
 packages/kbn-storybook/src/lib/default_config.ts | 11 ++++++++++-
 packages/kbn-storybook/src/webpack.config.ts     |  1 +
 packages/kbn-storybook/templates/index.ejs       |  2 +-
 5 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/kbn-babel-preset/webpack_preset.js b/packages/kbn-babel-preset/webpack_preset.js
index 398124b5e9f71..7bf1f518012a4 100644
--- a/packages/kbn-babel-preset/webpack_preset.js
+++ b/packages/kbn-babel-preset/webpack_preset.js
@@ -55,7 +55,7 @@ module.exports = () => {
           [
             require.resolve('@emotion/babel-preset-css-prop'),
             {
-              labelFormat: '[local]',
+              labelFormat: '[filename]--[local]',
             },
           ],
         ],
diff --git a/packages/kbn-storybook/src/lib/decorators.tsx b/packages/kbn-storybook/src/lib/decorators.tsx
index 97ee5393b4ea8..24af828754248 100644
--- a/packages/kbn-storybook/src/lib/decorators.tsx
+++ b/packages/kbn-storybook/src/lib/decorators.tsx
@@ -11,6 +11,8 @@ import { EuiProvider } from '@elastic/eui';
 import createCache from '@emotion/cache';
 import type { DecoratorFn } from '@storybook/react';
 
+import 'core_styles';
+
 /**
  * Storybook decorator using the EUI provider. Uses the value from
  * `globals` provided by the Storybook theme switcher.
diff --git a/packages/kbn-storybook/src/lib/default_config.ts b/packages/kbn-storybook/src/lib/default_config.ts
index 6db6a6bd4643a..3caf879c48cbb 100644
--- a/packages/kbn-storybook/src/lib/default_config.ts
+++ b/packages/kbn-storybook/src/lib/default_config.ts
@@ -26,7 +26,16 @@ export const defaultConfig: StorybookConfig = {
   // @ts-expect-error StorybookConfig type is incomplete
   // https://storybook.js.org/docs/react/configure/babel#custom-configuration
   babel: async (options) => {
-    options.presets.push('@emotion/babel-preset-css-prop');
+    options.presets.push([
+      require.resolve('@emotion/babel-preset-css-prop'),
+      {
+        // There's an issue where emotion classnames may be duplicated,
+        // (e.g. `[hash]-[filename]--[local]_[filename]--[local]`)
+        // https://github.com/emotion-js/emotion/issues/2417
+        autoLabel: 'always',
+        labelFormat: '[filename]--[local]',
+      },
+    ]);
     return options;
   },
   webpackFinal: (config, options) => {
diff --git a/packages/kbn-storybook/src/webpack.config.ts b/packages/kbn-storybook/src/webpack.config.ts
index 8d5818182b876..4da3c58688f75 100644
--- a/packages/kbn-storybook/src/webpack.config.ts
+++ b/packages/kbn-storybook/src/webpack.config.ts
@@ -121,6 +121,7 @@ export default ({ config: storybookConfig }: { config: Configuration }) => {
       mainFields: ['browser', 'main'],
       alias: {
         core_app_image_assets: resolve(REPO_ROOT, 'src/core/public/core_app/images'),
+        core_styles: resolve(REPO_ROOT, 'src/core/public/index.scss'),
       },
       symlinks: false,
     },
diff --git a/packages/kbn-storybook/templates/index.ejs b/packages/kbn-storybook/templates/index.ejs
index 8be0e58bf87de..53dc0f5e55750 100644
--- a/packages/kbn-storybook/templates/index.ejs
+++ b/packages/kbn-storybook/templates/index.ejs
@@ -38,7 +38,7 @@
     </style>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,300..700;0,300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
   </head>
   <body>
     <% if (typeof bodyHtmlSnippet !== 'undefined') { %>