[Emotion] Order EUI's CSS utilities after Sass styles (#162365)

## Summary Follow up to #161592 Some remaining EUI components that are still in Sass unfortunately need to respect EUI's global CSS utilities (e.g. `.eui-yScroll`, `.eui-textTruncate` - [full list here](https://elastic.github.io/eui/#/utilities/css-utility-classes)). Creating a separate utilities cache and insertion point should solve the CSS order/specificity issues. ### Checklist - [x] Confirm Emotion output order is expected in head (EUI globals, All Emotion styles, Sass styles, then utilities last) --------- Co-authored-by: kibanamachine <[email protected]>
elastic · Jul 25, 2023 · ca9b4d0 · ca9b4d0
1 parent 06fabab
commit ca9b4d0
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 22 deletions.
diff --git a/packages/core/base/core-base-common/index.ts b/packages/core/base/core-base-common/index.ts
@@ -8,4 +8,4 @@
 
 export type { PluginOpaqueId, PluginName, DiscoveredPlugin } from './src/plugins';
 export { PluginType } from './src/plugins';
-export { EUI_STYLES_GLOBAL } from './src/eui';
+export { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from './src/eui';
diff --git a/packages/core/base/core-base-common/src/eui.ts b/packages/core/base/core-base-common/src/eui.ts
@@ -7,3 +7,4 @@
  */
 
 export const EUI_STYLES_GLOBAL = 'eui-global';
+export const EUI_STYLES_UTILS = 'eui-utilities';
diff --git a/packages/core/rendering/core-rendering-server-internal/src/views/template.tsx b/packages/core/rendering/core-rendering-server-internal/src/views/template.tsx
@@ -8,7 +8,7 @@
 
 import React, { FunctionComponent, createElement } from 'react';
 
-import { EUI_STYLES_GLOBAL } from '@kbn/core-base-common';
+import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
 import { RenderingMetadata } from '../types';
 import { Fonts } from './fonts';
 import { Styles } from './styles';
@@ -59,6 +59,8 @@ export const Template: FunctionComponent<Props> = ({
         {/* Inject stylesheets into the <head> before scripts so that KP plugins with bundled styles will override them */}
         <meta name="add-styles-here" />
         <meta name="add-scripts-here" />
+        {/* Inject EUI CSS utilties after all other styles for CSS specificity */}
+        <meta name={EUI_STYLES_UTILS} />
       </head>
       <body>
         {createElement('kbn-csp', {

diff --git a/packages/core/theme/core-theme-browser-internal/src/core_theme_provider.tsx b/packages/core/theme/core-theme-browser-internal/src/core_theme_provider.tsx
@@ -11,7 +11,7 @@ import { Observable } from 'rxjs';
 import useObservable from 'react-use/lib/useObservable';
 import createCache from '@emotion/cache';
 import { EuiProvider } from '@elastic/eui';
-import { EUI_STYLES_GLOBAL } from '@kbn/core-base-common';
+import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
 import type { CoreTheme } from '@kbn/core-theme-browser';
 import { convertCoreTheme } from './convert_core_theme';
 
@@ -25,12 +25,18 @@ interface CoreThemeProviderProps {
 }
 
 const globalCache = createCache({
-  key: 'eui',
+  key: EUI_STYLES_GLOBAL,
   container: document.querySelector(`meta[name="${EUI_STYLES_GLOBAL}"]`) as HTMLElement,
 });
+globalCache.compat = true;
+const utilitiesCache = createCache({
+  key: EUI_STYLES_UTILS,
+  container: document.querySelector(`meta[name="${EUI_STYLES_UTILS}"]`) as HTMLElement,
+});
+utilitiesCache.compat = true;
 const emotionCache = createCache({
   key: 'css',
-  container: document.querySelector(`meta[name="emotion"]`) as HTMLElement,
+  container: document.querySelector('meta[name="emotion"]') as HTMLElement,
 });
 emotionCache.compat = true;
 
@@ -52,7 +58,7 @@ export const CoreThemeProvider: FC<CoreThemeProviderProps> = ({
       utilityClasses={includeGlobalStyles}
       colorMode={euiTheme.colorMode}
       theme={euiTheme.euiThemeSystem}
-      cache={{ default: emotionCache, global: globalCache }}
+      cache={{ default: emotionCache, global: globalCache, utility: utilitiesCache }}
     >
       {children}
     </EuiProvider>

diff --git a/packages/kbn-storybook/src/lib/decorators.tsx b/packages/kbn-storybook/src/lib/decorators.tsx
@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
 import { EuiProvider } from '@elastic/eui';
 import createCache from '@emotion/cache';
 import type { DecoratorFn } from '@storybook/react';
@@ -20,17 +21,26 @@ import 'core_styles';
 const EuiProviderDecorator: DecoratorFn = (storyFn, { globals }) => {
   const colorMode = globals.euiTheme === 'v8.dark' ? 'dark' : 'light';
   const globalCache = createCache({
-    key: 'eui',
-    container: document.querySelector(`meta[name="eui-global"]`) as HTMLElement,
+    key: EUI_STYLES_GLOBAL,
+    container: document.querySelector(`meta[name="${EUI_STYLES_GLOBAL}"]`) as HTMLElement,
   });
+  globalCache.compat = true;
+  const utilitiesCache = createCache({
+    key: EUI_STYLES_UTILS,
+    container: document.querySelector(`meta[name="${EUI_STYLES_UTILS}"]`) as HTMLElement,
+  });
+  utilitiesCache.compat = true;
   const emotionCache = createCache({
     key: 'css',
-    container: document.querySelector(`meta[name="emotion"]`) as HTMLElement,
+    container: document.querySelector('meta[name="emotion"]') as HTMLElement,
   });
   emotionCache.compat = true;
 
   return (
-    <EuiProvider colorMode={colorMode} cache={{ default: emotionCache, global: globalCache }}>
+    <EuiProvider
+      colorMode={colorMode}
+      cache={{ default: emotionCache, global: globalCache, utility: utilitiesCache }}
+    >
       {storyFn()}
     </EuiProvider>
   );

diff --git a/packages/kbn-storybook/tsconfig.json b/packages/kbn-storybook/tsconfig.json
@@ -16,6 +16,7 @@
     "@kbn/ui-shared-deps-src",
     "@kbn/repo-info",
     "@kbn/dev-cli-runner",
+    "@kbn/core-base-common",
   ],
   "exclude": [
     "target/**/*",

diff --git a/src/plugins/interactive_setup/public/theme/kibana_theme_provider.tsx b/src/plugins/interactive_setup/public/theme/kibana_theme_provider.tsx
@@ -14,6 +14,7 @@ import React, { useMemo } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import type { Observable } from 'rxjs';
 
+import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
 import type { CoreTheme } from '@kbn/core/public';
 
 import { getColorMode } from './utils';
@@ -28,12 +29,18 @@ const defaultTheme: CoreTheme = {
 };
 
 const globalCache = createCache({
-  key: 'eui',
-  container: document.querySelector(`meta[name="eui-styles"]`) as HTMLElement,
+  key: EUI_STYLES_GLOBAL,
+  container: document.querySelector(`meta[name="${EUI_STYLES_GLOBAL}"]`) as HTMLElement,
 });
+globalCache.compat = true;
+const utilitiesCache = createCache({
+  key: EUI_STYLES_UTILS,
+  container: document.querySelector(`meta[name="${EUI_STYLES_UTILS}"]`) as HTMLElement,
+});
+utilitiesCache.compat = true;
 const emotionCache = createCache({
   key: 'css',
-  container: document.querySelector(`meta[name="emotion"]`) as HTMLElement,
+  container: document.querySelector('meta[name="emotion"]') as HTMLElement,
 });
 emotionCache.compat = true;
 
@@ -46,7 +53,7 @@ export const KibanaThemeProvider: FC<KibanaThemeProviderProps> = ({ theme$, modi
   return (
     <EuiProvider
       colorMode={colorMode}
-      cache={{ default: emotionCache, global: globalCache }}
+      cache={{ default: emotionCache, global: globalCache, utility: utilitiesCache }}
       globalStyles={false}
       utilityClasses={false}
       modify={modify}

diff --git a/src/plugins/interactive_setup/tsconfig.json b/src/plugins/interactive_setup/tsconfig.json
@@ -19,6 +19,7 @@
     "@kbn/utils",
     "@kbn/core-logging-server-mocks",
     "@kbn/core-preboot-server",
+    "@kbn/core-base-common",
   ],
   "exclude": [
     "target/**/*",

diff --git a/src/plugins/kibana_react/public/theme/kibana_theme_provider.tsx b/src/plugins/kibana_react/public/theme/kibana_theme_provider.tsx
@@ -11,6 +11,7 @@ import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
 import { EuiProvider, EuiProviderProps } from '@elastic/eui';
 import createCache from '@emotion/cache';
+import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
 import type { CoreTheme } from '@kbn/core/public';
 import { getColorMode } from './utils';
 
@@ -24,12 +25,18 @@ const defaultTheme: CoreTheme = {
 };
 
 const globalCache = createCache({
-  key: 'eui',
-  container: document.querySelector(`meta[name="eui-global"]`) as HTMLElement,
+  key: EUI_STYLES_GLOBAL,
+  container: document.querySelector(`meta[name="${EUI_STYLES_GLOBAL}"]`) as HTMLElement,
 });
+globalCache.compat = true;
+const utilitiesCache = createCache({
+  key: EUI_STYLES_UTILS,
+  container: document.querySelector(`meta[name="${EUI_STYLES_UTILS}"]`) as HTMLElement,
+});
+utilitiesCache.compat = true;
 const emotionCache = createCache({
   key: 'css',
-  container: document.querySelector(`meta[name="emotion"]`) as HTMLElement,
+  container: document.querySelector('meta[name="emotion"]') as HTMLElement,
 });
 emotionCache.compat = true;
 
@@ -43,7 +50,7 @@ export const KibanaThemeProvider: FC<KibanaThemeProviderProps> = ({ theme$, modi
   return (
     <EuiProvider
       colorMode={colorMode}
-      cache={{ default: emotionCache, global: globalCache }}
+      cache={{ default: emotionCache, global: globalCache, utility: utilitiesCache }}
       globalStyles={false}
       utilityClasses={false}
       modify={modify}

diff --git a/src/plugins/kibana_react/tsconfig.json b/src/plugins/kibana_react/tsconfig.json
@@ -13,6 +13,7 @@
     "@kbn/i18n",
     "@kbn/i18n-react",
     "@kbn/core-theme-browser",
+    "@kbn/core-base-common",
   ],
   "exclude": [
     "target/**/*",

diff --git a/src/plugins/kibana_utils/public/theme/kibana_theme_provider.tsx b/src/plugins/kibana_utils/public/theme/kibana_theme_provider.tsx
@@ -13,6 +13,7 @@ import React, { useMemo } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import type { Observable } from 'rxjs';
 
+import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
 import type { CoreTheme } from '@kbn/core/public';
 import { getColorMode } from './utils';
 
@@ -26,12 +27,18 @@ const defaultTheme: CoreTheme = {
 };
 
 const globalCache = createCache({
-  key: 'eui',
-  container: document.querySelector(`meta[name="eui-global"]`) as HTMLElement,
+  key: EUI_STYLES_GLOBAL,
+  container: document.querySelector(`meta[name="${EUI_STYLES_GLOBAL}"]`) as HTMLElement,
 });
+globalCache.compat = true;
+const utilitiesCache = createCache({
+  key: EUI_STYLES_UTILS,
+  container: document.querySelector(`meta[name="${EUI_STYLES_UTILS}"]`) as HTMLElement,
+});
+utilitiesCache.compat = true;
 const emotionCache = createCache({
   key: 'css',
-  container: document.querySelector(`meta[name="emotion"]`) as HTMLElement,
+  container: document.querySelector('meta[name="emotion"]') as HTMLElement,
 });
 emotionCache.compat = true;
 
@@ -44,7 +51,7 @@ export const KibanaThemeProvider: FC<KibanaThemeProviderProps> = ({ theme$, modi
   return (
     <EuiProvider
       colorMode={colorMode}
-      cache={{ default: emotionCache, global: globalCache }}
+      cache={{ default: emotionCache, global: globalCache, utility: utilitiesCache }}
       globalStyles={false}
       utilityClasses={false}
       modify={modify}

diff --git a/src/plugins/kibana_utils/tsconfig.json b/src/plugins/kibana_utils/tsconfig.json
@@ -21,6 +21,7 @@
     "@kbn/rison",
     "@kbn/crypto-browser",
     "@kbn/core-notifications-browser-mocks",
+    "@kbn/core-base-common",
   ],
   "exclude": [
     "target/**/*",
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,3 +7,4 @@
		*/

		export const EUI_STYLES_GLOBAL = 'eui-global';
		export const EUI_STYLES_UTILS = 'eui-utilities';