docs/rules/sort-styles.md
# Require StyleSheet keys to be sorted
It's like [sort-keys](https://eslint.org/docs/rules/sort-keys), but just for React Native styles.
Keeping your style definitions sorted is a common convention that helps with readability. This rule lets you enforce an ascending (default) or descending alphabetical order for both "class names" and style properties.
## Rule Details
The following patterns are considered warnings:
```js
const styles = StyleSheet.create({
button: {
width: 100,
color: 'green',
},
});
```
```js
const styles = StyleSheet.create({
button: {},
anchor: {},
});
```
The following patterns are not considered warnings:
```js
const styles = StyleSheet.create({
button: {
color: 'green',
width: 100,
},
});
```
```js
const styles = StyleSheet.create({
anchor: {},
button: {},
});
```
## Options
```
{
"react-native/sort-styles": ["error", "asc", { "ignoreClassNames": false, "ignoreStyleProperties": false }]
}
```
The 1st option is "asc" or "desc".
* `"asc"` (default) - enforce properties to be in ascending order.
* `"desc"` - enforce properties to be in descending order.
The 2nd option is an object which has 2 properties.
* `ignoreClassNames` - if `true`, order will not be enforced on the class name level. Default is `false`.
* `ignoreStyleProperties` - if `true`, order will not be enforced on the style property level. Default is `false`.
### desc
`/* eslint react-native/sort-styles: ["error", "desc"] */`
The following patterns are considered warnings:
```js
const styles = StyleSheet.create({
button: {
color: 'green',
width: 100,
},
});
```
```js
const styles = StyleSheet.create({
anchor: {},
button: {},
});
```
The following patterns are not considered warnings:
```js
const styles = StyleSheet.create({
button: {
width: 100,
color: 'green',
},
});
```
```js
const styles = StyleSheet.create({
button: {},
anchor: {},
});
```
### ignoreClassNames
`/* eslint react-native/sort-styles: ["error", "asc", { "ignoreClassNames": true }] */`
The following patterns are not considered warnings:
```js
const styles = StyleSheet.create({
button: {
color: 'green',
width: 100,
},
anchor: {},
});
```
# ignoreStyleProperties
`/* eslint react-native/sort-styles: ["error", "asc", { "ignoreStyleProperties": true }] */`
The following patterns are not considered warnings:
```js
const styles = StyleSheet.create({
anchor: {},
button: {
width: 100,
color: 'green',
},
});
```