Merge pull request #21213 from storybookjs/fix-emotion-warnings-for-good

Core: Revert Emotion `:first-child` (etc) workarounds

Author: shilman

code/ui/blocks/src/components/Source.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps, FunctionComponent } from 'react';
 import React from 'react';
-import { styled, ThemeProvider, convert, themes } from '@storybook/theming';
+import { styled, ThemeProvider, convert, themes, ignoreSsrWarning } from '@storybook/theming';
 import { SyntaxHighlighter } from '@storybook/components';
 
 import { EmptyBlock } from './EmptyBlock';
@@ -69,7 +69,7 @@ const SourceSkeletonPlaceholder = styled.div(({ theme }) => ({
   marginTop: 1,
   width: '60%',
 
-  [`&:first-child`]: {
+  [`&:first-child${ignoreSsrWarning}`]: {
     margin: 0,
   },
 }));

code/ui/components/src/spaced/Spaced.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React from 'react';
-import { styled } from '@storybook/theming';
+import { styled, ignoreSsrWarning } from '@storybook/theming';
 
 const toNumber = (input: any) => (typeof input === 'number' ? input : Number(input));
 
@@ -20,15 +20,15 @@ const Container = styled.div<ContainerProps>(
             marginLeft: col * theme.layoutMargin,
             verticalAlign: 'inherit',
           },
-          [`& > *:first-child`]: {
+          [`& > *:first-child${ignoreSsrWarning}`]: {
             marginLeft: 0,
           },
         }
       : {
           '& > *': {
             marginTop: row * theme.layoutMargin,
           },
-          [`& > *:first-child`]: {
+          [`& > *:first-child${ignoreSsrWarning}`]: {
             marginTop: 0,
           },
         },

code/ui/components/src/tabs/tabs.tsx

@@ -10,6 +10,9 @@ import type { ChildrenList } from './tabs.helpers';
 import { childrenToList, VisuallyHidden } from './tabs.helpers';
 import { useList } from './tabs.hooks';
 
+const ignoreSsrWarning =
+  '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
+
 export interface WrapperProps {
   bordered?: boolean;
   absolute?: boolean;
@@ -84,7 +87,7 @@ const Content = styled.div<ContentProps>(
           bottom: 0 + (bordered ? 1 : 0),
           top: 40 + (bordered ? 1 : 0),
           overflow: 'auto',
-          [`& > *:first-child`]: {
+          [`& > *:first-child${ignoreSsrWarning}`]: {
             position: 'absolute',
             left: 0 + (bordered ? 1 : 0),
             right: 0 + (bordered ? 1 : 0),

code/ui/manager/src/index.tsx

@@ -6,21 +6,14 @@ import ReactDOM from 'react-dom';
 import { Location, LocationProvider, useNavigate } from '@storybook/router';
 import { Provider as ManagerProvider } from '@storybook/manager-api';
 import type { Combo } from '@storybook/manager-api';
-import {
-  ThemeProvider,
-  ensure as ensureTheme,
-  CacheProvider,
-  createCache,
-} from '@storybook/theming';
+import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
+
 import { HelmetProvider } from 'react-helmet-async';
 
 import App from './app';
 
 import Provider from './provider';
 
-const emotionCache = createCache({ key: 'sto' });
-emotionCache.compat = true;
-
 // @ts-expect-error (Converted from ts-ignore)
 ThemeProvider.displayName = 'ThemeProvider';
 // @ts-expect-error (Converted from ts-ignore)
@@ -59,16 +52,14 @@ const Main: FC<{ provider: Provider }> = ({ provider }) => {
               : !state.previewInitialized;
 
             return (
-              <CacheProvider value={emotionCache}>
-                <ThemeProvider key="theme.provider" theme={ensureTheme(state.theme)}>
-                  <App
-                    key="app"
-                    viewMode={state.viewMode}
-                    layout={isLoading ? { ...state.layout, showPanel: false } : state.layout}
-                    panelCount={panelCount}
-                  />
-                </ThemeProvider>
-              </CacheProvider>
+              <ThemeProvider key="theme.provider" theme={ensureTheme(state.theme)}>
+                <App
+                  key="app"
+                  viewMode={state.viewMode}
+                  layout={isLoading ? { ...state.layout, showPanel: false } : state.layout}
+                  panelCount={panelCount}
+                />
+              </ThemeProvider>
             );
           }}
         </ManagerProvider>