fix: style fixes, add docs SSR

LexSwed · Oct 4, 2020 · 06dfcec · 06dfcec
1 parent 4fd1009
commit 06dfcec
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 3 deletions.
diff --git a/src/lib/Button/Button.tsx b/src/lib/Button/Button.tsx
@@ -9,7 +9,6 @@ import Icon from '../Icon';
 const ButtonRoot = styled(Stack, {
   'px': '$3',
   'fontSize': '$sm',
-  'display': 'inline-flex',
   'height': '$base',
   'lineHeight': '$base',
   'fontWeight': 500,
@@ -126,7 +125,17 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
     const ref = useForkRef(innerRef, propRef);
 
     return (
-      <ButtonRoot {...buttonProps} flow="row" css={css} space="$2" variant={variant} as={as} ref={ref}>
+      <ButtonRoot
+        {...buttonProps}
+        flow="row"
+        alignY="center"
+        display="inline"
+        css={css}
+        space="$2"
+        variant={variant}
+        as={as}
+        ref={ref}
+      >
         {props.children}
       </ButtonRoot>
     );

diff --git a/src/lib/Label/Label.tsx b/src/lib/Label/Label.tsx
@@ -27,7 +27,7 @@ type Props = React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>
 
 const Label: React.FC<Props> = ({ label, children: _ignore, secondary, ref, ...props }) => {
   return (
-    <Wrapper {...props} flow="row" space="xs" display="inline" as="label" ref={ref as any}>
+    <Wrapper {...props} flow="row" alignY="center" space="xs" display="inline" as="label" ref={ref as any}>
       <Main>{label}</Main>
       {secondary && <Secondary>{secondary}</Secondary>}
     </Wrapper>

diff --git a/src/lib/Menu/MenuItem.tsx b/src/lib/Menu/MenuItem.tsx
@@ -61,6 +61,8 @@ const MenuItem = React.forwardRef<HTMLLIElement, Props>(({ action, ...props }, r
       as="li"
       {...props}
       flow="row"
+      alignY="center"
+      display="inline"
       onClick={onClick}
       tabIndex={props.disabled ? undefined : -1}
       role="menuitem"

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import NextDocument, { DocumentContext, Head, Html, Main, NextScript } from 'next/document';
+import { css } from 'src/lib/stitches.config';
+
+export default class Document extends NextDocument {
+  static async getInitialProps(ctx: DocumentContext) {
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      let extractedStyles: any[] = [];
+      ctx.renderPage = () => {
+        const { styles, result } = css.getStyles(originalRenderPage);
+        extractedStyles = styles;
+        return result;
+      };
+
+      const initialProps = await NextDocument.getInitialProps(ctx);
+
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+
+            {extractedStyles.map((content, index) => (
+              <style key={index} dangerouslySetInnerHTML={{ __html: content }} />
+            ))}
+          </>
+        ),
+      };
+    } finally {
+    }
+  }
+
+  render() {
+    return (
+      <Html lang="en">
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}