Skip to content

Commit 4bc779c

Browse files
committed
Add no-unused-style documentation
1 parent 602a8fd commit 4bc779c

File tree

1 file changed

+82
-0
lines changed

1 file changed

+82
-0
lines changed

docs/rules/no-unused-styles.md

+82
Original file line numberDiff line numberDiff line change
@@ -1 +1,83 @@
11
# Detect unused StyleSheet rules in React components
2+
When working on a component over a longer period of time, you could end up with unused StyleSheet rules that slipt in over time but are forgotten as you continue to improve your UX/UI design.
3+
4+
The following patterns are considered warnings:
5+
6+
```
7+
const styles = StyleSheet.create({
8+
text: {}
9+
});
10+
11+
const Hello = React.createClass({
12+
render: function() {
13+
return <Text>Hello {this.props.name}</Text>;
14+
}
15+
});
16+
```
17+
18+
The following patterns are not considered warnings:
19+
```
20+
const styles = StyleSheet.create({
21+
name: {}
22+
});
23+
24+
const Hello = React.createClass({',
25+
render: function() {
26+
return <Text style={styles.name}>Hello {this.props.name}</Text>;
27+
}
28+
});
29+
```
30+
The most common case.
31+
32+
```
33+
const styles = StyleSheet.create({
34+
text: {}
35+
});
36+
const Hello = React.createClass({
37+
propTypes: {
38+
textStyle: Text.propTypes.style
39+
},
40+
render: function() {
41+
return <Text style={[styles.text, textStyle]}>Hello {this.props.name}</Text>;
42+
}
43+
});
44+
```
45+
Style rules referenced in a Style array are marked as used.
46+
47+
```
48+
const styles = StyleSheet.create({
49+
name: {}
50+
});
51+
52+
const Hello = React.createClass({',
53+
render: function() {
54+
return <Text textStyle={styles.name}>Hello {this.props.name}</Text>;
55+
}
56+
});
57+
```
58+
Rules are also marked as used when they are used in tags that contain the word `style`.
59+
60+
```
61+
const styles = StyleSheet.create({
62+
name: {},
63+
welcome: {}
64+
});
65+
const Hello = React.createClass({
66+
render: function() {
67+
return <Text style={styles.name}>Hello {this.props.name}</Text>;
68+
}
69+
});
70+
const Welcome = React.createClass({
71+
render: function() {
72+
return <Text style={styles.welcome}>Welcome</Text>;
73+
}
74+
});
75+
```
76+
Usage is tracked over multiple components in the same file.
77+
78+
```
79+
const styles = StyleSheet.create({
80+
text: {}
81+
});
82+
```
83+
There should be atleast one component, so centralized `StyleSheets` are not checked for unused rules.

0 commit comments

Comments
 (0)