Add package to auto group

[muuvmuuv]

trafficstars

Would be cool to have a separate package that allows grouping with empty lines.

a {
  position: relative;
  box-sizing: inherit;
}

becomse:

a {
  position: relative;

  box-sizing: inherit;
}

[muuvmuuv]

At the moment, I do:

const recess = require('stylelint-config-recess-order')

//...
    'order/properties-order': recess.rules['order/properties-order'].map((group) => ({
      ...group,
      emptyLineBefore: 'always',
      noEmptyLineBetween: true,
    })),
//...

[stormwarning]

I'll look into how I can make this easier in this package 👍

[muuvmuuv]

Update my config again:

module.export = { rules: {
    'declaration-empty-line-before': [
      'always',
      {
        except: ['first-nested'],
        ignore: ['after-declaration', 'after-comment', 'inside-single-line-block'],
      },
    ],
    'order/properties-order': [
      recess.rules['order/properties-order'].map((group) => ({
        ...group,
        emptyLineBefore: 'always',
        noEmptyLineBetween: true,
      })),
      {
        unspecified: 'bottomAlphabetical',
        emptyLineBeforeUnspecified: 'always',
      },
    ],
    'order/order': [
      [
        // Imports
        { type: 'at-rule', name: 'import' },

        // Inheritance
        { type: 'at-rule', name: 'extend' },
        { type: 'at-rule', name: 'apply' },

        // SCSS Variables
        'dollar-variables',

        // Declarations
        'declarations',

        // CSS Variables
        'custom-properties',

        // Mixins
        { type: 'at-rule', name: 'include' },
        { type: 'at-rule', name: 'mixin' },
        { type: 'at-rule', name: 'add-mixin' },

        // Pseudo-elements
        {
          type: 'rule',
          selector: /^&::[\w-]+/,
          hasBlock: true,
        },

        // Nested Rules
        'rules',

        // Pseudo-classes
        {
          type: 'rule',
          selector: /^&:[\w-]+/,
          hasBlock: true,
        },

        // Nested extending rules
        {
          type: 'rule',
          selector: /^&/,
          hasBlock: true,
        },

        // Media Queries
        { type: 'at-rule', name: 'media', hasBlock: true },
      ],
      {
        unspecified: 'bottom',
      },
    ]
} }

[kutsan]

You can also use stylelint-config-clean-order instead of recess-order, it has emptyLineBefore in it and bits from @muuvmuuv's config. I also added couple of missing CSS properties.

[stormwarning]

@muuvmuuv The latest release adds a new export of the property groups, although it still requires looping through each group object manually I'm afraid.

Closing for now, but let me know if this solution doesn't help.