diff --git a/docs/rules/no-unused-styles.md b/docs/rules/no-unused-styles.md index dca7578..86b8225 100644 --- a/docs/rules/no-unused-styles.md +++ b/docs/rules/no-unused-styles.md @@ -95,6 +95,23 @@ const Hello = React.createClass({ } }); ``` + +Dynamic styles are marked as used only if you use a local variable with the same name as the variable in the actual component . + +```js +const getStyles = () => { + const styles = StyleSheet.create({ + name: {} + }) + return styles; +} +const Hello = React.createClass({ + render: function() { + const styles = getStyles(); + return Hello {this.props.name}; + } +}); +``` Rules are also marked as used when they are used in tags that contain the word `style`. ```js diff --git a/tests/lib/rules/no-unused-styles.js b/tests/lib/rules/no-unused-styles.js index f716639..b2594bd 100644 --- a/tests/lib/rules/no-unused-styles.js +++ b/tests/lib/rules/no-unused-styles.js @@ -31,6 +31,21 @@ const tests = { } }); `, + }, { + code: ` + const getStyles = () => { + const styles = StyleSheet.create({ + name: {} + }) + return styles; + } + const Hello = React.createClass({ + render: function() { + const styles = getStyles(); + return Hello {this.props.name}; + } + }); + `, }, { code: ` const Hello = React.createClass({ @@ -231,6 +246,23 @@ const tests = { errors: [{ message: 'Unused style detected: styles.text', }], + }, { + code: ` + const getStyles = () => { + return OtherStyleSheet.create({ + text: {} + }) + } + const Hi = React.createClass({ + render: function() { + const globalStyles = getStyles(); + return Hi {this.props.name}; + } + }); + `, + errors: [{ + message: 'Unused style detected: undefined.text', + }], }, { code: ` const styles = StyleSheet.create({