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

* WIP: more granular insertion * sourceMap: false * WIP: just a lot of react context * clean up * clean up * refactor cache prop * refactor provider files * use the system HOC * clean up * simplify cache layer; docs * CL * more withEuiSystem * fix inheritance * CL * type fix * use type generic with forwardRef * update components to use HOC * HOC conversions * euiaccordion hoc * EuiCacheContext no longer relevant; simplify EuiProvider caches * docs clean up * CL update * cache tests * clean up * EuiCacheProvider unit tests * docs
elastic · Jun 22, 2022 · a91b47d · a91b47d
1 parent a544956
commit a91b47d
Show file tree

Hide file tree

Showing 16 changed files with 2,392 additions and 1,040 deletions.
diff --git a/src-docs/src/index.html b/src-docs/src/index.html
@@ -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>

diff --git a/src-docs/src/views/app_context.js b/src-docs/src/views/app_context.js
@@ -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);
@@ -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'}
     >

diff --git a/src-docs/src/views/provider/provider_example.js b/src-docs/src/views/provider/provider_example.js
@@ -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>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

diff --git a/src-docs/src/views/provider/provider_styles.tsx b/src-docs/src/views/provider/provider_styles.tsx
@@ -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>
@@ -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={euiCache}'>
   {/* Content */}
 </EuiProvider>
   `}

diff --git a/src-docs/webpack.config.js b/src-docs/webpack.config.js
@@ -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',