FIX emotion SSR warnings

storybookjs · Apr 22, 2020 · 2111919 · 2111919
1 parent d78d235
commit 2111919
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 20 deletions.
diff --git a/examples/official-storybook/stories/addon-docs/forward-ref.stories.js b/examples/official-storybook/stories/addon-docs/forward-ref.stories.js
@@ -1,7 +1,9 @@
 import React from 'react';
 import { DocgenButton } from '../../components/DocgenButton';
 
-const ForwardedButton = React.forwardRef((props, ref) => <DocgenButton ref={ref} {...props} />);
+const ForwardedButton = React.forwardRef((props = { label: '' }, ref) => (
+  <DocgenButton ref={ref} {...props} />
+));
 
 export default {
   title: 'Addons|Docs/ForwardRef',

diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { styled } from '@storybook/theming';
+import { styled, ignoreSsrWarning } from '@storybook/theming';
 import { opacify, transparentize, darken, lighten } from 'polished';
 import { ArgRow, ArgRowProps } from './ArgRow';
 import { SectionRow, SectionRowProps } from './SectionRow';
@@ -79,20 +79,20 @@ export const TableWrapper = styled.table<{}>(({ theme }) => ({
     marginLeft: 1,
     marginRight: 1,
 
-    'tr:first-child': {
-      'td:first-child, th:first-child': {
+    [`tr:first-child${ignoreSsrWarning}`]: {
+      [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
         borderTopLeftRadius: theme.appBorderRadius,
       },
-      'td:last-child, th:last-child': {
+      [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
         borderTopRightRadius: theme.appBorderRadius,
       },
     },
 
-    'tr:last-child': {
-      'td:first-child, th:first-child': {
+    [`tr:last-child${ignoreSsrWarning}`]: {
+      [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
         borderBottomLeftRadius: theme.appBorderRadius,
       },
-      'td:last-child, th:last-child': {
+      [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
         borderBottomRightRadius: theme.appBorderRadius,
       },
     },
@@ -110,7 +110,7 @@ export const TableWrapper = styled.table<{}>(({ theme }) => ({
       tr: {
         background: 'transparent',
         overflow: 'hidden',
-        '&:not(:first-child)': {
+        [`&:not(:first-child${ignoreSsrWarning})`]: {
           borderTopWidth: 1,
           borderTopStyle: 'solid',
           borderTopColor:

diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { styled } from '@storybook/theming';
+import { styled, ignoreSsrWarning } from '@storybook/theming';
 import { opacify, transparentize, darken, lighten } from 'polished';
 import { PropRow, PropRowProps } from './PropRow';
 import { SectionRow, SectionRowProps } from './SectionRow';
@@ -79,20 +79,20 @@ export const Table = styled.table<{}>(({ theme }) => ({
     marginLeft: 1,
     marginRight: 1,
 
-    'tr:first-child': {
-      'td:first-child, th:first-child': {
+    [`tr:first-child${ignoreSsrWarning}`]: {
+      [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
         borderTopLeftRadius: theme.appBorderRadius,
       },
-      'td:last-child, th:last-child': {
+      [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
         borderTopRightRadius: theme.appBorderRadius,
       },
     },
 
-    'tr:last-child': {
-      'td:first-child, th:first-child': {
+    [`tr:last-child${ignoreSsrWarning}`]: {
+      [`td:first-child${ignoreSsrWarning}, th:first-child${ignoreSsrWarning}`]: {
         borderBottomLeftRadius: theme.appBorderRadius,
       },
-      'td:last-child, th:last-child': {
+      [`td:last-child${ignoreSsrWarning}, th:last-child${ignoreSsrWarning}`]: {
         borderBottomRightRadius: theme.appBorderRadius,
       },
     },

diff --git a/lib/components/src/spaced/Spaced.tsx b/lib/components/src/spaced/Spaced.tsx
@@ -1,11 +1,8 @@
 import React, { FunctionComponent } from 'react';
-import { styled } from '@storybook/theming';
+import { styled, ignoreSsrWarning } from '@storybook/theming';
 
 const toNumber = (input: any) => (typeof input === 'number' ? input : Number(input));
 
-const ignoreSsrWarning =
-  '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
-
 export interface ContainerProps {
   col?: number;
   row?: number;

diff --git a/lib/theming/src/index.ts b/lib/theming/src/index.ts
@@ -16,3 +16,6 @@ export * from './convert';
 export * from './ensure';
 
 export { lightenColor as lighten, darkenColor as darken } from './utils';
+
+export const ignoreSsrWarning =
+  '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';