Update docs site to use prefix plugin

elastic · Oct 9, 2023 · 6df89a1 · 6df89a1
1 parent cfe58f6
commit 6df89a1
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/src-docs/src/components/codesandbox/link.js b/src-docs/src/components/codesandbox/link.js
@@ -169,12 +169,13 @@ import '@elastic/charts/dist/theme_only_${colorMode}.css';`
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import createCache from '@emotion/cache';
-import { EuiProvider } from '@elastic/eui';
+import { EuiProvider, euiStylisPrefixer } from '@elastic/eui';
 
 import { Demo } from './demo';
 
 const cache = createCache({
   key: 'codesandbox',
+  stylisPlugins: [euiStylisPrefixer],
   container: document.querySelector('meta[name="emotion-styles"]'),
 });
 cache.compat = true;

diff --git a/src-docs/src/views/app_context.js b/src-docs/src/views/app_context.js
@@ -8,6 +8,7 @@ import { translateUsingPseudoLocale } from '../services';
 import { getLocale } from '../store';
 
 import { EuiContext, EuiProvider } from '../../../src/components';
+import { euiStylisPrefixer } from '../../../src/services';
 import { EUI_THEMES } from '../../../src/themes';
 
 import favicon16Prod from '../images/favicon/prod/favicon-16x16.png';
@@ -19,11 +20,13 @@ import favicon96Dev from '../images/favicon/dev/favicon-96x96.png';
 
 const generalEmotionCache = createCache({
   key: 'css',
+  stylisPlugins: [euiStylisPrefixer],
   container: document.querySelector('meta[name="emotion-styles"]'),
 });
 generalEmotionCache.compat = true;
 const utilityCache = createCache({
   key: 'util',
+  stylisPlugins: [euiStylisPrefixer],
   container: document.querySelector('meta[name="emotion-styles-utility"]'),
 });
 

diff --git a/src-docs/src/views/provider/provider_styles.tsx b/src-docs/src/views/provider/provider_styles.tsx
@@ -26,14 +26,15 @@ export default () => {
 
       <EuiCodeBlock language="jsx" fontSize="m" isCopyable>
         {`// App.js
-import { EuiProvider } from '@elastic/eui'
+import { EuiProvider, euiStylisPrefixer } from '@elastic/eui'
 import createCache from '@emotion/cache';
 
 const euiCache = createCache({
   key: 'eui',
+  stylisPlugins: [euiStylisPrefixer],
   container: document.querySelector('meta[name="eui-style-insert"]'),
 });
-cache.compat = true;
+euiCache.compat = true;
 
 <EuiProvider${colorMode === 'DARK' ? ' colorMode="dark"' : ''} cache={euiCache}>
   {/* Content */}

diff --git a/src/services/emotion/index.ts b/src/services/emotion/index.ts
@@ -7,3 +7,4 @@
  */
 
 export * from './clone_element';
+export * from './prefixer';