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({