display deprecation warning only when method was called (#462)

Author: nkzawa

client/next.js

@@ -31,5 +31,5 @@ const headManager = new HeadManager()
 const container = document.getElementById('__next')
 const appProps = { Component, props, router, headManager }
 
-if (ids) rehydrate(ids)
+if (ids && ids.length) rehydrate(ids)
 render(createElement(App, appProps), container)

lib/css.js

@@ -1,7 +1,11 @@
-import { warn } from './utils'
+import { deprecated } from './utils'
 const css = require('glamor')
 
-warn('Warning: \'next/css\' is deprecated. Please use styled-jsx syntax instead.')
+for (const [k, v] of Object.entries(css)) {
+  if (typeof v === 'function') {
+    css[k] = deprecated(v, 'Warning: \'next/css\' is deprecated. Please use styled-jsx syntax instead.')
+  }
+}
 
 /**
  * Expose style as default and the whole object as properties

lib/utils.js

@@ -3,3 +3,21 @@ export function warn (message) {
     console.error(message)
   }
 }
+
+export function deprecated (fn, message) {
+  if (process.env.NODE_ENV === 'production') return fn
+
+  let warned = false
+  const newFn = function (...args) {
+    if (!warned) {
+      warned = true
+      console.error(message)
+    }
+    return fn.apply(this, args)
+  }
+
+  // copy all properties
+  Object.assign(newFn, fn)
+
+  return newFn
+}