Nomenclature Processing Machine
    Wondering what’s next for npm?Check out our public roadmap! »

    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 :)

    Install

    npm i stylelint-config-mdn-group-order

    DownloadsWeekly Downloads

    2

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    11.2 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar