Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[CSS-in-JS] Expand use of @emotion/cache #5831

Merged
merged 9 commits into from
Apr 26, 2022
Merged

[CSS-in-JS] Expand use of @emotion/cache #5831

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
69178bd
expand the use of CacheProvider
thompsongl Apr 21, 2022
bad2430
update docs
thompsongl Apr 21, 2022
04a92dd
Merge branch 'main' into css-in-js/cache
thompsongl Apr 21, 2022
36d70e5
CL
thompsongl Apr 21, 2022
cfb1712
Update src-docs/src/views/provider/provider_example.js
thompsongl Apr 21, 2022
5d7e66e
lint
thompsongl Apr 25, 2022
d8fd718
Merge branch 'main' into css-in-js/cache
thompsongl Apr 25, 2022
9e8257d
Merge branch 'main' into css-in-js/cache
thompsongl Apr 25, 2022
4612f2e
Merge branch 'main' into css-in-js/cache
thompsongl Apr 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src-docs/src/components/codesandbox/link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ import { Demo } from './demo';

const cache = createCache({
key: 'codesandbox',
container: document.querySelector('meta[name="global-styles"]'),
container: document.querySelector('meta[name="emotion-styles"]'),
});

ReactDOM.render(
Expand All @@ -182,7 +182,7 @@ ReactDOM.render(
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="global-styles">
<meta name="emotion-styles">
</head>
<body>
<div id="root" />
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<meta property="og:image" content="https://repository-images.githubusercontent.com/107422373/b6180480-a1d7-11eb-8a3c-902086232aa7">
<meta property="og:url" content="hhttps://elastic.github.io/eui">
<meta name="twitter:card" content="summary_large_image">
<meta name="emotion-global">
<meta name="emotion-styles">
</head>
<body class="guideBody">
<div id="guide"></div>
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/app_context.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import favicon96Dev from '../images/favicon/dev/favicon-96x96.png';

const emotionCache = createCache({
key: 'eui-docs',
container: document.querySelector('meta[name="emotion-global"]'),
container: document.querySelector('meta[name="emotion-styles"]'),
});

export const AppContext = ({ children }) => {
Expand Down
3 changes: 2 additions & 1 deletion src-docs/src/views/provider/provider_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,8 @@ export const ProviderExample = {
<EuiCode>@emotion/cache</EuiCode> and style injection location
</h3>
<p>
In the case that your app has its own static stylesheet, the global
In the case that your app has its own static stylesheet,{' '}
<EuiCode>@emotion</EuiCode>
thompsongl marked this conversation as resolved.
Show resolved Hide resolved
styles may not be injected into the correct location in the{' '}
<EuiCode>{'<head>'}</EuiCode>, causing unintentional overrides or
unapplied styles.{' '}
Expand Down
4 changes: 2 additions & 2 deletions src-docs/src/views/provider/provider_styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default () => {
<html lang="en">
<head>
<title>My App</title>
<meta name="global-style-insert">
<meta name="emotion-style-insert">
</head>
<body>
<div id="root"></div>
Expand All @@ -30,7 +30,7 @@ import createCache from '@emotion/cache';

const cache = createCache({
key: 'myApp',
container: document.querySelector('meta[name="global-style-insert"]'),
container: document.querySelector('meta[name="emotion-style-insert"]'),
});

<EuiProvider${colorMode === 'DARK' ? ' colorMode="dark"' : ''} cache={cache}'>
Expand Down
47 changes: 22 additions & 25 deletions src/components/provider/__snapshots__/provider.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -897,6 +897,27 @@ exports[`EuiProvider is rendered 1`] = `

exports[`EuiProvider providing an @emotion cache config applies the cache to global styles 1`] = `
<EuiThemeProvider
cache={
Object {
"insert": [Function],
"inserted": Object {},
"key": "testing",
"nonce": undefined,
"registered": Object {},
"sheet": StyleSheet {
"_insertTag": [Function],
"before": null,
"container": <head />,
"ctr": 0,
"insertionPoint": undefined,
"isSpeedy": false,
"key": "testing",
"nonce": undefined,
"prepend": undefined,
"tags": Array [],
},
}
}
theme={
Object {
"animation": Object {
Expand Down Expand Up @@ -1185,31 +1206,7 @@ exports[`EuiProvider providing an @emotion cache config applies the cache to glo
}
}
>
<ContextProvider
value={
Object {
"insert": [Function],
"inserted": Object {},
"key": "testing",
"nonce": undefined,
"registered": Object {},
"sheet": StyleSheet {
"_insertTag": [Function],
"before": null,
"container": <head />,
"ctr": 0,
"insertionPoint": undefined,
"isSpeedy": false,
"key": "testing",
"nonce": undefined,
"prepend": undefined,
"tags": Array [],
},
}
}
>
<EuiGlobalStyles />
</ContextProvider>
<EuiGlobalStyles />
</EuiThemeProvider>
`;

Expand Down
29 changes: 12 additions & 17 deletions src/components/provider/provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*/

import React, { PropsWithChildren } from 'react';
import { CacheProvider, EmotionCache } from '@emotion/react';
import { EmotionCache } from '@emotion/react';

import { EuiGlobalStyles, EuiGlobalStylesProps } from '../../global_styling';
import {
Expand Down Expand Up @@ -43,19 +43,14 @@ export const EuiProvider = <T extends {} = {}>({
colorMode,
modify,
children,
}: PropsWithChildren<EuiProviderProps<T>>) => {
return theme !== null && GlobalStyles !== false ? (
<EuiThemeProvider theme={theme} colorMode={colorMode} modify={modify}>
{cache ? (
<CacheProvider value={cache}>
<GlobalStyles />
</CacheProvider>
) : (
<GlobalStyles />
)}
{children}
</EuiThemeProvider>
) : (
<EuiThemeProvider colorMode={colorMode}>{children}</EuiThemeProvider>
);
};
}: PropsWithChildren<EuiProviderProps<T>>) => (
<EuiThemeProvider
theme={theme ?? undefined}
colorMode={colorMode}
modify={modify}
cache={cache}
>
{theme !== null && GlobalStyles !== false ? <GlobalStyles /> : null}
cchaos marked this conversation as resolved.
Show resolved Hide resolved
{children}
</EuiThemeProvider>
);
9 changes: 8 additions & 1 deletion src/services/theme/provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import React, {
useState,
PropsWithChildren,
} from 'react';
import { CacheProvider, EmotionCache } from '@emotion/react';
import isEqual from 'lodash/isEqual';

import {
Expand All @@ -33,13 +34,15 @@ export interface EuiThemeProviderProps<T> {
theme?: EuiThemeSystem<T>;
colorMode?: EuiThemeColorMode;
modify?: EuiThemeModifications<T>;
cache?: EmotionCache;
children: any;
}

export const EuiThemeProvider = <T extends {} = {}>({
theme: _system,
colorMode: _colorMode,
modify: _modifications,
cache,
children,
}: PropsWithChildren<EuiThemeProviderProps<T>>) => {
const parentSystem = useContext(EuiSystemContext);
Expand Down Expand Up @@ -120,7 +123,11 @@ export const EuiThemeProvider = <T extends {} = {}>({
<EuiSystemContext.Provider value={system}>
<EuiModificationsContext.Provider value={modifications}>
<EuiThemeContext.Provider value={theme}>
{children}
{cache ? (
<CacheProvider value={cache}>{children}</CacheProvider>
) : (
children
)}
</EuiThemeContext.Provider>
</EuiModificationsContext.Provider>
</EuiSystemContext.Provider>
Expand Down
2 changes: 2 additions & 0 deletions upcoming_changelogs/5831.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
- Updated the use of `@emotion/cache` to include all `@emotion` styles