Upgrade packages and temporarily fix next.js SSR issue

- SSR wouldn't actually capture critical CSS, but accumulate over time - This adds a vendored next.js installation that fixes this problem temporarily for us
styled-components · Jul 25, 2017 · f9a9320 · f9a9320
1 parent 573efef
commit f9a9320
Show file tree

Hide file tree

Showing 25 changed files with 680 additions and 704 deletions.
diff --git a/components/advanced/babel-plugin.js b/components/advanced/babel-plugin.js
@@ -163,9 +163,9 @@ const BabelPlugin = () =>
         We also transpile <Code>styled-components</Code> tagged template
         literals down to a smaller representation than what Babel normally does,
         because <Code>styled-components</Code> template literals don't need to
-        be 100% spec compliant. see{' '}
+        be 100% spec compliant. Read more about{' '}
         <Link inline href="#tagged-template-literals">Tagged Template Literals</Link> for
-        more information about that) You can use the {' '}
+        more information about this. You can use the {' '}
         <Code>transpileTemplateLiterals</Code> option to turn this feature off.
       </p>
       <CodeBlock code={transpilation} language="node" />

diff --git a/package.json b/package.json
@@ -9,23 +9,23 @@
     "test": "jest"
   },
   "dependencies": {
-    "babel-plugin-polished": "^1.0.3",
-    "babel-plugin-styled-components": "^1.1.4",
+    "babel-plugin-polished": "^1.1.0",
+    "babel-plugin-styled-components": "^1.1.7",
     "express": "^4.15.2",
     "isomorphic-fetch": "^2.2.1",
     "lru-cache": "^4.0.2",
     "module-alias": "^2.0.0",
-    "next": "^2.4.0",
-    "polished": "^1.0.2",
-    "preact": "^8.1.0",
-    "preact-compat": "^3.14.3",
+    "next": "./vendor/next-v2.4.8.tgz",
+    "polished": "^1.3.0",
+    "preact": "^8.2.1",
+    "preact-compat": "^3.16.0",
     "prismjs": "^1.6.0",
-    "react": "^15.4.2",
-    "react-dom": "^15.4.2",
-    "react-live": "^1.5.2",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-live": "^1.7.0",
     "react-octicons-svg": "^1.1.13",
-    "styled-components": "^2.0.0",
-    "sw-precache-webpack-plugin": "^0.9.1",
+    "styled-components": "^2.1.1",
+    "sw-precache-webpack-plugin": "^0.11.4",
     "webpack-bundle-analyzer": "^2.4.0"
   },
   "devDependencies": {

diff --git a/pages/_document.js b/pages/_document.js
@@ -145,10 +145,20 @@ const resetStyles = `
 const description = 'Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅'
 
 export default class MyDocument extends Document {
-  render () {
+  static getInitialProps ({ renderPage }) {
     const sheet = new ServerStyleSheet()
-    const main = sheet.collectStyles(<Main />)
-    const styleTags = sheet.getStyleElement()
+
+    const page = renderPage(Component => props =>
+      sheet.collectStyles(<Component {...props} />
+    ))
+
+    const styles = sheet.getStyleElement()
+
+    return { ...page, styles }
+  }
+
+  render () {
+    const { styles } = this.props
 
     return (
       <html>
@@ -194,12 +204,13 @@ export default class MyDocument extends Document {
           <meta property="og:site_name" content="styled-components" />
 
           <style dangerouslySetInnerHTML={{ __html: resetStyles }} />
-          {styleTags}
+
+          {styles}
        </Head>
 
        <body>
          <div className="root">
-           {main}
+           <Main />
          </div>
 
          <NextScript />

diff --git a/test/components/NavBar/__snapshots__/Head.spec.js.snap b/test/components/NavBar/__snapshots__/Head.spec.js.snap
@@ -6,7 +6,7 @@ exports[`Head renders correctly 1`] = `
   padding: 3.611111111111111rem 4.722222222222222rem 2.5rem;
 }
 
-@media (max-width: 62.5em) {
+@media (max-width:62.5em) {
   .c0 {
     display: -webkit-box;
     display: -webkit-flex;

diff --git a/test/components/NavBar/__snapshots__/Logo.spec.js.snap b/test/components/NavBar/__snapshots__/Logo.spec.js.snap
@@ -11,7 +11,7 @@ exports[`Logo renders correctly 1`] = `
   background-position: center;
 }
 
-@media (max-width: 62.5em) {
+@media (max-width:62.5em) {
   .c0 {
     background-image: url(/static/icon.png);
     background-position: center;

diff --git a/test/components/NavBar/__snapshots__/Menu.spec.js.snap b/test/components/NavBar/__snapshots__/Menu.spec.js.snap
@@ -38,17 +38,17 @@ exports[`Menu renders correctly 1`] = `
   font-weight: normal;
 }
 
-@media (min-width: 62.5em) {
+@media (min-width:62.5em) {
   .c4 {
     border-radius: 0.16666666666666666rem;
   }
 
   .c4:hover {
-    background: rgba(20, 20, 20, 0.1);
+    background: rgba(20,20,20,0.1);
   }
 }
 
-@media (max-width: 62.5em) {
+@media (max-width:62.5em) {
   .c0 {
     height: calc(100vh - 3.888888888888889rem);
     -webkit-transition: height .2s ease-in-out;
@@ -57,9 +57,9 @@ exports[`Menu renders correctly 1`] = `
   }
 }
 
-@media (max-width: 62.5em) {
+@media (max-width:62.5em) {
   .c1 {
-    border-top: 2px solid rgba(20, 20, 20, 0.1);
+    border-top: 2px solid rgba(20,20,20,0.1);
     padding-top: 0.5555555555555556rem;
     padding-bottom: 3.3333333333333335rem;
     overflow-y: scroll;

diff --git a/test/components/NavBar/__snapshots__/MenuButton.spec.js.snap b/test/components/NavBar/__snapshots__/MenuButton.spec.js.snap
@@ -36,17 +36,17 @@ exports[`MenuButton renders correctly 1`] = `
   height: 1.6666666666666667rem;
 }
 
-@media (min-width: 62.5em) {
+@media (min-width:62.5em) {
   .c1 {
     border-radius: 0.16666666666666666rem;
   }
 
   .c1:hover {
-    background: rgba(20, 20, 20, 0.1);
+    background: rgba(20,20,20,0.1);
   }
 }
 
-@media (max-width: 62.5em) {
+@media (max-width:62.5em) {
   .c0 {
     display: block;
   }

diff --git a/test/components/NavBar/__snapshots__/Sidebar.spec.js.snap b/test/components/NavBar/__snapshots__/Sidebar.spec.js.snap
@@ -8,20 +8,20 @@ exports[`Sidebar renders correctly 1`] = `
   transform: translateZ(0);
   display: block;
   z-index: 1;
-  font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
   left: 0;
   top: 0;
   bottom: 0;
   right: auto;
   width: 16.666666666666668rem;
   height: 100%;
-  background: linear-gradient(20deg, rgb(219, 112, 147), #daa357);
+  background: linear-gradient(20deg,rgb(219,112,147),#daa357);
   box-sizing: border-box;
   color: white;
   overflow-y: scroll;
 }
 
-@media (max-width: 62.5em) {
+@media (max-width:62.5em) {
   .c0 {
     bottom: auto;
     right: 0;

diff --git a/test/components/NavBar/__snapshots__/Text.spec.js.snap b/test/components/NavBar/__snapshots__/Text.spec.js.snap
@@ -8,7 +8,7 @@ exports[`Text renders correctly 1`] = `
   font-size: 1rem;
 }
 
-@media (max-width: 62.5em) {
+@media (max-width:62.5em) {
   .c0 {
     display: block;
   }

diff --git a/test/components/NavBar/__snapshots__/index.spec.js.snap b/test/components/NavBar/__snapshots__/index.spec.js.snap
@@ -8,14 +8,14 @@ exports[`NavBar renders correctly 1`] = `
   transform: translateZ(0);
   display: block;
   z-index: 1;
-  font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
   left: 0;
   top: 0;
   bottom: 0;
   right: auto;
   width: 16.666666666666668rem;
   height: 100%;
-  background: linear-gradient(20deg, rgb(219, 112, 147), #daa357);
+  background: linear-gradient(20deg,rgb(219,112,147),#daa357);
   box-sizing: border-box;
   color: white;
   overflow-y: scroll;
@@ -106,7 +106,7 @@ exports[`NavBar renders correctly 1`] = `
   height: 1.6666666666666667rem;
 }
 
-@media (max-width: 62.5em) {
+@media (max-width:62.5em) {
   .c0 {
     bottom: auto;
     right: 0;
@@ -116,7 +116,7 @@ exports[`NavBar renders correctly 1`] = `
   }
 }
 
-@media (max-width: 62.5em) {
+@media (max-width:62.5em) {
   .c1 {
     display: -webkit-box;
     display: -webkit-flex;
@@ -134,7 +134,7 @@ exports[`NavBar renders correctly 1`] = `
   }
 }
 
-@media (max-width: 62.5em) {
+@media (max-width:62.5em) {
   .c2 {
     background-image: url(/static/icon.png);
     background-position: center;
@@ -143,23 +143,23 @@ exports[`NavBar renders correctly 1`] = `
   }
 }
 
-@media (max-width: 62.5em) {
+@media (max-width:62.5em) {
   .c3 {
     display: block;
   }
 }
 
-@media (min-width: 62.5em) {
+@media (min-width:62.5em) {
   .c5 {
     border-radius: 0.16666666666666666rem;
   }
 
   .c5:hover {
-    background: rgba(20, 20, 20, 0.1);
+    background: rgba(20,20,20,0.1);
   }
 }
 
-@media (max-width: 62.5em) {
+@media (max-width:62.5em) {
   .c7 {
     height: 0;
     -webkit-transition: height .2s ease-in-out;
@@ -168,16 +168,16 @@ exports[`NavBar renders correctly 1`] = `
   }
 }
 
-@media (max-width: 62.5em) {
+@media (max-width:62.5em) {
   .c8 {
-    border-top: 2px solid rgba(20, 20, 20, 0.1);
+    border-top: 2px solid rgba(20,20,20,0.1);
     padding-top: 0.5555555555555556rem;
     padding-bottom: 3.3333333333333335rem;
     overflow-y: scroll;
   }
 }
 
-@media (max-width: 62.5em) {
+@media (max-width:62.5em) {
   .c4 {
     display: block;
   }

diff --git a/test/components/__snapshots__/Anchor.spec.js.snap b/test/components/__snapshots__/Anchor.spec.js.snap
@@ -4,7 +4,7 @@ exports[`Anchor renders correctly 1`] = `
 .c1 {
   font-size: 1.7777777777777777rem;
   font-weight: 500;
-  font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
 }
 
 .c2 {
@@ -42,13 +42,13 @@ exports[`Anchor renders correctly 1`] = `
   display: inline-block;
 }
 
-@media (max-width: 62.5em) {
+@media (max-width:62.5em) {
   .c2 {
     top: -5rem;
   }
 }
 
-@media (max-width: 62.5em) {
+@media (max-width:62.5em) {
   .c0 {
     margin-left: 0;
   }

diff --git a/test/components/__snapshots__/Code.spec.js.snap b/test/components/__snapshots__/Code.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Code renders correctly 1`] = `
 .c0 {
-  font-family: "Operator Mono SSm A", "Operator Mono SSm B", monospace;
+  font-family: "Operator Mono SSm A","Operator Mono SSm B",monospace;
   font-weight: 500;
 }
 

diff --git a/test/components/__snapshots__/CodeBlock.spec.js.snap b/test/components/__snapshots__/CodeBlock.spec.js.snap
@@ -4,11 +4,11 @@ exports[`CodeBlock renders correctly 1`] = `
 .c0 {
   background: #1d1f27;
   font-size: 0.8rem;
-  font-family: "Operator Mono SSm A", "Operator Mono SSm B", monospace;
+  font-family: "Operator Mono SSm A","Operator Mono SSm B",monospace;
   font-weight: 300;
   white-space: pre-wrap;
   border-radius: 0.16666666666666666rem;
-  box-shadow: 1px 1px 20px rgba(20, 20, 20, 0.27);
+  box-shadow: 1px 1px 20px rgba(20,20,20,0.27);
   margin: 1.9444444444444444rem 0;
   overflow-x: hidden;
 }