From c52a37e402aa654716df721beecaccd91103dcee Mon Sep 17 00:00:00 2001
From: Joachim Seminck <joachim.seminck@zeroturnaround.com>
Date: Mon, 11 Sep 2017 10:23:38 +0300
Subject: [PATCH 1/6] Rewrite no-color-literals to use template literal syntax

---
 tests/lib/rules/no-color-literals.js | 219 +++++++++++++--------------
 1 file changed, 109 insertions(+), 110 deletions(-)

diff --git a/tests/lib/rules/no-color-literals.js b/tests/lib/rules/no-color-literals.js
index 4a4e452..5017639 100644
--- a/tests/lib/rules/no-color-literals.js
+++ b/tests/lib/rules/no-color-literals.js
@@ -23,147 +23,146 @@ const ruleTester = new RuleTester();
 const tests = {
   valid: [
     {
-      code: [
-        'const $red = \'red\'',
-        'const $blue = \'blue\'',
-        'const styles = StyleSheet.create({',
-        '    style1: {',
-        '        color: $red,',
-        '    },',
-        '    style2: {',
-        '        color: $blue,',
-        '    }',
-        '});',
-        'export default class MyComponent extends Component {',
-        '    render() {',
-        '        const isDanger = true;',
-        '        return <View ',
-        '                   style={[styles.style1, isDanger ? styles.style1 : styles.style2]}',
-        '               />;',
-        '    }',
-        '}',
-      ].join('\n'),
+      code: `
+        const $red = 'red'
+        const $blue = 'blue'
+        const styles = StyleSheet.create({
+            style1: {
+                color: $red,
+            },
+            style2: {
+                color: $blue,
+            }
+        });
+        export default class MyComponent extends Component {
+            render() {
+                const isDanger = true;
+                return <View 
+                           style={[styles.style1, isDanger ? styles.style1 : styles.style2]}
+                       />;
+            }
+        }
+      `,
     },
     {
-      code: [
-        'const styles = StyleSheet.create({',
-        '    style1: {',
-        '        color: $red,',
-        '    },',
-        '    style2: {',
-        '        color: $blue,',
-        '    }',
-        '});',
-        'export default class MyComponent extends Component {',
-        '    render() {',
-        '        const trueColor = \'#fff\';',
-        '        const falseColor = \'#000\' ',
-        '        return <View ',
-        '           style={[style1, ',
-        '                   this.state.isDanger && {color: falseColor}, ',
-        '                   {color: someBoolean ? trueColor : falseColor }]} ',
-        '                />;',
-        '    }',
-        '}',
-      ].join('\n'),
+      code: `
+        const styles = StyleSheet.create({
+            style1: {
+                color: $red,
+            },
+            style2: {
+                color: $blue,
+            }
+        });
+        export default class MyComponent extends Component {
+            render() {
+                const trueColor = '#fff';
+                const falseColor = '#000' 
+                return <View 
+                   style={[style1, 
+                           this.state.isDanger && {color: falseColor}, 
+                           {color: someBoolean ? trueColor : falseColor }]} 
+                        />;
+            }
+        }
+      `,
     },
   ],
   invalid: [
     {
-      code: [
-        'const Hello = React.createClass({',
-        '  render: function() {',
-        '    return <Text style={{backgroundColor: \'#FFFFFF\', opacity: 0.5}}>',
-        '      Hello {this.props.name}',
-        '     </Text>;',
-        '  }',
-        '});',
-      ].join('\n'),
+      code: `
+        const Hello = React.createClass({
+          render: function() {
+            return <Text style={{backgroundColor: '#FFFFFF', opacity: 0.5}}>
+              Hello {this.props.name}
+             </Text>;
+          }
+        });
+      `,
       errors: [{
         message: 'Color literal: { backgroundColor: \'#FFFFFF\' }',
       }],
     },
     {
-      code: [
-        'const Hello = React.createClass({',
-        '  render: function() {',
-        '    return <Text style={{backgroundColor: \'#FFFFFF\', opacity: this.state.opacity}}>',
-        '      Hello {this.props.name}',
-        '     </Text>;',
-        '  }',
-        '});',
-      ].join('\n'),
+      code: `
+        const Hello = React.createClass({
+          render: function() {
+            return <Text style={{backgroundColor: '#FFFFFF', opacity: this.state.opacity}}>
+              Hello {this.props.name}
+             </Text>;
+          }
+        });
+      `,
       errors: [{
         message: 'Color literal: { backgroundColor: \'#FFFFFF\' }',
       }],
     },
     {
-      code: [
-        'const styles = StyleSheet.create({',
-        '  text: {fontColor: \'#000\'}',
-        '})',
-        'const Hello = React.createClass({',
-        '  render: function() {',
-        '    return <Text style={{opacity: this.state.opacity, height: 12, fontColor: styles.text}}>', //eslint-disable-line
-        '      Hello {this.props.name}',
-        '     </Text>;',
-        '  }',
-        '});',
-      ].join('\n'),
+      code: `
+        const styles = StyleSheet.create({
+          text: {fontColor: '#000'}
+        })
+        const Hello = React.createClass({
+          render: function() {
+            return <Text style={{opacity: this.state.opacity, height: 12, fontColor: styles.text}}>
+              Hello {this.props.name}
+             </Text>;
+          }
+        });
+      `,
       errors: [{
         message: 'Color literal: { fontColor: \'#000\' }',
       }],
     },
     {
-      code: [
-        'const Hello = React.createClass({',
-        '  render: function() {',
-        '    return <Text style={[styles.text, {backgroundColor: \'#FFFFFF\'}]}>',
-        '      Hello {this.props.name}',
-        '     </Text>;',
-        '  }',
-        '});',
-      ].join('\n'),
+      code: `
+        const Hello = React.createClass({
+          render: function() {
+            return <Text style={[styles.text, {backgroundColor: '#FFFFFF'}]}>
+              Hello {this.props.name}
+             </Text>;
+          }
+        });
+      `,
       errors: [{
         message: 'Color literal: { backgroundColor: \'#FFFFFF\' }',
       }],
     },
     {
-      code: [
-        'const Hello = React.createClass({',
-        '  render: function() {',
-        '    const someBoolean = false; ',
-        '    return <Text style={[styles.text, someBoolean && {backgroundColor: \'#FFFFFF\'}]}>',
-        '      Hello {this.props.name}',
-        '     </Text>;',
-        '  }',
-        '});',
-      ].join('\n'),
+      code: `
+        const Hello = React.createClass({
+          render: function() {
+            const someBoolean = false; 
+            return <Text style={[styles.text, someBoolean && {backgroundColor: '#FFFFFF'}]}>
+              Hello {this.props.name}
+             </Text>;
+          }
+        });
+      `,
       errors: [{
         message: 'Color literal: { backgroundColor: \'#FFFFFF\' }',
       }],
     },
     {
-      code: [
-        'const styles = StyleSheet.create({',
-        '    style1: {',
-        '        color: \'red\',',
-        '    },',
-        // this is illegal even though it's not used anywhere
-        '    style2: {',
-        '        borderBottomColor: \'blue\',',
-        '    }',
-        '});',
-        'export default class MyComponent extends Component {',
-        '    render() {',
-        '        return <View ',
-        '           style={[style1, ',
-        '                   this.state.isDanger && styles.style1, ',
-        '                   {backgroundColor: someBoolean ? \'#fff\' : \'#000\'}]} ',
-        '                />;',
-        '    }',
-        '}',
-      ].join('\n'),
+      code: `
+        const styles = StyleSheet.create({
+            style1: {
+                color: 'red',
+            },
+            style2: {
+                borderBottomColor: 'blue',
+            }
+        });
+        export default class MyComponent extends Component {
+            render() {
+                return <View 
+                   style={[style1, 
+                           this.state.isDanger && styles.style1, 
+                           {backgroundColor: someBoolean ? '#fff' : '#000'}]} 
+                        />;
+            }
+        }
+      `,
       errors: [
         {
           message: 'Color literal: { color: \'red\' }',

From 50862a5b99fb41a939d913679cdbe541958e90bc Mon Sep 17 00:00:00 2001
From: Joachim Seminck <joachim.seminck@zeroturnaround.com>
Date: Mon, 11 Sep 2017 10:23:53 +0300
Subject: [PATCH 2/6] Rewrite no-inline-styles to use template literal syntax

---
 tests/lib/rules/no-inline-styles.js | 224 ++++++++++++++--------------
 1 file changed, 112 insertions(+), 112 deletions(-)

diff --git a/tests/lib/rules/no-inline-styles.js b/tests/lib/rules/no-inline-styles.js
index 8109832..0561545 100644
--- a/tests/lib/rules/no-inline-styles.js
+++ b/tests/lib/rules/no-inline-styles.js
@@ -25,154 +25,154 @@ const tests = {
 
   valid: [
     {
-      code: [
-        'const styles = StyleSheet.create({',
-        '    style1: {',
-        '        color: \'red\',',
-        '    },',
-        '    style2: {',
-        '        color: \'blue\',',
-        '    }',
-        '});',
-        'export default class MyComponent extends Component {',
-        '    static propTypes = {',
-        '        isDanger: PropTypes.bool',
-        '    };',
-        '    render() {',
-        '        return <View style={this.props.isDanger ? styles.style1 : styles.style2} />;',
-        '    }',
-        '}',
-      ].join('\n'),
+      code: `
+        const styles = StyleSheet.create({
+            style1: {
+                color: 'red',
+            },
+            style2: {
+                color: 'blue',
+            }
+        });
+        export default class MyComponent extends Component {
+            static propTypes = {
+                isDanger: PropTypes.bool
+            };
+            render() {
+                return <View style={this.props.isDanger ? styles.style1 : styles.style2} />;
+            }
+        }
+      `,
     },
     {
-      code: [
-        'const styles = StyleSheet.create({',
-        '    style1: {',
-        '        color: \'red\',',
-        '    },',
-        '    style2: {',
-        '        color: \'blue\',',
-        '    }',
-        '});',
-        'export default class MyComponent extends Component {',
-        '    render() {',
-        '        const trueColor = \'#fff\'; const falseColor = \'#000\' ',
-        '        return <View ',
-        '           style={[style1, ',
-        '                   this.state.isDanger && styles.style1, ',
-        '                   {color: someBoolean ? trueColor : falseColor }]} ',
-        '                />;',
-        '    }',
-        '}',
-      ].join('\n'),
+      code: `
+        const styles = StyleSheet.create({
+            style1: {
+                color: 'red',
+            },
+            style2: {
+                color: 'blue',
+            }
+        });
+        export default class MyComponent extends Component {
+            render() {
+                const trueColor = '#fff'; const falseColor = '#000' 
+                return <View 
+                   style={[style1, 
+                           this.state.isDanger && styles.style1, 
+                           {color: someBoolean ? trueColor : falseColor }]} 
+                        />;
+            }
+        }
+      `,
     },
   ],
   invalid: [
     {
-      code: [
-        'const Hello = React.createClass({',
-        '  render: function() {',
-        '    return <Text style={{backgroundColor: \'#FFFFFF\', opacity: 0.5}}>',
-        '      Hello {this.props.name}',
-        '     </Text>;',
-        '  }',
-        '});',
-      ].join('\n'),
+      code: `
+        const Hello = React.createClass({
+          render: function() {
+            return <Text style={{backgroundColor: '#FFFFFF', opacity: 0.5}}>
+              Hello {this.props.name}
+             </Text>;
+          }
+        });
+      `,
       errors: [{
         message: 'Inline style: { backgroundColor: \'#FFFFFF\', opacity: 0.5 }',
       }],
     },
     {
-      code: [
-        'const Hello = React.createClass({',
-        '  render: function() {',
-        '    return <Text style={{backgroundColor: \'#FFFFFF\', opacity: this.state.opacity}}>',
-        '      Hello {this.props.name}',
-        '     </Text>;',
-        '  }',
-        '});',
-      ].join('\n'),
+      code: `
+        const Hello = React.createClass({
+          render: function() {
+            return <Text style={{backgroundColor: '#FFFFFF', opacity: this.state.opacity}}>
+              Hello {this.props.name}
+             </Text>;
+          }
+        });
+      `,
       errors: [{
         message: 'Inline style: { backgroundColor: \'#FFFFFF\' }',
       }],
     },
     {
-      code: [
-        'const Hello = React.createClass({',
-        '  render: function() {',
-        '    return <Text style={{opacity: this.state.opacity, height: 12}}>',
-        '      Hello {this.props.name}',
-        '     </Text>;',
-        '  }',
-        '});',
-      ].join('\n'),
+      code: `
+        const Hello = React.createClass({
+          render: function() {
+            return <Text style={{opacity: this.state.opacity, height: 12}}>
+              Hello {this.props.name}
+             </Text>;
+          }
+        });
+      `,
       errors: [{
         message: 'Inline style: { height: 12 }',
       }],
     },
     {
-      code: [
-        'const Hello = React.createClass({',
-        '  render: function() {',
-        '    return <Text style={{marginLeft: -7, height: +12}}>',
-        '      Hello {this.props.name}',
-        '     </Text>;',
-        '  }',
-        '});',
-      ].join('\n'),
+      code: `
+        const Hello = React.createClass({
+          render: function() {
+            return <Text style={{marginLeft: -7, height: +12}}>
+              Hello {this.props.name}
+             </Text>;
+          }
+        });
+      `,
       errors: [{
         message: 'Inline style: { marginLeft: -7, height: 12 }',
       }],
     },
     {
-      code: [
-        'const Hello = React.createClass({',
-        '  render: function() {',
-        '    return <Text style={[styles.text, {backgroundColor: \'#FFFFFF\'}]}>',
-        '      Hello {this.props.name}',
-        '     </Text>;',
-        '  }',
-        '});',
-      ].join('\n'),
+      code: `
+        const Hello = React.createClass({
+          render: function() {
+            return <Text style={[styles.text, {backgroundColor: '#FFFFFF'}]}>
+              Hello {this.props.name}
+             </Text>;
+          }
+        });
+      `,
       errors: [{
         message: 'Inline style: { backgroundColor: \'#FFFFFF\' }',
       }],
     },
     {
-      code: [
-        'const Hello = React.createClass({',
-        '  render: function() {',
-        '    const someBoolean = false; ',
-        '    return <Text style={[styles.text, someBoolean && {backgroundColor: \'#FFFFFF\'}]}>',
-        '      Hello {this.props.name}',
-        '     </Text>;',
-        '  }',
-        '});',
-      ].join('\n'),
+      code: `
+        const Hello = React.createClass({
+          render: function() {
+            const someBoolean = false; 
+            return <Text style={[styles.text, someBoolean && {backgroundColor: '#FFFFFF'}]}>
+              Hello {this.props.name}
+             </Text>;
+          }
+        });
+      `,
       errors: [{
         message: 'Inline style: { backgroundColor: \'#FFFFFF\' }',
       }],
     },
     {
-      code: [
-        'const styles = StyleSheet.create({',
-        '    style1: {',
-        '        color: \'red\',',
-        '    },',
-        '    style2: {',
-        '        color: \'blue\',',
-        '    }',
-        '});',
-        'export default class MyComponent extends Component {',
-        '    render() {',
-        '        return <View ',
-        '           style={[style1, ',
-        '                   this.state.isDanger && styles.style1, ',
-        '                   {backgroundColor: someBoolean ? \'#fff\' : \'#000\'}]} ',
-        '                />;',
-        '    }',
-        '}',
-      ].join('\n'),
+      code: `
+        const styles = StyleSheet.create({
+            style1: {
+                color: 'red',
+            },
+            style2: {
+                color: 'blue',
+            }
+        });
+        export default class MyComponent extends Component {
+            render() {
+                return <View 
+                   style={[style1, 
+                           this.state.isDanger && styles.style1, 
+                           {backgroundColor: someBoolean ? '#fff' : '#000'}]} 
+                        />;
+            }
+        }
+      `,
       errors: [{
         message: 'Inline style: { backgroundColor: \'someBoolean ? \\\'#fff\\\' : \\\'#000\\\'\' }', //eslint-disable-line
       }],

From ee2d4e5202567477c280a8c27da9e19541cfc596 Mon Sep 17 00:00:00 2001
From: Joachim Seminck <joachim.seminck@zeroturnaround.com>
Date: Mon, 11 Sep 2017 10:24:03 +0300
Subject: [PATCH 3/6] Rewrite no-unused-styles to use template literal syntax

---
 tests/lib/rules/no-unused-styles.js | 408 ++++++++++++++--------------
 1 file changed, 204 insertions(+), 204 deletions(-)

diff --git a/tests/lib/rules/no-unused-styles.js b/tests/lib/rules/no-unused-styles.js
index 1b2a80c..15904bf 100644
--- a/tests/lib/rules/no-unused-styles.js
+++ b/tests/lib/rules/no-unused-styles.js
@@ -21,232 +21,232 @@ require('babel-eslint');
 const ruleTester = new RuleTester();
 const tests = {
   valid: [{
-    code: [
-      'const styles = StyleSheet.create({',
-      '  name: {}',
-      '});',
-      'const Hello = React.createClass({',
-      '  render: function() {',
-      '    return <Text textStyle={styles.name}>Hello {this.props.name}</Text>;',
-      '  }',
-      '});',
-    ].join('\n'),
+    code: `
+      const styles = StyleSheet.create({
+        name: {}
+      });
+      const Hello = React.createClass({
+        render: function() {
+          return <Text textStyle={styles.name}>Hello {this.props.name}</Text>;
+        }
+      });
+    `,
   }, {
-    code: [
-      'const Hello = React.createClass({',
-      '  render: function() {',
-      '    return <Text textStyle={styles.name}>Hello {this.props.name}</Text>;',
-      '  }',
-      '});',
-      'const styles = StyleSheet.create({',
-      '  name: {}',
-      '});',
-    ].join('\n'),
+    code: `
+      const Hello = React.createClass({
+        render: function() {
+          return <Text textStyle={styles.name}>Hello {this.props.name}</Text>;
+        }
+      });
+      const styles = StyleSheet.create({
+        name: {}
+      });
+    `,
   }, {
-    code: [
-      'const styles = StyleSheet.create({',
-      '  name: {}',
-      '});',
-      'const Hello = React.createClass({',
-      '  render: function() {',
-      '    return <Text style={styles.name}>Hello {this.props.name}</Text>;',
-      '  }',
-      '});',
-    ].join('\n'),
+    code: `
+      const styles = StyleSheet.create({
+        name: {}
+      });
+      const Hello = React.createClass({
+        render: function() {
+          return <Text style={styles.name}>Hello {this.props.name}</Text>;
+        }
+      });
+    `,
   }, {
-    code: [
-      'const styles = StyleSheet.create({',
-      '  name: {},',
-      '  welcome: {}',
-      '});',
-      'const Hello = React.createClass({',
-      '  render: function() {',
-      '    return <Text style={styles.name}>Hello {this.props.name}</Text>;',
-      '  }',
-      '});',
-      'const Welcome = React.createClass({',
-      '  render: function() {',
-      '    return <Text style={styles.welcome}>Welcome</Text>;',
-      '  }',
-      '});',
-    ].join('\n'),
+    code: `
+      const styles = StyleSheet.create({
+        name: {},
+        welcome: {}
+      });
+      const Hello = React.createClass({
+        render: function() {
+          return <Text style={styles.name}>Hello {this.props.name}</Text>;
+        }
+      });
+      const Welcome = React.createClass({
+        render: function() {
+          return <Text style={styles.welcome}>Welcome</Text>;
+        }
+      });
+    `,
   }, {
-    code: [
-      'const styles = StyleSheet.create({',
-      '  text: {}',
-      '})',
-      'const Hello = React.createClass({',
-      '  propTypes: {',
-      '    textStyle: Text.propTypes.style,',
-      '  },',
-      '  render: function() {',
-      '    return <Text style={[styles.text, textStyle]}>Hello {this.props.name}</Text>;',
-      '  }',
-      '});',
-    ].join('\n'),
+    code: `
+      const styles = StyleSheet.create({
+        text: {}
+      })
+      const Hello = React.createClass({
+        propTypes: {
+          textStyle: Text.propTypes.style,
+        },
+        render: function() {
+          return <Text style={[styles.text, textStyle]}>Hello {this.props.name}</Text>;
+        }
+      });
+    `,
   }, {
-    code: [
-      'const styles = StyleSheet.create({',
-      '  text: {}',
-      '})',
-      'const styles2 = StyleSheet.create({',
-      '  text: {}',
-      '})',
-      'const Hello = React.createClass({',
-      '  propTypes: {',
-      '    textStyle: Text.propTypes.style,',
-      '  },',
-      '  render: function() {',
-      '    return (',
-      '      <Text style={[styles.text, styles2.text, textStyle]}>',
-      '       Hello {this.props.name}',
-      '      </Text>',
-      '     );',
-      '  }',
-      '});',
-    ].join('\n'),
+    code: `
+      const styles = StyleSheet.create({
+        text: {}
+      })
+      const styles2 = StyleSheet.create({
+        text: {}
+      })
+      const Hello = React.createClass({
+        propTypes: {
+          textStyle: Text.propTypes.style,
+        },
+        render: function() {
+          return (
+            <Text style={[styles.text, styles2.text, textStyle]}>
+             Hello {this.props.name}
+            </Text>
+           );
+        }
+      });
+    `,
   }, {
-    code: [
-      'const styles = StyleSheet.create({',
-      '  text: {}',
-      '});',
-      'const Hello = React.createClass({',
-      '  getInitialState: function() {',
-      '    return { condition: true, condition2: true }; ',
-      '  },',
-      '  render: function() {',
-      '    return (',
-      '      <Text',
-      '        style={[',
-      '          this.state.condition &&',
-      '          this.state.condition2 &&',
-      '          styles.text]}>',
-      '        Hello {this.props.name}',
-      '      </Text>',
-      '    );',
-      '  }',
-      '});',
-    ].join('\n'),
+    code: `
+      const styles = StyleSheet.create({
+        text: {}
+      });
+      const Hello = React.createClass({
+        getInitialState: function() {
+          return { condition: true, condition2: true }; 
+        },
+        render: function() {
+          return (
+            <Text
+              style={[
+                this.state.condition &&
+                this.state.condition2 &&
+                styles.text]}>
+              Hello {this.props.name}
+            </Text>
+          );
+        }
+      });
+    `,
   }, {
-    code: [
-      'const styles = StyleSheet.create({',
-      '  text: {},',
-      '  text2: {},',
-      '});',
-      'const Hello = React.createClass({',
-      '  getInitialState: function() {',
-      '    return { condition: true }; ',
-      '  },',
-      '  render: function() {',
-      '    return (',
-      '      <Text style={[this.state.condition ? styles.text : styles.text2]}>',
-      '        Hello {this.props.name}',
-      '      </Text>',
-      '    );',
-      '  }',
-      '});',
-    ].join('\n'),
+    code: `
+      const styles = StyleSheet.create({
+        text: {},
+        text2: {},
+      });
+      const Hello = React.createClass({
+        getInitialState: function() {
+          return { condition: true }; 
+        },
+        render: function() {
+          return (
+            <Text style={[this.state.condition ? styles.text : styles.text2]}>
+              Hello {this.props.name}
+            </Text>
+          );
+        }
+      });
+    `,
   }, {
-    code: [
-      'const styles = StyleSheet.create({',
-      '    style1: {',
-      '        color: \'red\',',
-      '    },',
-      '    style2: {',
-      '        color: \'blue\',',
-      '    }',
-      '});',
-      'export default class MyComponent extends Component {',
-      '    static propTypes = {',
-      '        isDanger: PropTypes.bool',
-      '    };',
-      '    render() {',
-      '        return <View style={this.props.isDanger ? styles.style1 : styles.style2} />;',
-      '    }',
-      '}',
-    ].join('\n'),
+    code: `
+      const styles = StyleSheet.create({
+          style1: {
+              color: 'red',
+          },
+          style2: {
+              color: 'blue',
+          }
+      });
+      export default class MyComponent extends Component {
+          static propTypes = {
+              isDanger: PropTypes.bool
+          };
+          render() {
+              return <View style={this.props.isDanger ? styles.style1 : styles.style2} />;
+          }
+      }
+    `,
   }, {
-    code: [
-      'const styles = StyleSheet.create({',
-      '  text: {}',
-      '})',
-    ].join('\n'),
+    code: `
+      const styles = StyleSheet.create({
+        text: {}
+      })
+    `,
   }, {
-    code: [
-      'const Hello = React.createClass({',
-      '  getInitialState: function() {',
-      '    return { condition: true }; ',
-      '  },',
-      '  render: function() {',
-      '    const myStyle = this.state.condition ? styles.text : styles.text2;',
-      '    return (',
-      '        <Text style={myStyle}>',
-      '            Hello {this.props.name}',
-      '        </Text>',
-      '    );',
-      '  }',
-      '});',
-      'const styles = StyleSheet.create({',
-      '  text: {},',
-      '  text2: {},',
-      '});',
-    ].join('\n'),
+    code: `
+      const Hello = React.createClass({
+        getInitialState: function() {
+          return { condition: true }; 
+        },
+        render: function() {
+          const myStyle = this.state.condition ? styles.text : styles.text2;
+          return (
+              <Text style={myStyle}>
+                  Hello {this.props.name}
+              </Text>
+          );
+        }
+      });
+      const styles = StyleSheet.create({
+        text: {},
+        text2: {},
+      });
+    `,
   }, {
-    code: [
-      'const additionalStyles = {};',
-      'const styles = StyleSheet.create({',
-      '  name: {},',
-      '  ...additionalStyles',
-      '});',
-      'const Hello = React.createClass({',
-      '  render: function() {',
-      '    return <Text textStyle={styles.name}>Hello {this.props.name}</Text>;',
-      '  }',
-      '});',
-    ].join('\n'),
+    code: `
+      const additionalStyles = {};
+      const styles = StyleSheet.create({
+        name: {},
+        ...additionalStyles
+      });
+      const Hello = React.createClass({
+        render: function() {
+          return <Text textStyle={styles.name}>Hello {this.props.name}</Text>;
+        }
+      });
+    `,
   }],
 
   invalid: [{
-    code: [
-      'const styles = StyleSheet.create({',
-      '  text: {}',
-      '})',
-      'const Hello = React.createClass({',
-      '  render: function() {',
-      '    return <Text style={styles.b}>Hello {this.props.name}</Text>;',
-      '  }',
-      '});',
-    ].join('\n'),
+    code: `
+      const styles = StyleSheet.create({
+        text: {}
+      })
+      const Hello = React.createClass({
+        render: function() {
+          return <Text style={styles.b}>Hello {this.props.name}</Text>;
+        }
+      });
+    `,
     errors: [{
       message: 'Unused style detected: styles.text',
     }],
   }, {
-    code: [
-      'const styles = StyleSheet.create({',
-      '  foo: {},',
-      '  bar: {},',
-      '})',
-      'class Foo extends React.Component {',
-      '  render() {',
-      '    return <View style={styles.foo}/>;',
-      '  }',
-      '}',
-    ].join('\n'),
+    code: `
+      const styles = StyleSheet.create({
+        foo: {},
+        bar: {},
+      })
+      class Foo extends React.Component {
+        render() {
+          return <View style={styles.foo}/>;
+        }
+      }
+    `,
     errors: [{
       message: 'Unused style detected: styles.bar',
     }],
   }, {
-    code: [
-      'const styles = StyleSheet.create({',
-      '  foo: {},',
-      '  bar: {},',
-      '})',
-      'class Foo extends React.PureComponent {',
-      '  render() {',
-      '    return <View style={styles.foo}/>;',
-      '  }',
-      '}',
-    ].join('\n'),
+    code: `
+      const styles = StyleSheet.create({
+        foo: {},
+        bar: {},
+      })
+      class Foo extends React.PureComponent {
+        render() {
+          return <View style={styles.foo}/>;
+        }
+      }
+    `,
     errors: [{
       message: 'Unused style detected: styles.bar',
     }],

From 49692e0b144be7e6b6fcfa04c09365dccda6da16 Mon Sep 17 00:00:00 2001
From: Joachim Seminck <joachim.seminck@zeroturnaround.com>
Date: Mon, 11 Sep 2017 10:24:19 +0300
Subject: [PATCH 4/6] Rewrite split-platform-components to use template literal
 syntax

---
 tests/lib/rules/split-platform-components.js | 240 +++++++++----------
 1 file changed, 120 insertions(+), 120 deletions(-)

diff --git a/tests/lib/rules/split-platform-components.js b/tests/lib/rules/split-platform-components.js
index 49f8c14..a1b6cb7 100644
--- a/tests/lib/rules/split-platform-components.js
+++ b/tests/lib/rules/split-platform-components.js
@@ -22,93 +22,93 @@ require('babel-eslint');
 const ruleTester = new RuleTester();
 const tests = {
   valid: [{
-    code: [
-      'const React = require(\'react-native\');',
-      'const {',
-      '  ActivityIndicatiorIOS,',
-      '} = React',
-      'const Hello = React.createClass({',
-      '  render: function() {',
-      '    return <ActivityIndicatiorIOS />;',
-      '  }',
-      '});',
-    ].join('\n'),
+    code: `
+      const React = require('react-native');
+      const {
+        ActivityIndicatiorIOS,
+      } = React
+      const Hello = React.createClass({
+        render: function() {
+          return <ActivityIndicatiorIOS />;
+        }
+      });
+    `,
     filename: 'Hello.ios.js',
   }, {
-    code: [
-      'const React = require(\'react-native\');',
-      'const {',
-      '  ProgressBarAndroid,',
-      '} = React',
-      'const Hello = React.createClass({',
-      '  render: function() {',
-      '    return <ProgressBarAndroid />;',
-      '  }',
-      '});',
-    ].join('\n'),
+    code: `
+      const React = require('react-native');
+      const {
+        ProgressBarAndroid,
+      } = React
+      const Hello = React.createClass({
+        render: function() {
+          return <ProgressBarAndroid />;
+        }
+      });
+    `,
     filename: 'Hello.android.js',
   }, {
-    code: [
-      'const React = require(\'react-native\');',
-      'const {',
-      '  View,',
-      '} = React',
-      'const Hello = React.createClass({',
-      '  render: function() {',
-      '    return <View />;',
-      '  }',
-      '});',
-    ].join('\n'),
+    code: `
+      const React = require('react-native');
+      const {
+        View,
+      } = React
+      const Hello = React.createClass({
+        render: function() {
+          return <View />;
+        }
+      });
+    `,
     filename: 'Hello.js',
   }, {
-    code: [
-      'import {',
-      '  ActivityIndicatiorIOS,',
-      '} from \'react-native\'',
-    ].join('\n'),
+    code: `
+      import {
+        ActivityIndicatiorIOS,
+      } from 'react-native'
+    `,
     filename: 'Hello.ios.js',
   }, {
-    code: [
-      'import {',
-      '  ProgressBarAndroid,',
-      '} from \'react-native\'',
-    ].join('\n'),
+    code: `
+      import {
+        ProgressBarAndroid,
+      } from 'react-native'
+    `,
     filename: 'Hello.android.js',
   }, {
-    code: [
-      'import {',
-      '  View,',
-      '} from \'react-native\'',
-    ].join('\n'),
+    code: `
+      import {
+        View,
+      } from 'react-native'
+    `,
     filename: 'Hello.js',
   }, {
-    code: [
-      'const React = require(\'react-native\');',
-      'const {',
-      '  ActivityIndicatiorIOS,',
-      '} = React',
-      'const Hello = React.createClass({',
-      '  render: function() {',
-      '    return <ActivityIndicatiorIOS />;',
-      '  }',
-      '});',
-    ].join('\n'),
+    code: `
+      const React = require('react-native');
+      const {
+        ActivityIndicatiorIOS,
+      } = React
+      const Hello = React.createClass({
+        render: function() {
+          return <ActivityIndicatiorIOS />;
+        }
+      });
+    `,
     options: [{
       iosPathRegex: '\\.ios(\\.test)?\\.js$',
     }],
     filename: 'Hello.ios.test.js',
   }, {
-    code: [
-      'const React = require(\'react-native\');',
-      'const {',
-      '  ProgressBarAndroid,',
-      '} = React',
-      'const Hello = React.createClass({',
-      '  render: function() {',
-      '    return <ProgressBarAndroid />;',
-      '  }',
-      '});',
-    ].join('\n'),
+    code: `
+      const React = require('react-native');
+      const {
+        ProgressBarAndroid,
+      } = React
+      const Hello = React.createClass({
+        render: function() {
+          return <ProgressBarAndroid />;
+        }
+      });
+    `,
     options: [{
       androidPathRegex: '\\.android(\\.test)?\\.js$',
     }],
@@ -116,50 +116,50 @@ const tests = {
   }],
 
   invalid: [{
-    code: [
-      'const React = require(\'react-native\');',
-      'const {',
-      '  ProgressBarAndroid,',
-      '} = React',
-      'const Hello = React.createClass({',
-      '  render: function() {',
-      '    return <ProgressBarAndroid />;',
-      '  }',
-      '});',
-    ].join('\n'),
+    code: `
+      const React = require('react-native');
+      const {
+        ProgressBarAndroid,
+      } = React
+      const Hello = React.createClass({
+        render: function() {
+          return <ProgressBarAndroid />;
+        }
+      });
+    `,
     filename: 'Hello.js',
     errors: [{
       message: 'Android components should be placed in android files',
     }],
   }, {
-    code: [
-      'const React = require(\'react-native\');',
-      'const {',
-      '  ActivityIndicatiorIOS,',
-      '} = React',
-      'const Hello = React.createClass({',
-      '  render: function() {',
-      '    return <ActivityIndicatiorIOS />;',
-      '  }',
-      '});',
-    ].join('\n'),
+    code: `
+      const React = require('react-native');
+      const {
+        ActivityIndicatiorIOS,
+      } = React
+      const Hello = React.createClass({
+        render: function() {
+          return <ActivityIndicatiorIOS />;
+        }
+      });
+    `,
     filename: 'Hello.js',
     errors: [{
       message: 'IOS components should be placed in ios files',
     }],
   }, {
-    code: [
-      'const React = require(\'react-native\');',
-      'const {',
-      '  ActivityIndicatiorIOS,',
-      '  ProgressBarAndroid,',
-      '} = React',
-      'const Hello = React.createClass({',
-      '  render: function() {',
-      '    return <ActivityIndicatiorIOS />;',
-      '  }',
-      '});',
-    ].join('\n'),
+    code: `
+      const React = require('react-native');
+      const {
+        ActivityIndicatiorIOS,
+        ProgressBarAndroid,
+      } = React
+      const Hello = React.createClass({
+        render: function() {
+          return <ActivityIndicatiorIOS />;
+        }
+      });
+    `,
     filename: 'Hello.js',
     errors: [{
       message: 'IOS and Android components can\'t be mixed',
@@ -167,32 +167,32 @@ const tests = {
       message: 'IOS and Android components can\'t be mixed',
     }],
   }, {
-    code: [
-      'import {',
-      '  ProgressBarAndroid,',
-      '} from \'react-native\'',
-    ].join('\n'),
+    code: `
+      import {
+        ProgressBarAndroid,
+      } from 'react-native'
+    `,
     filename: 'Hello.js',
     errors: [{
       message: 'Android components should be placed in android files',
     }],
   }, {
-    code: [
-      'import {',
-      '  ActivityIndicatiorIOS,',
-      '} from \'react-native\'',
-    ].join('\n'),
+    code: `
+      import {
+        ActivityIndicatiorIOS,
+      } from 'react-native'
+    `,
     filename: 'Hello.js',
     errors: [{
       message: 'IOS components should be placed in ios files',
     }],
   }, {
-    code: [
-      'import {',
-      '  ActivityIndicatiorIOS,',
-      '  ProgressBarAndroid,',
-      '} from \'react-native\'',
-    ].join('\n'),
+    code: `
+      import {
+        ActivityIndicatiorIOS,
+        ProgressBarAndroid,
+      } from 'react-native'
+    `,
     filename: 'Hello.js',
     errors: [{
       message: 'IOS and Android components can\'t be mixed',

From 70c3883f5f40bb156ac79d7d90045a92c6912407 Mon Sep 17 00:00:00 2001
From: Joachim Seminck <joachim.seminck@zeroturnaround.com>
Date: Mon, 11 Sep 2017 12:13:04 +0300
Subject: [PATCH 5/6] Re-add comment

---
 tests/lib/rules/no-color-literals.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/lib/rules/no-color-literals.js b/tests/lib/rules/no-color-literals.js
index 5017639..05c8f8b 100644
--- a/tests/lib/rules/no-color-literals.js
+++ b/tests/lib/rules/no-color-literals.js
@@ -150,6 +150,7 @@ const tests = {
                 color: 'red',
             },
             style2: {
+                // this is illegal even though it's not used anywhere
                 borderBottomColor: 'blue',
             }
         });

From 87ad8a2e338c3e861a7636ff87b9edd23bc4739e Mon Sep 17 00:00:00 2001
From: Joachim Seminck <joachim.seminck@zeroturnaround.com>
Date: Mon, 11 Sep 2017 12:14:42 +0300
Subject: [PATCH 6/6] Move comment to another line

---
 tests/lib/rules/no-color-literals.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/lib/rules/no-color-literals.js b/tests/lib/rules/no-color-literals.js
index 05c8f8b..b616f91 100644
--- a/tests/lib/rules/no-color-literals.js
+++ b/tests/lib/rules/no-color-literals.js
@@ -149,8 +149,8 @@ const tests = {
             style1: {
                 color: 'red',
             },
+            // this is illegal even though it's not used anywhere
             style2: {
-                // this is illegal even though it's not used anywhere
                 borderBottomColor: 'blue',
             }
         });