RJiazhen/stylelint-config-recess-order-RJZ

🗂️ Recess-based property sort order for Stylelint. 个人修改自用版

Recess* Property Order

根据原stylelint-config-recess-order重新修改的个人自用css属性顺序配置。

按照以下顺序对css属性的顺序进行限制：

1. 自身定位相关属性（grid-area、margin、postion等）；
2. 自身样式相关属性（width、backgroud、border等）；
3. 子元素定位相关属性（padding、grid、align-items等）；
4. 内部文本相关属性（font、color、word-wrap等）；

A Stylelint config that sorts CSS properties the way Recess did and Bootstrap did/does.

*With some modifications & additions for modern properties.

Usage

1. Add stylelint and this package to your project:

   npm install --save-dev stylelint stylelint-config-recess-order-rjz

2. Configure your stylelint configuration file to extend this package:

   module.exports = {
   	extends: ['stylelint-config-recess-order'],
   	rules: {
   		// Add overrides and additional rules here
   	},
   }

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: [], // Do not extend the config here.
	rules: {
		// Configure the rule manually.
		'order/properties-order': propertyGroups.map((group) => ({
			...group,
			emptyLineBefore: 'always',
			noEmptyLineBetween: true,
		})),
	},
}

References

@mdo on CSS Property Order