Perplex Property Order

A heavily opinionated Stylelint config that also sorts CSS declarations and properties the way Perplex does.

*With some modifications & additions for modern properties.

Usage

1. Add stylelint and this package to your project:

   pnpm add stylelint @perplex-digital/stylelint-config

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

   export default {
   	extends: ['@perplex-digital/stylelint-config'],
   	rules: {
   		// Add overrides and additional rules here
   	},
   };

Advanced

The default setup applies these rules:

• stylelint-config-standard
• stylelint-config-recommended-vue
• order/order with the various custom properties and declarations.
• order/properties-order 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.
• stylelint-use-logical-spec
• stylelint-high-performance-animation

import propertyGroups from '@perplex-digital/stylelint-config/groups';

export default {
	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