From 6df89a1bf26e5a8e4ba70428945dc3740282dfbe Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Sun, 8 Oct 2023 23:18:47 -0700
Subject: [PATCH] Update docs site to use prefix plugin

---
 src-docs/src/components/codesandbox/link.js     | 3 ++-
 src-docs/src/views/app_context.js               | 3 +++
 src-docs/src/views/provider/provider_styles.tsx | 5 +++--
 src/services/emotion/index.ts                   | 1 +
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src-docs/src/components/codesandbox/link.js b/src-docs/src/components/codesandbox/link.js
index ef9d3297ea2..214a8aae8de 100644
--- 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
index 94495219134..1e38535ec8b 100644
--- 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
index 9b4ca730d41..2f8c576e64c 100644
--- 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
index d7a50a60227..2fb45487285 100644
--- a/src/services/emotion/index.ts
+++ b/src/services/emotion/index.ts
@@ -7,3 +7,4 @@
  */
 
 export * from './clone_element';
+export * from './prefixer';