stylelint-config-clean-order
Version:
Order your styles with stylelint-order.
85 lines (58 loc) • 3.5 kB
Markdown
<img width="100" src="https://github.com/kutsan/stylelint-config-clean-order/raw/master/.github/assets/logo.png" alt="Logo" />
# stylelint-config-clean-order
[](https://www.npmjs.com/package/stylelint-config-clean-order)
[](https://github.com/kutsan/stylelint-config-clean-order/actions/workflows/test.yml)
Order your styles with [stylelint-order](https://github.com/hudochenkov/stylelint-order).
| Before | After |
| ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
|  |  |
## Usage
Install [`stylelint`](https://github.com/stylelint/stylelint) and this package to your project:
```sh
npm install stylelint stylelint-config-clean-order --save-dev
```
Configure your stylelint configuration file (`.stylelintrc.json`) to extend this package:
> [!TIP]
> You don't need to install `stylelint-order` nor add `stylelint-order` to `"plugins"` since this package already does that for you.
```json
{
"extends": ["stylelint-config-clean-order"]
}
```
## Severity Options
Default severity level is `warning` but you can use error variant to change severity level to `error`.
```json
{
"extends": ["stylelint-config-clean-order/error"]
}
```
## Customization
You can import raw property groups to add or override rule options. Please refer to [stylelint-order](https://github.com/hudochenkov/stylelint-order) plugin documentation.
For example, you can override `'properties-order'` rule to not have empty lines between groups:
```javascript
const { propertyGroups } = require('stylelint-config-clean-order')
const propertiesOrder = propertyGroups.map((properties) => ({
noEmptyLineBetween: true,
emptyLineBefore: 'never', // Don't add empty lines between order groups.
properties
}))
module.exports = {
extends: ['stylelint-config-clean-order'],
rules: {
'order/properties-order': [
propertiesOrder,
{
severity: 'warning',
unspecified: 'bottomAlphabetical',
}
]
}
}
```
## Extra empty lines for formatting
In addition to `stylelint-order` plugin, this package also overrides two rules (`declaration-empty-line-before` and `at-rule-empty-line-before`) to improve the final formatted result by adding extra empty lines between declarations. `stylelint-config-clean-order` does not override a rule other than these two.
If you want these rules to put into effect, make sure config packages after `stylelint-config-clean-order` do not override them.
## About orders
I try to hand-pick style orders in the most logical way to improve process of CSS refactoring; for example `font-size` before `line-height`, `display` before `align-items`. If you think order of a rule doesn't make sense, please open an issue so we can discuss. Thanks!
## License
MIT