What is stylelint-config-recess-order?
The stylelint-config-recess-order package is a shareable configuration for Stylelint that enforces property order based on the Recess style guide. It helps maintain a consistent CSS property order in your stylesheets, which can improve readability and maintainability.
What are stylelint-config-recess-order's main functionalities?
Enforce Property Order
This feature enforces a specific order for CSS properties based on the Recess style guide. By extending the stylelint-config-recess-order configuration in your Stylelint configuration file, you ensure that your CSS properties are ordered consistently.
{
"extends": "stylelint-config-recess-order"
}
Integration with Stylelint
This feature allows you to integrate the Recess order configuration with other Stylelint configurations. For example, you can combine it with the stylelint-config-standard to enforce both standard linting rules and property order.
{
"extends": [
"stylelint-config-standard",
"stylelint-config-recess-order"
]
}
Other packages similar to stylelint-config-recess-order
stylelint-order
The stylelint-order package is a plugin for Stylelint that allows you to specify the order of CSS properties. It is highly customizable and can be configured to enforce any property order you prefer. Unlike stylelint-config-recess-order, which follows the Recess style guide, stylelint-order provides more flexibility in defining custom property orders.
stylelint-config-property-sort-order-smacss
The stylelint-config-property-sort-order-smacss package is a shareable configuration for Stylelint that enforces property order based on the SMACSS methodology. It is similar to stylelint-config-recess-order in that it provides a predefined order for CSS properties, but it follows the SMACSS guidelines instead of the Recess style guide.
Recess* Property Order ![StyleLint](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2872758/stylelint-icon-black.svg)
![github issues](https://img.shields.io/github/issues/stormwarning/stylelint-config-recess-order.svg?style=flat-square)
A Stylelint config that sorts CSS properties the way Recess did and
Bootstrap did/does.
*With some modifications & additions for modern properties.
Usage
- Add stylelint and this package to your project:
npm install --save-dev stylelint stylelint-config-recess-order
- Configure your stylelint configuration file to extend this package:
module.exports = {
extends: ['stylelint-config-recess-order'],
rules: {
},
}
Advanced
The default setup applies only the 'order/properties-order'
rule with the various property groups. If you need to configure other options for this rule,
the groups can be imported separately and the rule configured to your needs.
const propertyGroups = require('stylelint-config-recess-order/groups')
module.exports = {
extends: [],
rules: {
'order/properties-order': propertyGroups.map((group) => ({
...group,
emptyLineBefore: 'always',
noEmptyLineBetween: true,
})),
},
}
References
@mdo on CSS Property Order