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.
bhargav-kitchen · Dec 27, 2017 · 5742428 · 5742428
1 parent 4ed8b69
commit 5742428
Show file tree

Hide file tree

Showing 26 changed files with 64 additions and 65 deletions.
diff --git a/.eslintrc b/.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,

diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,5 @@
 {
   "semi": false,
   "singleQuote": true,
-  "trailingComma": "all"
+  "trailingComma": "es5"
 }
diff --git a/CHANGELOG.md b/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))

diff --git a/src/constructors/constructWithOptions.js b/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' &&

diff --git a/src/constructors/keyframes.js b/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
 }
diff --git a/src/hoc/withTheme.js b/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 })

diff --git a/src/index.js b/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)

diff --git a/src/models/BrowserStyleSheet.js b/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)

diff --git a/src/models/ComponentStyle.js b/src/models/ComponentStyle.js
@@ -44,7 +44,7 @@ const isHRMEnabled =
 export default (
   nameGenerator: NameGenerator,
   flatten: Flattener,
-  stringifyRules: Stringifier,
+  stringifyRules: Stringifier
 ) => {
   class ComponentStyle {
     rules: RuleSet

diff --git a/src/models/InlineStyle.js b/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`
             )
           }
         })

diff --git a/src/models/ServerStyleSheet.js b/src/models/ServerStyleSheet.js
@@ -34,7 +34,7 @@ class ServerTag implements Tag {
   concatenateCSS() {
     return Object.keys(this.components).reduce(
       (styles, k) => styles + this.components[k].css,
-      '',
+      ''
     )
   }
 
@@ -43,7 +43,7 @@ class ServerTag 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.css === '') comp.css = `/* sc-component-id: ${componentId} */\n`

diff --git a/src/models/StyleSheet.js b/src/models/StyleSheet.js
@@ -44,7 +44,7 @@ export default class StyleSheet {
   constructor(
     tagConstructor: boolean => Tag,
     tags: Array<Tag> = [],
-    names: { [string]: boolean } = {},
+    names: { [string]: boolean } = {}
   ) {
     this.tagConstructor = tagConstructor
     this.tags = tags
@@ -97,7 +97,7 @@ export default class StyleSheet {
     isLocal: boolean,
     css: string,
     hash: ?any,
-    name: ?string,
+    name: ?string
   ) {
     if (this === instance) {
       clones.forEach(clone => {
@@ -168,7 +168,7 @@ export default class StyleSheet {
     const newSheet = new StyleSheet(
       oldSheet.tagConstructor,
       oldSheet.tags.map(tag => tag.clone()),
-      { ...oldSheet.names },
+      { ...oldSheet.names }
     )
 
     newSheet.hashes = { ...oldSheet.hashes }

diff --git a/src/models/StyledComponent.js b/src/models/StyledComponent.js
@@ -41,7 +41,7 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
       identifiers[displayName] = nr
 
       componentId = `${displayName}-${ComponentStyle.generateName(
-        displayName + nr,
+        displayName + nr
       )}`
     } else {
       componentId = `${displayName}-${ComponentStyle.generateName(displayName)}`
@@ -98,13 +98,13 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
       if (componentStyle.isStatic && attrs === undefined) {
         return componentStyle.generateAndInjectStyles(
           STATIC_EXECUTION_CONTEXT,
-          styleSheet,
+          styleSheet
         )
       } else {
         const executionContext = this.buildExecutionContext(theme, props)
         const className = componentStyle.generateAndInjectStyles(
           executionContext,
-          styleSheet,
+          styleSheet
         )
 
         if (
@@ -127,7 +127,7 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
       if (componentStyle.isStatic) {
         const generatedClassName = this.generateAndInjectStyles(
           STATIC_EXECUTION_CONTEXT,
-          this.props,
+          this.props
         )
         this.setState({ generatedClassName })
         // If there is a theme in the context, subscribe to the event emitter. This
@@ -140,11 +140,11 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
           const theme = determineTheme(
             this.props,
             nextTheme,
-            this.constructor.defaultProps,
+            this.constructor.defaultProps
           )
           const generatedClassName = this.generateAndInjectStyles(
             theme,
-            this.props,
+            this.props
           )
 
           this.setState({ theme, generatedClassName })
@@ -154,7 +154,7 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
         const theme = this.props.theme || {}
         const generatedClassName = this.generateAndInjectStyles(
           theme,
-          this.props,
+          this.props
         )
         this.setState({ theme, generatedClassName })
       }
@@ -175,11 +175,11 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
         const theme = determineTheme(
           nextProps,
           oldState.theme,
-          this.constructor.defaultProps,
+          this.constructor.defaultProps
         )
         const generatedClassName = this.generateAndInjectStyles(
           theme,
-          nextProps,
+          nextProps
         )
 
         return { theme, generatedClassName }
@@ -234,7 +234,7 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
 
           return acc
         },
-        baseProps,
+        baseProps
       )
 
       return createElement(target, propsForElement)
@@ -244,7 +244,7 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
   const createStyledComponent = (
     target: Target,
     options: Object,
-    rules: RuleSet,
+    rules: RuleSet
   ) => {
     const {
       displayName = isTag(target)
@@ -264,7 +264,7 @@ export default (ComponentStyle: Function, constructWithOptions: Function) => {
     const componentStyle = new ComponentStyle(
       extendingRules === undefined ? rules : extendingRules.concat(rules),
       attrs,
-      styledComponentId,
+      styledComponentId
     )
 
     class StyledComponent extends ParentComponent {

diff --git a/src/models/StyledNativeComponent.js b/src/models/StyledNativeComponent.js
@@ -70,11 +70,11 @@ export default (constructWithOptions: Function, InlineStyle: Function) => {
           const theme = determineTheme(
             this.props,
             nextTheme,
-            this.constructor.defaultProps,
+            this.constructor.defaultProps
           )
           const generatedStyles = this.generateAndInjectStyles(
             theme,
-            this.props,
+            this.props
           )
 
           this.setState({ theme, generatedStyles })
@@ -95,7 +95,7 @@ export default (constructWithOptions: Function, InlineStyle: Function) => {
         const theme = determineTheme(
           nextProps,
           oldState.theme,
-          this.constructor.defaultProps,
+          this.constructor.defaultProps
         )
         const generatedStyles = this.generateAndInjectStyles(theme, nextProps)
 
@@ -118,7 +118,7 @@ export default (constructWithOptions: Function, InlineStyle: Function) => {
         console.warn(
           'setNativeProps was called on a Styled Component wrapping a stateless functional component. ' +
             'In this case no ref will be stored, and instead an innerRef prop will be passed on.\n' +
-            `Check whether the stateless functional component is passing on innerRef as a ref in ${displayName}.`,
+            `Check whether the stateless functional component is passing on innerRef as a ref in ${displayName}.`
         )
       }
     }
@@ -164,7 +164,7 @@ export default (constructWithOptions: Function, InlineStyle: Function) => {
   const createStyledNativeComponent = (
     target: Target,
     options: Object,
-    rules: RuleSet,
+    rules: RuleSet
   ) => {
     const {
       displayName = isTag(target)
@@ -176,7 +176,7 @@ export default (constructWithOptions: Function, InlineStyle: Function) => {
     } = options
 
     const inlineStyle = new InlineStyle(
-      extendingRules === undefined ? rules : extendingRules.concat(rules),
+      extendingRules === undefined ? rules : extendingRules.concat(rules)
     )
 
     class StyledNativeComponent extends ParentComponent {
@@ -224,7 +224,7 @@ export default (constructWithOptions: Function, InlineStyle: Function) => {
         return constructWithOptions(
           createStyledNativeComponent,
           target,
-          newOptions,
+          newOptions
         )
       }
     }

diff --git a/src/models/ThemeProvider.js b/src/models/ThemeProvider.js
@@ -28,7 +28,7 @@ if (process.env.NODE_ENV !== 'production') {
   warnChannelDeprecated = once(() => {
     // eslint-disable-next-line no-console
     console.error(
-      `Warning: Usage of \`context.${CHANNEL}\` as a function is deprecated. It will be replaced with the object on \`.context.${CHANNEL_NEXT}\` in a future version.`,
+      `Warning: Usage of \`context.${CHANNEL}\` as a function is deprecated. It will be replaced with the object on \`.context.${CHANNEL_NEXT}\` in a future version.`
     )
   })
 }
@@ -111,14 +111,14 @@ class ThemeProvider extends Component {
         !isPlainObject(mergedTheme)
       ) {
         throw new Error(
-          '[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!',
+          '[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',
+        '[ThemeProvider] Please make your theme prop a plain object'
       )
     }
     return { ...this.outerTheme, ...(theme: Object) }

diff --git a/src/native/index.js b/src/native/index.js
@@ -17,7 +17,7 @@ const constructWithOptions = _constructWithOptions(css)
 const InlineStyle = _InlineStyle(reactNative.StyleSheet)
 const StyledNativeComponent = _StyledNativeComponent(
   constructWithOptions,
-  InlineStyle,
+  InlineStyle
 )
 const styled = (tag: Target) => constructWithOptions(StyledNativeComponent, tag)
 
@@ -40,7 +40,7 @@ aliases.split(/\s+/m).forEach(alias =>
     get() {
       return styled(reactNative[alias])
     },
-  }),
+  })
 )
 
 export { css, ThemeProvider, withTheme }