[Emotion] Reduce CSS browser prefixing to supported browsers only (#7272

)
elastic · Oct 10, 2023 · b1c8582 · b1c8582
1 parent cff6f41
commit b1c8582
Show file tree

Hide file tree

Showing 27 changed files with 875 additions and 86 deletions.
diff --git a/package.json b/package.json
@@ -150,6 +150,7 @@
     "@types/react-dom": "^18.2.6",
     "@types/react-is": "^17.0.3",
     "@types/react-router-dom": "^5.3.3",
+    "@types/stylis": "^4.2.1",
     "@types/testing-library__jest-dom": "^5.14.3",
     "@types/url-parse": "^1.4.8",
     "@types/uuid": "^8.3.0",

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_example.js b/src-docs/src/views/provider/provider_example.js
@@ -96,21 +96,41 @@ export const ProviderExample = {
             {'<EuiProvider globalStyles={false} utilityClasses={false} />'}
           </EuiCodeBlock>
 
-          <h3 id="cache-location">
-            @emotion/cache and style injection location
-          </h3>
+          <h3 id="cache-customization">@emotion/cache customization</h3>
           <p>
-            In the case that your app has its own static stylesheet,{' '}
-            <EuiCode>@emotion</EuiCode> styles may not be injected into the
-            correct location in the <EuiCode>{'<head>'}</EuiCode>, causing
-            unintentional overrides or unapplied styles.{' '}
-            <EuiLink href="https://emotion.sh/docs/@emotion/cache" external>
-              The <strong>@emotion/cache</strong> library
+            The{' '}
+            <EuiLink
+              href="https://emotion.sh/docs/@emotion/cache"
+              target="_blank"
+            >
+              <strong>@emotion/cache</strong> library
             </EuiLink>{' '}
-            provides configuration options that help with specifying the
-            injection location. We recommend using <EuiCode>{'<meta>'}</EuiCode>{' '}
-            tags to achieve this.
+            provides extra configuration options for EUI's CSS-in-JS behavior:
           </p>
+          <ul>
+            <li>
+              <strong>Browser prefixing</strong>: By default, EUI uses CSS
+              browser prefixes based on our{' '}
+              <EuiLink
+                href="https://www.elastic.co/support/matrix#matrix_browsers"
+                target="_blank"
+              >
+                supported browsers matrix
+              </EuiLink>{' '}
+              (latest evergreen only). Should you need to customize this, you
+              can pass in your own prefix plugin via the{' '}
+              <EuiCode>stylisPlugins</EuiCode> option.
+              <EuiSpacer size="s" />
+            </li>
+            <li>
+              <strong>Injection location</strong>: In the case that your app has
+              its own static stylesheet, Emotion's styles may not be injected
+              into the correct location in the <EuiCode>{'<head>'}</EuiCode>,
+              causing unintentional overrides or unapplied styles. You can use
+              the <EuiCode>container</EuiCode> option and{' '}
+              <EuiCode>{'<meta>'}</EuiCode> tags to achieve this.
+            </li>
+          </ul>
 
           <GlobalStyles />
 

diff --git a/src-docs/src/views/provider/provider_styles.tsx b/src-docs/src/views/provider/provider_styles.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { EuiCodeBlock, EuiSpacer, useEuiTheme } from '../../../../src';
+import { EuiCodeBlock, useEuiTheme } from '../../../../src';
 
 export default () => {
   const { colorMode } = useEuiTheme();
@@ -22,18 +22,17 @@ export default () => {
 </html>`}
       </EuiCodeBlock>
 
-      <EuiSpacer size="s" />
-
       <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/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap b/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap
@@ -6,12 +6,12 @@ exports[`EuiBottomBar is rendered 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="aria-label"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium testClass1 testClass2 emotion-euiBottomBar-fixed-m-euiTestCss-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium testClass1 testClass2 emotion-euiBottomBar-fixed-m-euiTestCss-euiColorMode-dark"
       data-test-subj="test subject string"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
@@ -38,12 +38,12 @@ exports[`EuiBottomBar props affordForDisplacement can be false 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -69,12 +69,12 @@ exports[`EuiBottomBar props bodyClassName is rendered 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -99,12 +99,12 @@ exports[`EuiBottomBar props landmarkHeading 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="This should have been label"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -129,12 +129,12 @@ exports[`EuiBottomBar props paddingSize l is rendered 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingLarge emotion-euiBottomBar-fixed-l-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingLarge emotion-euiBottomBar-fixed-l-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -159,12 +159,12 @@ exports[`EuiBottomBar props paddingSize m is rendered 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -189,12 +189,12 @@ exports[`EuiBottomBar props paddingSize none is rendered 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -219,12 +219,12 @@ exports[`EuiBottomBar props paddingSize s is rendered 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingSmall emotion-euiBottomBar-fixed-s-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingSmall emotion-euiBottomBar-fixed-s-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -249,12 +249,12 @@ exports[`EuiBottomBar props position fixed is rendered 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -280,12 +280,12 @@ exports[`EuiBottomBar props position props are altered 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 30px; right: 30px; bottom: 30px; top: 30px;"
     >
       <h2
@@ -311,7 +311,7 @@ exports[`EuiBottomBar props position static is rendered 1`] = `
   <div>
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--static euiBottomBar--paddingMedium emotion-euiBottomBar-static-m-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--static euiBottomBar--paddingMedium emotion-euiBottomBar-static-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -337,7 +337,7 @@ exports[`EuiBottomBar props position sticky is rendered 1`] = `
   <div>
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--sticky euiBottomBar--paddingMedium emotion-euiBottomBar-sticky-m-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--sticky euiBottomBar--paddingMedium emotion-euiBottomBar-sticky-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -363,12 +363,12 @@ exports[`EuiBottomBar props style is customized 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 12px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -394,7 +394,7 @@ exports[`EuiBottomBar props usePortal can be false 1`] = `
   <div>
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2

diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`EuiButton props color danger is rendered 1`] = `
 
 exports[`EuiButton props color ghost is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-text-euiColorMode-dark-colorClassName"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-text-euiColorMode-dark"
   type="button"
 >
   <span

diff --git a/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap b/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`EuiButtonEmpty props color danger is rendered 1`] = `
 
 exports[`EuiButtonEmpty props color ghost is rendered 1`] = `
 <button
-  class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiColorMode-dark-colorClassName"
+  class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiColorMode-dark"
   type="button"
 >
   <span

diff --git a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`EuiButtonIcon props color danger is rendered 1`] = `
 exports[`EuiButtonIcon props color ghost is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text-euiColorMode-dark-colorClassName"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text-euiColorMode-dark"
   type="button"
 >
   <span

diff --git a/...s/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap b/...s/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`EuiCollapsibleNavGroup is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props background dark is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-dark-euiColorMode-dark-colorClassName"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-dark-euiColorMode-dark"
   id="id"
 />
 `;

diff --git a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`EuiControlBar is rendered 1`] = `
         </ol>
       </nav>
       <button
-        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text-euiColorMode-dark-colorClassName"
+        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text-euiColorMode-dark"
         data-test-subj="dts"
         type="button"
       >

diff --git a/src/components/overlay_mask/overlay_mask.test.tsx b/src/components/overlay_mask/overlay_mask.test.tsx
@@ -31,7 +31,7 @@ describe('EuiOverlayMask', () => {
     );
 
     expect(baseElement.querySelector('.euiOverlayMask')!.className).toContain(
-      'euiColorMode-inverse-colorClassName'
+      'euiColorMode-inverse'
     );
   });
 

diff --git a/src/components/page/__snapshots__/page_template.test.tsx.snap b/src/components/page/__snapshots__/page_template.test.tsx.snap
@@ -1179,7 +1179,7 @@ exports[`EuiPageTemplate_Deprecated with bottomBar is rendered 1`] = `
     </div>
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2