conflict with styelint-order "emptyLineBefore" option

[guoyunhe]

What version of stylelint, prettier and stylelint-prettier are you using?

prettier 1.19.1
stylelint 13.2.1
stylelint-prettier 1.1.2

Please paste any applicable config files that you're using (e.g. .prettierrc or .stylelintrc files)

.stylelintrc.js:

"use strict";

module.exports = {
  extends: ["stylelint-config-standard", "stylelint-prettier/recommended"],
  plugins: ["stylelint-order", "stylelint-scss"],
  rules: {
    // Order
    "order/order": ["custom-properties", "declarations"],
    "order/properties-order": [
      [
        {
          groupName: "positioning",
          emptyLineBefore: "always",
          noEmptyLineBetween: true,
          properties: ["position", "top", "bottom", "left", "right", "z-index"]
        },
        {
          groupName: "sizing",
          emptyLineBefore: "always",
          noEmptyLineBetween: true,
          properties: [
            "display",
            "box-sizing",
            "width",
            "height",
            "margin",
            "margin-top",
            "margin-bottom",
            "margin-left",
            "margin-right",
            "padding",
            "padding-top",
            "padding-bottom",
            "padding-left",
            "padding-right"
          ]
        },
        {
          groupName: "flex-children",
          emptyLineBefore: "always",
          noEmptyLineBetween: true,
          properties: [
            "order",
            "flex",
            "flex-grow",
            "flex-shrink",
            "flex-basis"
          ]
        },
        {
          groupName: "grid-children",
          emptyLineBefore: "always",
          noEmptyLineBetween: true,
          properties: [
            "grid-column-start",
            "grid-column-end",
            "grid-row-start",
            "grid-row-end",
            "grid-column",
            "grid-row",
            "grid-area"
          ]
        },
        {
          groupName: "flex-grid-children-place",
          noEmptyLineBetween: true,
          properties: ["place-self", "justify-self", "align-self"]
        },
        {
          groupName: "flex-parent",
          emptyLineBefore: "always",
          noEmptyLineBetween: true,
          properties: ["flex-flow", "flex-direction", "flex-wrap"]
        },
        {
          groupName: "grid-parent",
          emptyLineBefore: "always",
          noEmptyLineBetween: true,
          properties: [
            "grid",
            "grid-template",
            "grid-template-columns",
            "grid-template-rows",
            "grid-template-areas",
            "grid-gap",
            "grid-column-gap",
            "grid-row-gap",
            "grid-auto-flow",
            "grid-auto-columns",
            "grid-auto-rows"
          ]
        },
        {
          groupName: "flex-grid-parent-place",
          noEmptyLineBetween: true,
          properties: [
            "place-items",
            "justify-items",
            "align-items",
            "place-content",
            "justify-content",
            "align-content"
          ]
        }
      ],
      { unspecified: "bottomAlphabetical" }
    ],
};

What source code are you linting?

.card {
  display: inline;
  flex: 1 1 auto;
  font-size: 2rem;
}

What did you expect to happen?

Should be formatted without errors.

What actually happened?

Formatted but with stylelint error:

 3:3  ✖  Expected an empty line before property "flex"   order/properties-order

[BPScott]

Sounds like prettier and order/properties-order have conflicting opinions on what your output should be. I guess prettier wants no spaces between properties but you've configured a few emptyLineBefore: "always", settings. Try removing those.

If you really want those blank lines then you probably don't want this plugin (which runs prettier formatting as part of stylelint), instead you'll want to run your stylesheets through prettier, and then through stylelint in a two step process.

Closing this issue as this project deliberately has no opinions on how to format your code other than "do what prettier does" or if you really want to diverge from prettier then "run your files through prettier then through stylelint")