Skip to content

Commit ca9b4d0

Browse files
cee-chenkibanamachine
cee-chen
and
kibanamachine
authored
[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 <42973632+kibanamachine@users.noreply.github.com>
1 parent 06fabab commit ca9b4d0

12 files changed

Lines changed: 66 additions & 22 deletions

File tree

‎packages/core/base/core-base-common/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,4 @@
88

99
export type { PluginOpaqueId, PluginName, DiscoveredPlugin } from './src/plugins';
1010
export { PluginType } from './src/plugins';
11-
export { EUI_STYLES_GLOBAL } from './src/eui';
11+
export { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from './src/eui';

‎packages/core/base/core-base-common/src/eui.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@
77
*/
88

99
export const EUI_STYLES_GLOBAL = 'eui-global';
10+
export const EUI_STYLES_UTILS = 'eui-utilities';

‎packages/core/rendering/core-rendering-server-internal/src/views/template.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
import React, { FunctionComponent, createElement } from 'react';
1010

11-
import { EUI_STYLES_GLOBAL } from '@kbn/core-base-common';
11+
import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
1212
import { RenderingMetadata } from '../types';
1313
import { Fonts } from './fonts';
1414
import { Styles } from './styles';
@@ -59,6 +59,8 @@ export const Template: FunctionComponent<Props> = ({
5959
{/* Inject stylesheets into the <head> before scripts so that KP plugins with bundled styles will override them */}
6060
<meta name="add-styles-here" />
6161
<meta name="add-scripts-here" />
62+
{/* Inject EUI CSS utilties after all other styles for CSS specificity */}
63+
<meta name={EUI_STYLES_UTILS} />
6264
</head>
6365
<body>
6466
{createElement('kbn-csp', {

‎packages/core/theme/core-theme-browser-internal/src/core_theme_provider.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { Observable } from 'rxjs';
1111
import useObservable from 'react-use/lib/useObservable';
1212
import createCache from '@emotion/cache';
1313
import { EuiProvider } from '@elastic/eui';
14-
import { EUI_STYLES_GLOBAL } from '@kbn/core-base-common';
14+
import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
1515
import type { CoreTheme } from '@kbn/core-theme-browser';
1616
import { convertCoreTheme } from './convert_core_theme';
1717

@@ -25,12 +25,18 @@ interface CoreThemeProviderProps {
2525
}
2626

2727
const globalCache = createCache({
28-
key: 'eui',
28+
key: EUI_STYLES_GLOBAL,
2929
container: document.querySelector(`meta[name="${EUI_STYLES_GLOBAL}"]`) as HTMLElement,
3030
});
31+
globalCache.compat = true;
32+
const utilitiesCache = createCache({
33+
key: EUI_STYLES_UTILS,
34+
container: document.querySelector(`meta[name="${EUI_STYLES_UTILS}"]`) as HTMLElement,
35+
});
36+
utilitiesCache.compat = true;
3137
const emotionCache = createCache({
3238
key: 'css',
33-
container: document.querySelector(`meta[name="emotion"]`) as HTMLElement,
39+
container: document.querySelector('meta[name="emotion"]') as HTMLElement,
3440
});
3541
emotionCache.compat = true;
3642

@@ -52,7 +58,7 @@ export const CoreThemeProvider: FC<CoreThemeProviderProps> = ({
5258
utilityClasses={includeGlobalStyles}
5359
colorMode={euiTheme.colorMode}
5460
theme={euiTheme.euiThemeSystem}
55-
cache={{ default: emotionCache, global: globalCache }}
61+
cache={{ default: emotionCache, global: globalCache, utility: utilitiesCache }}
5662
>
5763
{children}
5864
</EuiProvider>

‎packages/kbn-storybook/src/lib/decorators.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
*/
88

99
import React from 'react';
10+
import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
1011
import { EuiProvider } from '@elastic/eui';
1112
import createCache from '@emotion/cache';
1213
import type { DecoratorFn } from '@storybook/react';
@@ -20,17 +21,26 @@ import 'core_styles';
2021
const EuiProviderDecorator: DecoratorFn = (storyFn, { globals }) => {
2122
const colorMode = globals.euiTheme === 'v8.dark' ? 'dark' : 'light';
2223
const globalCache = createCache({
23-
key: 'eui',
24-
container: document.querySelector(`meta[name="eui-global"]`) as HTMLElement,
24+
key: EUI_STYLES_GLOBAL,
25+
container: document.querySelector(`meta[name="${EUI_STYLES_GLOBAL}"]`) as HTMLElement,
2526
});
27+
globalCache.compat = true;
28+
const utilitiesCache = createCache({
29+
key: EUI_STYLES_UTILS,
30+
container: document.querySelector(`meta[name="${EUI_STYLES_UTILS}"]`) as HTMLElement,
31+
});
32+
utilitiesCache.compat = true;
2633
const emotionCache = createCache({
2734
key: 'css',
28-
container: document.querySelector(`meta[name="emotion"]`) as HTMLElement,
35+
container: document.querySelector('meta[name="emotion"]') as HTMLElement,
2936
});
3037
emotionCache.compat = true;
3138

3239
return (
33-
<EuiProvider colorMode={colorMode} cache={{ default: emotionCache, global: globalCache }}>
40+
<EuiProvider
41+
colorMode={colorMode}
42+
cache={{ default: emotionCache, global: globalCache, utility: utilitiesCache }}
43+
>
3444
{storyFn()}
3545
</EuiProvider>
3646
);

‎packages/kbn-storybook/tsconfig.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"@kbn/ui-shared-deps-src",
1717
"@kbn/repo-info",
1818
"@kbn/dev-cli-runner",
19+
"@kbn/core-base-common",
1920
],
2021
"exclude": [
2122
"target/**/*",

‎src/plugins/interactive_setup/public/theme/kibana_theme_provider.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import React, { useMemo } from 'react';
1414
import useObservable from 'react-use/lib/useObservable';
1515
import type { Observable } from 'rxjs';
1616

17+
import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
1718
import type { CoreTheme } from '@kbn/core/public';
1819

1920
import { getColorMode } from './utils';
@@ -28,12 +29,18 @@ const defaultTheme: CoreTheme = {
2829
};
2930

3031
const globalCache = createCache({
31-
key: 'eui',
32-
container: document.querySelector(`meta[name="eui-styles"]`) as HTMLElement,
32+
key: EUI_STYLES_GLOBAL,
33+
container: document.querySelector(`meta[name="${EUI_STYLES_GLOBAL}"]`) as HTMLElement,
3334
});
35+
globalCache.compat = true;
36+
const utilitiesCache = createCache({
37+
key: EUI_STYLES_UTILS,
38+
container: document.querySelector(`meta[name="${EUI_STYLES_UTILS}"]`) as HTMLElement,
39+
});
40+
utilitiesCache.compat = true;
3441
const emotionCache = createCache({
3542
key: 'css',
36-
container: document.querySelector(`meta[name="emotion"]`) as HTMLElement,
43+
container: document.querySelector('meta[name="emotion"]') as HTMLElement,
3744
});
3845
emotionCache.compat = true;
3946

@@ -46,7 +53,7 @@ export const KibanaThemeProvider: FC<KibanaThemeProviderProps> = ({ theme$, modi
4653
return (
4754
<EuiProvider
4855
colorMode={colorMode}
49-
cache={{ default: emotionCache, global: globalCache }}
56+
cache={{ default: emotionCache, global: globalCache, utility: utilitiesCache }}
5057
globalStyles={false}
5158
utilityClasses={false}
5259
modify={modify}

‎src/plugins/interactive_setup/tsconfig.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"@kbn/utils",
2020
"@kbn/core-logging-server-mocks",
2121
"@kbn/core-preboot-server",
22+
"@kbn/core-base-common",
2223
],
2324
"exclude": [
2425
"target/**/*",

‎src/plugins/kibana_react/public/theme/kibana_theme_provider.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import useObservable from 'react-use/lib/useObservable';
1111
import { Observable } from 'rxjs';
1212
import { EuiProvider, EuiProviderProps } from '@elastic/eui';
1313
import createCache from '@emotion/cache';
14+
import { EUI_STYLES_GLOBAL, EUI_STYLES_UTILS } from '@kbn/core-base-common';
1415
import type { CoreTheme } from '@kbn/core/public';
1516
import { getColorMode } from './utils';
1617

@@ -24,12 +25,18 @@ const defaultTheme: CoreTheme = {
2425
};
2526

2627
const globalCache = createCache({
27-
key: 'eui',
28-
container: document.querySelector(`meta[name="eui-global"]`) as HTMLElement,
28+
key: EUI_STYLES_GLOBAL,
29+
container: document.querySelector(`meta[name="${EUI_STYLES_GLOBAL}"]`) as HTMLElement,
2930
});
31+
globalCache.compat = true;
32+
const utilitiesCache = createCache({
33+
key: EUI_STYLES_UTILS,
34+
container: document.querySelector(`meta[name="${EUI_STYLES_UTILS}"]`) as HTMLElement,
35+
});
36+
utilitiesCache.compat = true;
3037
const emotionCache = createCache({
3138
key: 'css',
32-
container: document.querySelector(`meta[name="emotion"]`) as HTMLElement,
39+
container: document.querySelector('meta[name="emotion"]') as HTMLElement,
3340
});
3441
emotionCache.compat = true;
3542

@@ -43,7 +50,7 @@ export const KibanaThemeProvider: FC<KibanaThemeProviderProps> = ({ theme$, modi
4350
return (
4451
<EuiProvider
4552
colorMode={colorMode}
46-
cache={{ default: emotionCache, global: globalCache }}
53+
cache={{ default: emotionCache, global: globalCache, utility: utilitiesCache }}
4754
globalStyles={false}
4855
utilityClasses={false}
4956
modify={modify}

‎src/plugins/kibana_react/tsconfig.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@kbn/i18n",
1414
"@kbn/i18n-react",
1515
"@kbn/core-theme-browser",
16+
"@kbn/core-base-common",
1617
],
1718
"exclude": [
1819
"target/**/*",

0 commit comments

Comments
 (0)