[POC] chore(eui): flag dynamic styles in emotion

packages/eui/src/components/panel/panel.stories.tsx

@@ -8,12 +8,15 @@
 
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { css } from '@emotion/react';
 
 import {
   disableStorybookControls,
   enableFunctionToggleControls,
 } from '../../../.storybook/utils';
 import { EuiPanel, EuiPanelProps } from './panel';
+import { EuiButton } from '../button';
+import { EuiFlexGroup } from '../flex';
 
 const meta: Meta<EuiPanelProps> = {
   title: 'Layout/EuiPanel',
@@ -74,3 +77,36 @@ export const OverlappingPanels: Story = {
     );
   },
 };
+
+const panelStyles = (isPrimary: boolean) => {
+  return css`
+    background-color: ${isPrimary ? 'blue' : 'gray'};
+    color: white;
+    padding: 16px;
+    border-radius: 4px;
+  `;
+};
+
+export const DynamicStylePanel: Story = {
+  args: {
+    children: 'Click the button to change panel styles',
+  },
+  render: function Render(args: EuiPanelProps) {
+    const [isPrimary, setIsPrimary] = React.useState(false);
+
+    return (
+      <EuiFlexGroup alignItems="baseline" direction="column" gutterSize="s">
+        <EuiButton onClick={() => setIsPrimary((v) => !v)}>
+          Toggle dynamic style
+        </EuiButton>
+        <EuiPanel
+          {...args}
+          color={isPrimary ? 'primary' : 'plain'}
+          css={panelStyles(isPrimary)}
+        >
+          {args.children}
+        </EuiPanel>
+      </EuiFlexGroup>
+    );
+  },
+};

packages/eui/src/components/provider/cache/cache_provider.tsx

@@ -10,6 +10,8 @@ import React, { PropsWithChildren } from 'react';
 import { EmotionCache } from '@emotion/css';
 import { CacheProvider } from '@emotion/react';
 
+import { patchCacheForDynamicStyles } from './emotion_dynamic_patch';
+
 export interface EuiCacheProviderProps extends PropsWithChildren {
   cache?: false | EmotionCache;
 }
@@ -18,6 +20,13 @@ export const EuiCacheProvider = ({
   cache,
   children,
 }: EuiCacheProviderProps) => {
+  if (
+    cache &&
+    process.env.NODE_ENV !== 'production' &&
+    process.env.NODE_ENV !== 'test'
+  ) {
+    patchCacheForDynamicStyles(cache);
+  }
   return children && cache ? (
     <CacheProvider value={cache}>{children}</CacheProvider>
   ) : (

packages/eui/src/components/provider/cache/emotion_dynamic_patch.test.ts

@@ -0,0 +1,79 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { patchCacheForDynamicStyles } from './emotion_dynamic_patch';
+
+describe('patchCacheForDynamicStyles', () => {
+  function createMockCache() {
+    const inserted: any[] = [];
+    return {
+      insert: jest.fn(function (selector, serialized, sheet, shouldCache) {
+        inserted.push({ selector, serialized, sheet, shouldCache });
+        return undefined;
+      }),
+      inserted,
+    };
+  }
+
+  it('should not warn for static styles', () => {
+    const cache: any = createMockCache();
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    patchCacheForDynamicStyles(cache);
+
+    // Simulate two static style insertions with the same base class and hash
+    cache.insert('.css-aaaaaa-euiPanel', {
+      name: 'aaaaaa-euiPanel',
+      styles: 'color:red;',
+    });
+    cache.insert('.css-aaaaaa-euiPanel', {
+      name: 'aaaaaa-euiPanel',
+      styles: 'color:red;',
+    });
+
+    expect(warnSpy).not.toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+
+  it('should warn for dynamic styles (different hashes for same base)', () => {
+    const cache: any = createMockCache();
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    patchCacheForDynamicStyles(cache);
+
+    // Simulate two dynamic style insertions with different hashes but same base class
+    cache.insert('.css-aaaaaa-euiPanel', {
+      name: 'aaaaaa-euiPanel',
+      styles: 'color:red;',
+    });
+    cache.insert('.css-bbbbbb-euiPanel', {
+      name: 'bbbbbb-euiPanel',
+      styles: 'color:blue;',
+    });
+
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining(
+        'Dynamic style detected for base selector: euiPanel'
+      )
+    );
+    warnSpy.mockRestore();
+  });
+
+  it('should handle selectors that do not match the pattern', () => {
+    const cache: any = createMockCache();
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    patchCacheForDynamicStyles(cache);
+
+    // Insert a selector that doesn't match the .css-xxxxxx-base pattern
+    cache.insert('.not-css-selector', {
+      name: 'notcssselector',
+      styles: 'color:green;',
+    });
+
+    expect(warnSpy).not.toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+});

packages/eui/src/components/provider/cache/emotion_dynamic_patch.tsx

@@ -0,0 +1,68 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { EmotionCache } from '@emotion/react';
+
+/**
+ * Applies a monkey patch to the given Emotion cache to flag dynamic styles.
+ * This is modular and can be reused in other places.
+ */
+export function patchCacheForDynamicStyles(cache: EmotionCache) {
+  if (!cache || typeof cache !== 'object' || (cache as any).__patched) return;
+
+  const baseClassMap = new Map<string, Set<string>>();
+
+  /**
+   * A utility to normalize selectors by removing the dynamic part
+   * of the class name generated by Emotion.
+   */
+  function getBaseClass(selector: string): string | null {
+    const match = selector.match(/\.css-[a-zA-Z0-9]+-(.+)/);
+    return match ? match[1] : null;
+  }
+
+  /**
+   * Checks for dynamic styles by tracking hashes for each base class.
+   * If multiple hashes are seen for the same base class, a warning is logged.
+   * Returns true if a dynamic style was flagged.
+   */
+  function flagDynamicStyles(selector: string, serialized: any): boolean {
+    const baseClass = getBaseClass(selector);
+
+    if (baseClass) {
+      const hashes = baseClassMap.get(baseClass) || new Set<string>();
+      const hash =
+        serialized && serialized.name ? serialized.name.split('-')[0] : null;
+
+      if (hash) {
+        hashes.add(hash);
+        if (hashes.size > 1) {
+          console.warn(
+            `[EuiCacheProvider] Dynamic style detected for base selector: ${baseClass}. ` +
+              'This usually means you are passing dynamic values to the `css` prop. ' +
+              'Consider using the `style` prop for dynamic values instead.'
+          );
+          baseClassMap.set(baseClass, hashes);
+
+          return true;
+        }
+
+        baseClassMap.set(baseClass, hashes);
+      }
+    }
+    return false;
+  }
+
+  const originalInsert = cache.insert;
+  cache.insert = function (selector, serialized, sheet, shouldCache) {
+    flagDynamicStyles(selector, serialized);
+    return originalInsert.call(this, selector, serialized, sheet, shouldCache);
+  };
+  (cache as any).__patched = true;
+  (cache as any).__baseClassMap = baseClassMap;
+}