Skip to content

[CSS-in-JS] Granular insertion; Utility component for classes #5853

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

Merged
merged 40 commits into from
Jun 22, 2022
Merged

[CSS-in-JS] Granular insertion; Utility component for classes #5853

Show file tree
Hide file tree
Changes from 38 commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
3706e51
WIP: more granular insertion
thompsongl Apr 28, 2022
9e26139
sourceMap: false
thompsongl Apr 28, 2022
a18991f
Merge branch 'main' into css-in-js/static
thompsongl Apr 29, 2022
8b6a8a2
WIP: just a lot of react context
thompsongl Apr 29, 2022
69804fa
clean up
thompsongl Apr 29, 2022
f52e19d
clean up
thompsongl Apr 29, 2022
cb4d1cc
Merge branch 'main' into css-in-js/static
thompsongl May 4, 2022
ce22780
refactor cache prop
thompsongl May 4, 2022
55aacd3
refactor provider files
thompsongl May 4, 2022
79ee064
Merge branch 'main' into css-in-js/static
thompsongl May 5, 2022
ca0ca37
use the system HOC
thompsongl May 6, 2022
a74603e
Merge branch 'main' into css-in-js/static
thompsongl May 10, 2022
cab5f42
clean up
thompsongl May 11, 2022
d3c3258
Merge branch 'main' into css-in-js/static
thompsongl May 11, 2022
aeff690
simplify cache layer; docs
thompsongl May 11, 2022
75ab705
CL
thompsongl May 11, 2022
2b6e7a4
more withEuiSystem
thompsongl May 11, 2022
949fa82
fix inheritance
thompsongl May 11, 2022
5ba124d
CL
thompsongl May 11, 2022
17ab5e3
type fix
thompsongl May 11, 2022
11649f2
use type generic with forwardRef
thompsongl May 11, 2022
58947e2
Merge branch 'main' into css-in-js/static
thompsongl May 26, 2022
d9fa01c
Merge branch 'main' into css-in-js/static
thompsongl May 26, 2022
66e94f4
Merge branch 'main' into css-in-js/static
thompsongl May 26, 2022
4a76d85
Merge branch 'main' into css-in-js/static
thompsongl Jun 2, 2022
bc9b284
update components to use HOC
thompsongl Jun 2, 2022
1595e77
Merge branch 'main' into css-in-js/static
thompsongl Jun 6, 2022
b6f2059
Merge branch 'main' into css-in-js/static
thompsongl Jun 7, 2022
37a3079
Merge branch 'main' into css-in-js/static
thompsongl Jun 13, 2022
65d3402
HOC conversions
thompsongl Jun 13, 2022
32559df
euiaccordion hoc
thompsongl Jun 14, 2022
99b8c22
EuiCacheContext no longer relevant; simplify EuiProvider caches
thompsongl Jun 20, 2022
44eaa95
docs clean up
thompsongl Jun 20, 2022
34d2688
Merge branch 'main' into css-in-js/static
thompsongl Jun 20, 2022
60a13c6
CL update
thompsongl Jun 20, 2022
5de319d
Merge branch 'main' into css-in-js/static
thompsongl Jun 21, 2022
7c5193c
cache tests
thompsongl Jun 21, 2022
56df9f3
clean up
thompsongl Jun 21, 2022
5bbee69
EuiCacheProvider unit tests
thompsongl Jun 21, 2022
f866e71
docs
thompsongl Jun 21, 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
2 changes: 2 additions & 0 deletions src-docs/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
<meta property="og:url" content="hhttps://elastic.github.io/eui">
<meta name="twitter:card" content="summary_large_image">
<meta name="emotion-styles">
<meta name="sass-styles-compiled">
<meta name="emotion-styles-utility">
</head>
<body class="guideBody">
<div id="guide"></div>
Expand Down
15 changes: 11 additions & 4 deletions src-docs/src/views/app_context.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,15 @@ import favicon16Dev from '../images/favicon/dev/favicon-16x16.png';
import favicon32Dev from '../images/favicon/dev/favicon-32x32.png';
import favicon96Dev from '../images/favicon/dev/favicon-96x96.png';

const emotionCache = createCache({
key: 'eui-docs',
const generalEmotionCache = createCache({
key: 'css',
container: document.querySelector('meta[name="emotion-styles"]'),
});
emotionCache.compat = true;
generalEmotionCache.compat = true;
const utilityCache = createCache({
key: 'util',
container: document.querySelector('meta[name="emotion-styles-utility"]'),
});

export const AppContext = ({ children }) => {
const { theme } = useContext(ThemeContext);
Expand All @@ -41,7 +45,10 @@ export const AppContext = ({ children }) => {

return (
<EuiProvider
cache={emotionCache}
cache={{
default: generalEmotionCache,
utility: utilityCache,
}}
theme={EUI_THEMES.find((t) => t.value === theme)?.provider}
colorMode={theme.includes('light') ? 'light' : 'dark'}
>
Expand Down
17 changes: 15 additions & 2 deletions 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 @@ -95,12 +95,25 @@ export const ProviderExample = {
The <strong>@emotion/cache</strong> library
</EuiLink>{' '}
provides configuration options that help with specifying the
injection location. We recommend using a{' '}
<EuiCode>{'<meta>'}</EuiCode> tag to achieve this.
injection location. We recommend using <EuiCode>{'<meta>'}</EuiCode>{' '}
tags to achieve this.
</p>

<GlobalStyles />

<p>
For most applications, the above configuration will be enough to
have styles ordered correctly. In advanced more cases, you may use
the <EuiCode>default</EuiCode>, <EuiCode>eui</EuiCode>,{' '}
<EuiCode>global</EuiCode>, and <EuiCode>utility</EuiCode> properties
on the <EuiCode>cache</EuiCode> prop to further define where
specific styles should be inserted. See{' '}
<EuiLink href="#/utilities/provider#euiprovider-props">
the props documentation
</EuiLink>{' '}
for details.
</p>

<p>
Any other options available with{' '}
<EuiLink
Expand Down
13 changes: 8 additions & 5 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,8 @@ export default () => {
<html lang="en">
<head>
<title>My App</title>
<meta name="emotion-style-insert">
<meta name="eui-style-insert">
<link name="compiled-css-here" />
</head>
<body>
<div id="root"></div>
Expand All @@ -28,13 +29,15 @@ export default () => {
import { EuiProvider } from '@elastic/eui'
import createCache from '@emotion/cache';

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

<EuiProvider${colorMode === 'DARK' ? ' colorMode="dark"' : ''} cache={cache}'>
<EuiProvider${
colorMode === 'DARK' ? ' colorMode="dark"' : ''
} cache={{eui: euiCache}}'>
{/* Content */}
</EuiProvider>
`}
Expand Down
5 changes: 4 additions & 1 deletion src-docs/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,10 @@ const webpackConfig = {
loaders: employCache([
{
loader: 'style-loader',
options: { injectType: 'lazySingletonStyleTag' },
options: {
injectType: 'lazySingletonStyleTag',
insert: 'meta[name="sass-styles-compiled"]',
},
},
'css-loader',
'postcss-loader',
Expand Down
Loading