remove trailing commas for functions

They're not supported in ES5, which is tested against in the node
versions included by the styled-components CI. Also disabled an
eslint rule that was conflicting with what prettier was doing.

Author: quantizor

.eslintrc

@@ -5,6 +5,7 @@
   "rules": {
     "semi": 0,
     "quotes": 0,
+    "comma-dangle": 0,
     "curly": [2, "multi-line"],
     "arrow-parens": 0,
     "class-methods-use-this": 0,

.prettierrc

@@ -1,5 +1,5 @@
 {
   "semi": false,
   "singleQuote": true,
-  "trailingComma": "all"
+  "trailingComma": "es5"
 }

CHANGELOG.md

@@ -10,6 +10,8 @@ All notable changes to this project will be documented in this file. If a contri
 
 - Add warning if you've accidently imported 'styled-components' on React Native instead of 'styled-components/native', thanks to [@tazsingh](https://github.com/tazsingh) (see [#1391](https://github.com/styled-components/styled-components/pull/1391))
 
+- Remove trailing commas on function arguments (not compatible with ES5 JS engines)
+
 ## [v2.4.0] - 2017-12-22
 
 - remove some extra information from the generated hash that can differ between build environments ([see #1381](https://github.com/styled-components/styled-components/pull/1381))

src/constructors/constructWithOptions.js

@@ -5,7 +5,7 @@ export default (css: Function) => {
   const constructWithOptions = (
     componentConstructor: Function,
     tag: Target,
-    options: Object = {},
+    options: Object = {}
   ) => {
     if (
       process.env.NODE_ENV !== 'production' &&

src/constructors/keyframes.js

@@ -8,7 +8,7 @@ const replaceWhitespace = (str: string): string => str.replace(/\s|\\n/g, '')
 export default (
   nameGenerator: NameGenerator,
   stringifyRules: Stringifier,
-  css: Function,
+  css: Function
 ) => (
   strings: Array<string>,
   ...interpolations: Array<Interpolation>
@@ -28,7 +28,7 @@ export default (
     true,
     generatedCSS,
     hash,
-    name,
+    name
   )
   return name
 }

src/hoc/withTheme.js

@@ -46,7 +46,7 @@ const wrapWithTheme = (Component: ReactClass<any>) => {
       ) {
         // eslint-disable-next-line no-console
         console.warn(
-          '[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps',
+          '[withTheme] You are not using a ThemeProvider nor passing a theme prop or a theme in defaultProps'
         )
       } else if (styledContext === undefined && themeProp !== undefined) {
         this.setState({ theme: themeProp })

src/index.js

@@ -31,15 +31,15 @@ if (
   console.warn(
     "It looks like you've imported 'styled-components' on React Native.\n" +
       "Perhaps you're looking to import 'styled-components/native'?\n" +
-      'Read more about this at https://www.styled-components.com/docs/basics#react-native',
+      'Read more about this at https://www.styled-components.com/docs/basics#react-native'
   )
 }
 
 /* Instantiate singletons */
 const ComponentStyle = _ComponentStyle(
   generateAlphabeticName,
   flatten,
-  stringifyRules,
+  stringifyRules
 )
 const constructWithOptions = _constructWithOptions(css)
 const StyledComponent = _StyledComponent(ComponentStyle, constructWithOptions)

src/models/BrowserStyleSheet.js

@@ -67,7 +67,7 @@ class BrowserTag implements Tag {
 
     if (process.env.NODE_ENV !== 'production' && !comp) {
       throw new Error(
-        'Must add a new component before you can inject css into it',
+        'Must add a new component before you can inject css into it'
       )
     }
     if (comp.textNode.data === '') {
@@ -79,7 +79,7 @@ class BrowserTag implements Tag {
       const existingNames = this.el.getAttribute(SC_ATTR)
       this.el.setAttribute(
         SC_ATTR,
-        existingNames ? `${existingNames} ${name}` : name,
+        existingNames ? `${existingNames} ${name}` : name
       )
     }
 
@@ -145,11 +145,7 @@ export default {
       const el = nodes[i]
 
       tags.push(
-        new BrowserTag(
-          el,
-          el.getAttribute(LOCAL_ATTR) === 'true',
-          el.innerHTML,
-        ),
+        new BrowserTag(el, el.getAttribute(LOCAL_ATTR) === 'true', el.innerHTML)
       )
 
       const attr = el.getAttribute(SC_ATTR)

src/models/ComponentStyle.js

@@ -44,7 +44,7 @@ const isHRMEnabled =
 export default (
   nameGenerator: NameGenerator,
   flatten: Flattener,
-  stringifyRules: Stringifier,
+  stringifyRules: Stringifier
 ) => {
   class ComponentStyle {
     rules: RuleSet

src/models/InlineStyle.js

@@ -39,7 +39,7 @@ export default (styleSheet: StyleSheet) => {
           ) {
             /* eslint-disable no-console */
             console.warn(
-              `Node of type ${node.type} not supported as an inline style`,
+              `Node of type ${node.type} not supported as an inline style`
             )
           }
         })