Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kutsan/stylelint-config-clean-order
A clean and complete config for stylelint-order.
https://github.com/kutsan/stylelint-config-clean-order
Last synced: 6 days ago
JSON representation
A clean and complete config for stylelint-order.
- Host: GitHub
- URL: https://github.com/kutsan/stylelint-config-clean-order
- Owner: kutsan
- License: mit
- Created: 2021-12-23T18:40:59.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2025-01-07T11:23:08.000Z (about 2 months ago)
- Last Synced: 2025-02-08T09:04:23.655Z (13 days ago)
- Language: JavaScript
- Homepage:
- Size: 577 KB
- Stars: 171
- Watchers: 6
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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