Merge pull request #18361 from storybookjs/disable-emotion-unsafe-ssr…

…-warnings
storybookjs · May 31, 2022 · 1dedebb · 1dedebb
2 parents 61d6451 + ca86e9d
commit 1dedebb
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 27 deletions.
diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import pickBy from 'lodash/pickBy';
-import { styled, ignoreSsrWarning } from '@storybook/theming';
+import { styled } from '@storybook/theming';
 import { opacify, transparentize, darken, lighten } from 'polished';
 import { includeConditionalArg } from '@storybook/csf';
 import { once } from '@storybook/client-logger';
@@ -111,20 +111,20 @@ export const TableWrapper = styled.table<{
       marginLeft: inAddonPanel ? 0 : 1,
       marginRight: inAddonPanel ? 0 : 1,
 
-      [`tr:first-child${ignoreSsrWarning}`]: {
-        [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
+      [`tr:first-child`]: {
+        [`td:first-child, th:first-child`]: {
           borderTopLeftRadius: inAddonPanel ? 0 : theme.appBorderRadius,
         },
-        [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
+        [`td:last-child, th:last-child`]: {
           borderTopRightRadius: inAddonPanel ? 0 : theme.appBorderRadius,
         },
       },
 
-      [`tr:last-child${ignoreSsrWarning}`]: {
-        [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
+      [`tr:last-child`]: {
+        [`td:first-child, th:first-child`]: {
           borderBottomLeftRadius: inAddonPanel ? 0 : theme.appBorderRadius,
         },
-        [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
+        [`td:last-child, th:last-child`]: {
           borderBottomRightRadius: inAddonPanel ? 0 : theme.appBorderRadius,
         },
       },
@@ -172,7 +172,7 @@ export const TableWrapper = styled.table<{
                     : lighten(0.05, theme.background.content),
               }
             : {
-                [`&:not(:first-child${ignoreSsrWarning})`]: {
+                [`&:not(:first-child)`]: {
                   borderTopWidth: 1,
                   borderTopStyle: 'solid',
                   borderTopColor:

diff --git a/lib/components/src/blocks/Source.tsx b/lib/components/src/blocks/Source.tsx
@@ -1,5 +1,5 @@
 import React, { ComponentProps, FunctionComponent } from 'react';
-import { styled, ThemeProvider, convert, themes, ignoreSsrWarning } from '@storybook/theming';
+import { styled, ThemeProvider, convert, themes } from '@storybook/theming';
 import { EmptyBlock } from './EmptyBlock';
 
 import { SyntaxHighlighter } from '../syntaxhighlighter/lazy-syntaxhighlighter';
@@ -52,7 +52,7 @@ const SourceSkeletonPlaceholder = styled.div<{}>(({ theme }) => ({
   marginTop: 1,
   width: '60%',
 
-  [`&:first-child${ignoreSsrWarning}`]: {
+  [`&:first-child`]: {
     margin: 0,
   },
 }));

diff --git a/lib/components/src/spaced/Spaced.tsx b/lib/components/src/spaced/Spaced.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { styled, ignoreSsrWarning } from '@storybook/theming';
+import { styled } from '@storybook/theming';
 
 const toNumber = (input: any) => (typeof input === 'number' ? input : Number(input));
 
@@ -19,15 +19,15 @@ const Container = styled.div<ContainerProps>(
             marginLeft: col * theme.layoutMargin,
             verticalAlign: 'inherit',
           },
-          [`& > *:first-child${ignoreSsrWarning}`]: {
+          [`& > *:first-child`]: {
             marginLeft: 0,
           },
         }
       : {
           '& > *': {
             marginTop: row * theme.layoutMargin,
           },
-          [`& > *:first-child${ignoreSsrWarning}`]: {
+          [`& > *:first-child`]: {
             marginTop: 0,
           },
         },

diff --git a/lib/components/src/tabs/tabs.tsx b/lib/components/src/tabs/tabs.tsx
@@ -15,9 +15,6 @@ import { Placeholder } from '../placeholder/placeholder';
 import { FlexBar } from '../bar/bar';
 import { TabButton } from '../bar/button';
 
-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;
@@ -87,7 +84,7 @@ const Content = styled.div<ContentProps>(
           bottom: 0 + (bordered ? 1 : 0),
           top: 40 + (bordered ? 1 : 0),
           overflow: 'auto',
-          [`& > *:first-child${ignoreSsrWarning}`]: {
+          [`& > *:first-child`]: {
             position: 'absolute',
             left: 0 + (bordered ? 1 : 0),
             right: 0 + (bordered ? 1 : 0),

diff --git a/lib/ui/src/index.tsx b/lib/ui/src/index.tsx
@@ -7,13 +7,21 @@ import ReactDOM from 'react-dom';
 
 import { Location, LocationProvider, useNavigate } from '@storybook/router';
 import { Provider as ManagerProvider, Combo } from '@storybook/api';
-import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
+import {
+  ThemeProvider,
+  ensure as ensureTheme,
+  CacheProvider,
+  createCache,
+} 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;
+
 const { DOCS_MODE } = global;
 
 // @ts-ignore
@@ -66,15 +74,17 @@ const Main: FC<{ provider: Provider }> = ({ provider }) => {
               : !state.storiesFailed && !state.storiesConfigured;
 
             return (
-              <ThemeProvider key="theme.provider" theme={ensureTheme(state.theme)}>
-                <App
-                  key="app"
-                  viewMode={state.viewMode}
-                  layout={isLoading ? { ...state.layout, showPanel: false } : state.layout}
-                  panelCount={panelCount}
-                  docsOnly={story && story.parameters && story.parameters.docsOnly}
-                />
-              </ThemeProvider>
+              <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}
+                    docsOnly={story && story.parameters && story.parameters.docsOnly}
+                  />
+                </ThemeProvider>
+              </CacheProvider>
             );
           }}
         </ManagerProvider>