stylelint-rational-order-plugin

[![NPM version][version-img]][npm-url] [![Build status][ci-img]][ci-url] [![License][l-img]][l-url]

[npm-url]: https://www.npmjs.com/package/stylelint-rational-order-plugin
[version-img]: https://img.shields.io/npm/v/stylelint-rational-order-plugin.svg?style=flat-square
[ci-url]: https://travis-ci.org/AdreeUA/stylelint-rational-order-plugin
[ci-img]: https://img.shields.io/travis/AdreeUA/stylelint-rational-order-plugin.svg?style=flat-square
[l-url]: https://www.npmjs.com/package/stylelint-rational-order-plugin
[l-img]: https://img.shields.io/npm/l/stylelint-rational-order-plugin.svg?style=flat-square

Stylelint config that sorts related property declarations by grouping together following the order:

1. Positioning
2. Box Model
3. Typography
4. Visual
5. Animation
6. Misc

``css
.declaration-order {
/ Positioning /
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;

/ Box Model /
display: block;
float: right;
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;

/ Typography /
color: #888;
font: normal 16px Helvetica, sans-serif;
line-height: 1.3;
text-align: center;

/ Visual /
background-color: #eee;
border: 1px solid #888;
border-radius: 4px;
opacity: 1;

/ Animation /
transition: all 1s;

/ Misc /
user-select: none;
}
`

Usage

1. Add stylelint and this package to your project:

`bash
npm install --save-dev stylelint stylelint-rational-order-plugin


or, if you prefer yarn over npm:


yarn add --dev stylelint stylelint-rational-order-plugin
`

2. Add this package to the end of your extends array inside Stylelint
configuration (.stylelintrc for example):

`javascript
{
"plugins": [
"stylelint-rational-order-plugin"
],
"plugin/rational-order": true
}
`

Options

Boolean, or an array of options, where the first element is true, and the second is an options object.

$3

true: Enables the plugin.

false: Disables the plugin.

$3

#### "borderInBoxModel": Boolean

Default border property belongs to the visual section "borderInBoxModel": false. If true border property belongs to the box model section.

#### "emptyLineBeetweenGroup": Boolean

This option adds an empty line between groups. Default false`.

Credits

* Code Guide by @mdo
* Fork stylelint-config-rational-order by @constverum