Drop ignoreSsrWarning workaround

storybookjs · May 31, 2022 · ca86e9d · ca86e9d
1 parent 03c5026
commit ca86e9d
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 17 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),