Combine single properties of defined groups

[Hai-San]

Hello, I need to know if there is any way to apply the following rule:

Today I use the order/properties-order plugin and the result in some cases looks like this (And it's not wrong):

.myClass {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;

  width: max-content;

  border-radius: 50em;

  line-height: 0;

  user-select: none;
}

But what I want is: When more than one group in properties-order contains only one property and emptyLineBefore is threshold, then it does not add emptyLineBefore. The expected result would be:

.myClass {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;

  width: max-content;
  border-radius: 50em;

  line-height: 0;
  user-select: none;
}

Or

.myClass {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;

  width: max-content;
  border-radius: 50em;
  line-height: 0;
  user-select: none;
}

The emptyLineMinimumPropertyThreshold doesn't work very well, because if I increase its value too much it will end up making group separation useless.

My Configuration today:

module.exports = {
  plugins: ['stylelint-order', 'stylelint-scss'],
  extends: [
    'stylelint-config-html/vue'
  ],
  overrides: [
    {
      files: ['*.scss', '**/*.scss'],
      customSyntax: require('postcss-scss')
    },
    {
      files: ['*.scss', '**/*.scss', '*.vue', '**/*.vue'],
      rules: {
        'scss/at-rule-no-unknown': true,
        'scss/at-extend-no-missing-placeholder': true,
        'scss/at-function-parentheses-space-before': 'always',
        'scss/at-mixin-parentheses-space-before': 'always',
        'scss/at-else-if-parentheses-space-before': 'always',
        'scss/at-else-closing-brace-space-after': 'always-intermediate',
        'scss/at-if-closing-brace-space-after': 'always-intermediate',
        'scss/dollar-variable-colon-space-after': 'always',
        'scss/double-slash-comment-whitespace-inside': 'always',
        'scss/operator-no-unspaced': true,
        'scss/declaration-nested-properties': 'never',
      }
    }
  ],
  rules: {
    'at-rule-no-unknown': null,
    'selector-combinator-space-after': 'always',
    'selector-combinator-space-before': 'always',
    'value-list-comma-space-after': 'always',
    'value-list-comma-space-before': 'never',
    'declaration-block-trailing-semicolon': 'always',
    'block-no-empty': null,
    'value-keyword-case': 'lower',
    'string-quotes': 'single',
    'max-empty-lines': 1,
    'function-name-case': [
      'lower',
      {
        ignoreFunctions: [/.*/, /^get.*$/], //Force camelCase
      },
    ],
    'rule-empty-line-before': [
      'always-multi-line',
      {
        except: ['first-nested'],
      },
    ],
    'at-rule-empty-line-before': [
      'always',
      {
        except: ['first-nested', 'blockless-after-blockless'],
        ignoreAtRules: ['else']
      },
    ],
    'comment-empty-line-before': [
      'always',
      {
        ignore: ['stylelint-commands', 'after-comment'],
      },
    ],
    'order/order': [
      'custom-properties',
      'dollar-variables',
      {
        type: 'at-rule',
        hasBlock: false,
      },
      'declarations',
      'rules',
      {
        type: 'at-rule',
        name: 'include',
        hasBlock: true,
      },
      {
        type: 'at-rule',
        name: 'media',
        hasBlock: true,
      },
      {
        type: 'at-rule',
        name: 'keyframes',
        hasBlock: true,
      },
      {
        type: 'at-rule',
        name: 'content',
        hasBlock: false,
      }
    ],
    'order/properties-order': [
      [
        {
          groupName: 'Positions',
          emptyLineBefore: 'always',
          noEmptyLineBetween: true,
          properties: [
            'isolation',
            'position',
            'z-index',
            'top',
            'right',
            'bottom',
            'left',
            'inset',
            'inset-block',
            'inset-block-start',
            'inset-block-end',
            'inset-inline',
            'inset-inline-start',
            'inset-inline-end',
            'zoom',
            'transform',
            'transform-box',
            'transform-style',
            'transform-origin',
            'offset-path',
            'offset-distance',
            'offset-rotate'
          ],
        },
        {
          groupName: 'Layout',
          emptyLineBefore: 'threshold',
          noEmptyLineBetween: true,
          properties: [
            'content',
            'display',
            'float',
            'clear',
            'place-content',
            'place-items',
            'place-self',
            'align-self',
            'align-items',
            'align-content',
            'justify-content',
            'justify-items',
            'justify-self',
            'flex',
            'flex-basis',
            'flex-direction',
            'flex-flow',
            'flex-grow',
            'flex-shrink',
            'flex-wrap',
            'order',
            'grid-area',
            'grid-auto-columns',
            'grid-auto-flow',
            'grid-auto-rows',
            'grid-column-end',
            'grid-column-gap',
            'grid-column-start',
            'grid-column',
            'grid-gap',
            'grid-row-end',
            'grid-row-gap',
            'grid-row-start',
            'grid-row',
            'grid-template-areas',
            'grid-template-columns',
            'grid-template-rows',
            'grid-template',
            'grid',
            'box-sizing',
            'overflow',
            'overflow-wrap',
            'overflow-x',
            'overflow-y',
          ],
        },
        {
          groupName: 'Sizes and spacings',
          emptyLineBefore: 'threshold',
          noEmptyLineBetween: true,
          properties: [
            'width',
            'min-width',
            'max-width',
            'height',
            'min-height',
            'max-height',
            'margin',
            'margin-top',
            'margin-right',
            'margin-bottom',
            'margin-left',
            'margin-block',
            'margin-block-start',
            'margin-block-end',
            'margin-inline',
            'margin-inline-start',
            'margin-inline-end',
            'padding',
            'padding-top',
            'padding-right',
            'padding-bottom',
            'padding-left',
            'padding-block',
            'padding-block-start',
            'padding-block-end',
            'padding-inline',
            'padding-inline-start',
            'padding-inline-end',
            'gap',
            'row-gap',
            'column-gap',
            'box-sizing',
            'aspect-ratio',
            'inline-size',
            'block-size',
            'min-block-size',
            'max-block-size',
            'min-inline-size',
            'max-inline-size',
          ],
        },
        {
          groupName: 'Apperance',
          emptyLineBefore: 'always',
          noEmptyLineBetween: true,
          properties: [
            'apperance',
            'visibility',
            'opacity',
            'color',
            'color-scheme',
            'background',
            'background-color',
            'background-image',
            'background-repeat',
            'background-repeat-x',
            'background-repeat-y',
            'background-attachment',
            'background-position',
            'background-position-x',
            'background-position-y',
            'background-clip',
            'background-origin',
            'background-size',
            'background-blend-mode',
            'border',
            'border-color',
            'border-style',
            'border-width',
            'border-top',
            'border-top-color',
            'border-top-style',
            'border-top-width',
            'border-right',
            'border-right-color',
            'border-right-style',
            'border-right-width',
            'border-bottom',
            'border-bottom-color',
            'border-bottom-style',
            'border-bottom-width',
            'border-left',
            'border-left-color',
            'border-left-style',
            'border-left-width',
            'border-block',
            'border-block-color',
            'border-block-start',
            'border-block-start-color',
            'border-block-start-style',
            'border-block-start-width',
            'border-block-end',
            'border-block-end-color',
            'border-block-end-style',
            'border-block-end-width',
            'border-inline',
            'border-inline-color',
            'border-inline-start',
            'border-inline-start-color',
            'border-inline-start-style',
            'border-inline-start-width',
            'border-inline-end',
            'border-inline-end-color',
            'border-inline-end-style',
            'border-inline-end-width',
            'border-radius',
            'border-start-start-radius',
            'border-start-end-radius',
            'border-end-start-radius',
            'border-end-end-radius',
            'border-top-left-radius',
            'border-top-right-radius',
            'border-bottom-right-radius',
            'border-bottom-left-radius',
            'border-top-left-radius',
            'border-top-right-radius',
            'border-bottom-right-radius',
            'border-bottom-left-radius',
            'border-image',
            'border-image-source',
            'border-image-slice',
            'border-image-width',
            'border-image-outset',
            'border-image-repeat',
            'outline',
            'outline-color',
            'outline-style',
            'outline-width',
            'outline-offset',
            'box-shadow',
            'mix-blend-mode',
            'accent-color',
            'forced-color-adjust',
            'box-decoration-break',
            'backface-visibility',
            'object-fit',
            'object-position',
            'image-orientation',
            'clip',
            'clip-path',
            'filter',
            'backdrop-filter',
          ],
        },
        {
          groupName: 'Typography',
          emptyLineBefore: 'always',
          noEmptyLineBetween: true,
          properties: [
            'font',
            'font-family',
            'font-size',
            'font-feature-settings',
            'font-variation-settings',
            'font-optical-sizing',
            'font-weight',
            'font-style',
            'font-display',
            'font-kerning',
            'font-variant',
            'font-variant-ligatures',
            'font-variant-caps',
            'font-variant-alternates',
            'font-variant-numeric',
            'font-variant-east-asian',
            'font-variant-position',
            'font-size-adjust',
            'font-stretch',
            'font-effect',
            'font-emphasize',
            'font-emphasize-position',
            'font-emphasize-style',
            'font-language-override',
            'font-synthesis',
            'font-smooth',
            'tab-size',
            'text-align',
            'text-align-last',
            'text-emphasis',
            'text-emphasis-color',
            'text-emphasis-style',
            'text-emphasis-position',
            'text-decoration',
            'text-decoration-color',
            'text-decoration-line',
            'text-decoration-style',
            'text-decoration-thickness',
            'text-decoration-skip-ink',
            'text-underline-position',
            'text-underline-offset',
            'text-indent',
            'text-justify',
            'text-outline',
            'text-overflow',
            'text-overflow-ellipsis',
            'text-overflow-mode',
            'text-shadow',
            'text-transform',
            'text-wrap',
            'text-size-adjust',
            'text-combine-upright',
            'text-orientation',
            'text-rendering',
            'letter-spacing',
            'line-height',
            'vertical-align',
            'columns',
            'column-count',
            'column-fill',
            'column-gap',
            'column-rule',
            'column-rule-color',
            'column-rule-style',
            'column-rule-width',
            'column-span',
            'column-width',
            'list-style',
            'list-style-position',
            'list-style-type',
            'list-style-image',
            'word-break',
            'word-spacing',
            'word-wrap',
            'white-space',
            'break-before',
            'break-inside',
            'break-after',
            'page-break-before',
            'page-break-inside',
            'page-break-after',
            'orphans',
            'max-zoom',
            'min-zoom',
            'user-zoom',
            'orientation',
            'paint-order',
          ],
        },
        {
          groupName: 'SVG Presentation',
          emptyLineBefore: 'threshold',
          noEmptyLineBetween: true,
          properties: [
            'alignment-baseline',
            'baseline-shift',
            'dominant-baseline',
            'text-anchor',
            'cx',
            'cy',
            'd',
            'r',
            'rx',
            'ry',
            'fill',
            'fill-opacity',
            'fill-rule',
            'flood-color',
            'flood-opacity',
            'stop-color',
            'stop-opacity',
            'stroke',
            'stroke-dasharray',
            'stroke-dashoffset',
            'stroke-linecap',
            'stroke-linejoin',
            'stroke-miterlimit',
            'stroke-opacity',
            'stroke-width',
            'vector-effect',
            'color-interpolation',
            'color-interpolation-filters',
            'color-profile',
            'color-rendering',
            'image-rendering',
            'lighting-color',
            'marker-start',
            'marker-mid',
            'marker-end',
            'mask',
            'mask-type',
            'shape-rendering',
            'clip-rule'
          ],
        },
        {
          groupName: 'Transform, transition and animations',
          emptyLineBefore: 'always',
          noEmptyLineBetween: true,
          properties: [
            'transition',
            'transition-delay',
            'transition-duration',
            'transition-property',
            'transition-timing-function',
            'transform',
            'transform-origin',
            'perspective',
            'perspective-origin',
            'animation',
            'animation-delay',
            'animation-direction',
            'animation-duration',
            'animation-fill-mode',
            'animation-iteration-count',
            'animation-name',
            'animation-play-state',
            'animation - timing - function',
          ],
        },
      ],
      {
        unspecified: 'bottomAlphabetical',
        emptyLineBeforeUnspecified: 'threshold',
        emptyLineMinimumPropertyThreshold: 6
      },
    ],
  },
};

[hudochenkov]

I don't know what to tell you. Personally, I never use empty lines between groups. Try to find settings that work for you. I don't think there would be any new options for groups.