Perplex CSS Order & Property Sorter

🗂️ A heavily opinionated Stylelint config that:

• Supports linting .vue files
• Orders CSS the way Perplex does
  • Supports Tailwind 4 directives like @apply and @variant
• Sorts CSS properties the way Concentric-CSS did but with:
  • 'Box sizing' and 'Overflow' modules above the 'Box model - Margin' module
  • outline grouped with the 'Borders' module
  • 'Backgrounds and box-shadow' module below the 'Box model - Padding' module
  • 'Positioning' and 'Anchor positioning' modules above the 'Transforms' module

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
• @stylistic/stylelint-plugin,
• stylelint-use-logical-spec
• stylelint-high-performance-animation
• Some overrides of these rules
• order/order with the Perplex order.
• 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.

import propertyGroups from '@perplex-digital/stylelint-config/property-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