stylelint-config-mdn-group-order

0.1.1 • Public • Published

MDN data grouping

npm version npm downloads npm dependencies github issues npm license

A Stylelint config that sorts CSS properties based on MDN-data.

Usage

  1. Add Stylelint and this package to your project:
npm install --save-dev stylelint stylelint-config-mdn-group-order
  1. Configure your stylelint configuration file to extend this package:
{
  "extends": "stylelint-config-mdn-group-order",
  "rules": {
	// You can override rules here
  }
}

Default order

[
	'Composes',
	'Compositing and Blending',
	'CSS Animations',
	'CSS Backgrounds and Borders',
	'CSS Basic User Interface',
	'CSS Box Alignment',
	'CSS Box Model',
	'CSS Color',
	'CSS Columns',
	'CSS Containment',
	'CSS Counter Styles',
	'CSS Display',
	'CSS Flexible Box Layout',
	'CSS Fonts',
	'CSS Fragmentation',
	'CSS Generated Content',
	'CSS Grid Layout',
	'CSS Images',
	'CSS Inline',
	'CSS Lists and Counters',
	'CSS Logical Properties',
	'CSS Masking',
	'CSS Miscellaneous',
	'CSS Motion Path',
	'CSS Overflow',
	'CSS Pages',
	'CSS Positioning',
	'CSS Ruby',	
	'CSS Scroll Anchoring',
	'CSS Scroll Snap',
	'CSS Scrollbars',
	'CSS Shapes',
	'CSS Speech',
	'CSS Table',
	'CSS Text Decoration',
	'CSS Text',
	'CSS Transforms',
	'CSS Transitions',
	'CSS Variables',
	'CSS Will Change',
	'CSS Writing Modes',
	'CSSOM View',
	'Filter Effects',
	'MathML',
	'Microsoft Extensions',
	'Mozilla Extensions',
	'Pointer Events',
	'WebKit Extensions'
]

Customization

If you want to customize order of groups, you can use function

getOrder(forCSSModules: boolean, sortOrder?: string[])
  1. First of all install stylelint-order plugin
npm install stylelint-order --save-dev
  1. Import getOrder() from package
const { getOrder } = require('stylelint-config-mdn-group-order/dist/mdn-groups')
  1. Now you can use this function. For example:
"rules": {
	'order/properties-order': [
		getOrder(true, [
			'CSS Display',
			'CSS Columns',
			'CSS Containment',
			'CSS Color',
			'CSS Counter Styles',
			'CSS Flexible Box Layout'
			]),
		{
			'unspecified': 'bottom',
			'emptyLineBeforeUnspecified': 'always',
		},
	]
}

Contributing

Please, create a PR and describe what you want to add and why :)

Package Sidebar

Install

npm i stylelint-config-mdn-group-order

Weekly Downloads

1

Version

0.1.1

License

MIT

Unpacked Size

11.2 kB

Total Files

10

Last publish

Collaborators

  • playhardgopro