[emotion] Output meaningful classnames in dev mode (#127531)

Co-authored-by: Kibana Machine <[email protected]>
elastic · Mar 11, 2022 · e1578ee · e1578ee
1 parent fb11d2d
commit e1578ee
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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') { %>
-Original file line number
+Diff line change
@@ Expand Up / @@ -55,7 +55,7 @@ module.exports = () => { @@
               [
                 require.resolve('@emotion/babel-preset-css-prop'),
                 {
-                  labelFormat: '[local]',
+                  labelFormat: '[filename]--[local]',
                 },
               ],
             ],
@@ Expand Down @@