chore(update-pkgs): mainly next.js

1.add css plugin
2.use new dynamic import
3.move title -> _app.js

Author: mydearxym

components/StateTree/index.js

@@ -10,7 +10,11 @@ let StateTreeWithNoSSR = null
 // example: https://github.com/zeit/next.js/issues/219
 export default class StateViewer extends React.Component {
   componentDidMount() {
-    StateTreeWithNoSSR = dynamic(import('./StateTree'), { ssr: false })
+    // StateTreeWithNoSSR = dynamic(import('./StateTree'), { ssr: false })
+    StateTreeWithNoSSR = dynamic({
+      loader: () => import('./StateTree'),
+      ssr: false,
+    })
   }
 
   render() {

containers/Preview/index.js

@@ -37,10 +37,12 @@ import * as logic from './logic'
 const debug = makeDebugger('C:Preview')
 /* eslint-enable no-unused-vars */
 
-const DynamicTypeWriter = dynamic(import('../TypeWriter'), {
+const DynamicTypeWriter = dynamic({
+  loader: () => import('../TypeWriter'),
   /* eslint-disable */
   loading: () => <TypeWriterLoading />,
   /* eslint-enable */
+  srr: false,
 })
 
 const CloseBtn = ({ type }) => (

containers/Sidebar/styles/index.js

@@ -107,7 +107,7 @@ export const ExploreIcon = styled(Img)`
   margin-top: -1px;
 `
 
-export const MenuItem = styled.ul`
+export const MenuItem = styled.div`
   margin-top: 0px;
   left: 0;
   position: relative;
@@ -116,7 +116,7 @@ export const MenuItem = styled.ul`
   overflow-y: scroll;
   transition: left 0.2s;
 `
-export const MenuItemWrapper = styled.li`
+export const MenuItemWrapper = styled.div`
   display: block;
   &:hover {
     background: ${theme('sidebar.menuHover')};

containers/ThemeWrapper/NormalizeStyle.js

@@ -11,19 +11,14 @@ import { ThemeProvider } from 'styled-components'
 import { storePlug } from '../../utils'
 
 import AntOverWrite from './AntOverWrite'
-import NormalizeStyle from './NormalizeStyle'
 // import MarkDownStyle from './MarkDownStyle'
 import CodeHighlight from './CodeHighlight'
-
-// TODO: mv MarkDownStyle && CodeHighlight to it's own container
+import './normalize.css'
 
 const ThemeObserver = ({ children, theme }) => (
   <ThemeProvider theme={theme.themeData}>
     <AntOverWrite>
       <CodeHighlight>
-        <style global jsx>
-          {NormalizeStyle}
-        </style>
         <style global jsx>{`
           html {
             background-color: ${theme.themeData.htmlBg};