mirror of
https://github.com/CharaChorder/DeviceManager.git
synced 2026-01-20 17:03:42 +00:00
84 lines
3.4 KiB
Markdown
84 lines
3.4 KiB
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:
|
||
|
||
> ⚠️ 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
|