1. stylelint-config-recess-order
Recess-based property sort order for Stylelint.
stylelint-config-recess-order
Package: stylelint-config-recess-order
Created by: stormwarning
Last modified: Mon, 15 Apr 2024 02:19:40 GMT
Version: 5.0.1
License: ISC
Downloads: 1,027,710
Repository: https://github.com/stormwarning/stylelint-config-recess-order

Install

npm install stylelint-config-recess-order
yarn add stylelint-config-recess-order

Recess* Property Order StyleLint

npm version
npm downloads
github issues

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

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin