diff --git a/CHANGELOG.md b/CHANGELOG.md index e55f68bf1..3fc0e5b86 100644 --- 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 index cbdb1e8c3..4a16282c4 100644 --- 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 index f2ad9f368..5321b48d2 100644 --- 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 ') + if (!document.head) { + throw new Error( + process.env.NODE_ENV !== 'production' ? 'Missing document ' : '' + ) + } document.head.appendChild(el) return new BrowserTag(el, isLocal) } diff --git a/src/models/ServerStyleSheet.js b/src/models/ServerStyleSheet.js index e1d340c2f..e7e7822fd 100644 --- 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 ( {children} diff --git a/src/models/ThemeProvider.js b/src/models/ThemeProvider.js index febadddfc..69bb0ed6d 100644 --- 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 index 4a2c31835..31b00438d 100644 --- 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) => seededClassnames = names +export const seedNextClassnames = (names: Array) => + (seededClassnames = names) export const resetStyled = (isServer: boolean = false) => { if (!isServer) { - if (!document.head) throw new Error("Missing document ") + if (!document.head) { + throw new Error( + process.env.NODE_ENV !== 'production' ? 'Missing document ' : '' + ) + } document.head.innerHTML = '' } @@ -39,29 +45,40 @@ export const resetStyled = (isServer: boolean = false) => { } export const resetNoParserStyled = () => { - if (!document.head) throw new Error("Missing document ") + if (!document.head) { + throw new Error( + process.env.NODE_ENV !== 'production' ? 'Missing document ' : '' + ) + } 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)