Merge pull request #1445 from probablyup/compile-out-errors

compile out development error messages for production
styled-components · Jan 24, 2018 · 75e3e4c · 75e3e4c
2 parents e2ffaca + 725b9a8
commit 75e3e4c
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 34 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,8 @@ All notable changes to this project will be documented in this file. If a contri
 
 - Minify the output CSS when using SSR in production (see [#1224](https://github.com/styled-components/styled-components/pull/1224))
 
+- Compile out error messages for production builds (see [#1445](https://github.com/styled-components/styled-components/pull/1445))
+
 ## [v3.0.2] - 2018-01-22
 
 - Add secret internals for jest-styled-components (do not use or you will be haunted by spooky ghosts :ghost:) (see [#1438](https://github.com/styled-components/styled-components/pull/1438))

diff --git a/src/constructors/constructWithOptions.js b/src/constructors/constructWithOptions.js
@@ -7,13 +7,12 @@ export default (css: Function) => {
     tag: Target,
     options: Object = {}
   ) => {
-    if (
-      process.env.NODE_ENV !== 'production' &&
-      typeof tag !== 'string' &&
-      typeof tag !== 'function'
-    ) {
-      // $FlowInvalidInputTest
-      throw new Error(`Cannot create styled-component for component: ${tag}`)
+    if (typeof tag !== 'string' && typeof tag !== 'function') {
+      throw new Error(
+        process.env.NODE_ENV !== 'production'
+          ? `Cannot create styled-component for component: ${String(tag)}`
+          : ''
+      )
     }
 
     /* This is callable directly as a template function */

diff --git a/src/models/BrowserStyleSheet.js b/src/models/BrowserStyleSheet.js
@@ -50,8 +50,12 @@ class BrowserTag implements Tag {
 
   addComponent(componentId: string) {
     if (!this.ready) this.replaceElement()
-    if (process.env.NODE_ENV !== 'production' && this.components[componentId]) {
-      throw new Error(`Trying to add Component '${componentId}' twice!`)
+    if (this.components[componentId]) {
+      throw new Error(
+        process.env.NODE_ENV !== 'production'
+          ? `Trying to add Component '${componentId}' twice!`
+          : ''
+      )
     }
 
     const comp = { componentId, textNode: document.createTextNode('') }
@@ -65,9 +69,11 @@ class BrowserTag implements Tag {
     if (!this.ready) this.replaceElement()
     const comp = this.components[componentId]
 
-    if (process.env.NODE_ENV !== 'production' && !comp) {
+    if (!comp) {
       throw new Error(
-        'Must add a new component before you can inject css into it'
+        process.env.NODE_ENV !== 'production'
+          ? 'Must add a new component before you can inject css into it'
+          : ''
       )
     }
     if (comp.textNode.data === '') {
@@ -95,11 +101,19 @@ class BrowserTag implements Tag {
   }
 
   toReactElement() {
-    throw new Error("BrowserTag doesn't implement toReactElement!")
+    throw new Error(
+      process.env.NODE_ENV !== 'production'
+        ? "BrowserTag doesn't implement toReactElement!"
+        : ''
+    )
   }
 
   clone() {
-    throw new Error('BrowserTag cannot be cloned!')
+    throw new Error(
+      process.env.NODE_ENV !== 'production'
+        ? 'BrowserTag cannot be cloned!'
+        : ''
+    )
   }
 
   /* Because we care about source order, before we can inject anything we need to
@@ -122,7 +136,11 @@ class BrowserTag implements Tag {
     })
 
     if (!this.el.parentNode) {
-      throw new Error("Trying to replace an element that wasn't mounted!")
+      throw new Error(
+        process.env.NODE_ENV !== 'production'
+          ? "Trying to replace an element that wasn't mounted!"
+          : ''
+      )
     }
 
     // The ol' switcheroo
@@ -165,7 +183,11 @@ export default {
       el.type = 'text/css'
       el.setAttribute(SC_ATTR, '')
       el.setAttribute(LOCAL_ATTR, isLocal ? 'true' : 'false')
-      if (!document.head) throw new Error('Missing document <head>')
+      if (!document.head) {
+        throw new Error(
+          process.env.NODE_ENV !== 'production' ? 'Missing document <head>' : ''
+        )
+      }
       document.head.appendChild(el)
       return new BrowserTag(el, isLocal)
     }

diff --git a/src/models/ServerStyleSheet.js b/src/models/ServerStyleSheet.js
@@ -27,8 +27,12 @@ class ServerTag implements Tag {
   }
 
   addComponent(componentId: string) {
-    if (process.env.NODE_ENV !== 'production' && this.components[componentId]) {
-      throw new Error(`Trying to add Component '${componentId}' twice!`)
+    if (this.components[componentId]) {
+      throw new Error(
+        process.env.NODE_ENV !== 'production'
+          ? `Trying to add Component '${componentId}' twice!`
+          : ''
+      )
     }
     this.components[componentId] = { componentId, css: '' }
     this.size += 1
@@ -44,9 +48,11 @@ class ServerTag implements Tag {
   inject(componentId: string, css: string, name: ?string) {
     const comp = this.components[componentId]
 
-    if (process.env.NODE_ENV !== 'production' && !comp) {
+    if (!comp) {
       throw new Error(
-        'Must add a new component before you can inject css into it'
+        process.env.NODE_ENV !== 'production'
+          ? 'Must add a new component before you can inject css into it'
+          : ''
       )
     }
     if (comp.css === '') comp.css = `/* sc-component-id: ${componentId} */\n`
@@ -125,7 +131,11 @@ export default class ServerStyleSheet {
 
   collectStyles(children: any) {
     if (this.closed) {
-      throw new Error("Can't collect styles once you've called getStyleTags!")
+      throw new Error(
+        process.env.NODE_ENV !== 'production'
+          ? "Can't collect styles once you've called getStyleTags!"
+          : ''
+      )
     }
     return (
       <StyleSheetManager sheet={this.instance}>{children}</StyleSheetManager>

diff --git a/src/models/ThemeProvider.js b/src/models/ThemeProvider.js
@@ -111,14 +111,18 @@ class ThemeProvider extends Component {
         !isPlainObject(mergedTheme)
       ) {
         throw new Error(
-          '[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!'
+          process.env.NODE_ENV !== 'production'
+            ? '[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!'
+            : ''
         )
       }
       return mergedTheme
     }
     if (!isPlainObject(theme)) {
       throw new Error(
-        '[ThemeProvider] Please make your theme prop a plain object'
+        process.env.NODE_ENV !== 'production'
+          ? '[ThemeProvider] Please make your theme prop a plain object'
+          : ''
       )
     }
     return { ...this.outerTheme, ...(theme: Object) }

diff --git a/src/test/utils.js b/src/test/utils.js
@@ -19,12 +19,18 @@ import noParserStringifyRules from '../no-parser/stringifyRules'
 /* Ignore hashing, just return class names sequentially as .a .b .c etc */
 let index = 0
 let seededClassnames = []
-const classNames = () => seededClassnames.shift() || String.fromCodePoint(97 + index++)
+const classNames = () =>
+  seededClassnames.shift() || String.fromCodePoint(97 + index++)
 
-export const seedNextClassnames = (names: Array<string>) => seededClassnames = names
+export const seedNextClassnames = (names: Array<string>) =>
+  (seededClassnames = names)
 export const resetStyled = (isServer: boolean = false) => {
   if (!isServer) {
-    if (!document.head) throw new Error("Missing document <head>")
+    if (!document.head) {
+      throw new Error(
+        process.env.NODE_ENV !== 'production' ? 'Missing document <head>' : ''
+      )
+    }
     document.head.innerHTML = ''
   }
 
@@ -39,29 +45,40 @@ export const resetStyled = (isServer: boolean = false) => {
 }
 
 export const resetNoParserStyled = () => {
-  if (!document.head) throw new Error("Missing document <head>")
+  if (!document.head) {
+    throw new Error(
+      process.env.NODE_ENV !== 'production' ? 'Missing document <head>' : ''
+    )
+  }
   document.head.innerHTML = ''
   StyleSheet.reset()
   index = 0
 
-  const ComponentStyle = _ComponentStyle(classNames, noParserFlatten, noParserStringifyRules)
+  const ComponentStyle = _ComponentStyle(
+    classNames,
+    noParserFlatten,
+    noParserStringifyRules
+  )
   const constructWithOptions = _constructWithOptions(noParserCss)
   const StyledComponent = _StyledComponent(ComponentStyle, constructWithOptions)
 
   return _styled(StyledComponent, constructWithOptions)
 }
 
-const stripComments = (str: string) =>
-  str.replace(/\/\*.*?\*\/\n?/g, '')
+const stripComments = (str: string) => str.replace(/\/\*.*?\*\/\n?/g, '')
 
 export const stripWhitespace = (str: string) =>
-  str.trim().replace(/([;\{\}])/g, '$1  ').replace(/\s+/g, ' ')
+  str
+    .trim()
+    .replace(/([;\{\}])/g, '$1  ')
+    .replace(/\s+/g, ' ')
 
-export const expectCSSMatches = (_expectation: string, opts: { ignoreWhitespace: boolean } = { ignoreWhitespace: true }) => {
+export const expectCSSMatches = (
+  _expectation: string,
+  opts: { ignoreWhitespace: boolean } = { ignoreWhitespace: true }
+) => {
   // NOTE: This should normalise both CSS strings to make irrelevant mismatches less likely
-  const expectation = _expectation
-    .replace(/ {/g, '{')
-    .replace(/:\s+;/g, ':;')
+  const expectation = _expectation.replace(/ {/g, '{').replace(/:\s+;/g, ':;')
 
   const css = Array.from(document.querySelectorAll('style'))
     .map(tag => tag.innerHTML)