"declaration-block-properties-order" rule is not the same rule that stylelint uses.

[Zzzlaya]

The issue is as described below:

I set up "declaration-block-properties-order" rule in my .stylelintrc according to Stylelint documentation. It did not work as I expected, i.e.

"declaration-block-properties-order": "alphabetical"

was just being ignored by stylefmt.

Then I found out that according to this PR stylefmt uses PostCSS Sorting plugin config to put CSS rules in certain order, so I set up config for "declaration-block-properties-order" rule as I would for "sort-order" in PostCSS Sorting.

Well, the problem is that flat array config like:

"declaration-block-properties-order": [
      "$variable",
      "@atrule",
      "align-items",
      "animation"
]

works, while config with nested arrays for grouping, i.e.

"declaration-block-properties-order": [
      ["$import"],
      ["$variable"],
      ["$include"],
      [
        "align-items",
        "animation",
        "animation-delay"
]

does not work at all (supposedly nested array itself is just being copied improperly?).

Anyway, I see at least two problems here:

1. stylefmt should mention that "declaration-block-properties-order" must be set up according to the PostCSS Sorting config (maybe even give this rule a new name?)
2. Sorting of properties should support grouping (nested arrays) as it is implemented in PostCSS Sorting.

I find stylefmt being a very powerful tool and I'd really appreciate this issue to be fixed soon.

[gajus]

@morishitter Please mark this with an appropriate label, e.g. "incompatibility with stylelint" so that it wouldn't get lost.

[hudochenkov]

stylefmt supports groups as they described in stylelint's docs:

{
    "rules": {
        "declaration-block-properties-order": [
            {
                "properties": [
                    "font-size",
                    "font-weight"
                ]
            },
            "display",
            "width",
            "height",
            "color",
            "background",
            "opacity"
        ]
    }
}

alphabetical order is not supported yet.

Please don't use postcss-sorting keywords in stylelint config, because it's a hack and not a valid values for stylelint and stylefmt. You can safely use postcss-sorting after stylefmt with all its features, though :)

[goldylucks]

@hudochenkov i can try to implement alphabetical sorting if given some pointers :)

I couldn't get postcss-sorting to work :(

[hudochenkov]

@goldylucks I'm finishing [email protected] which is has alphabetical order. Should be released in a month.

[goldylucks]

cool! will it work with stylemft?

[hudochenkov]

@goldylucks yes. It was developed with stylefmt in mind :)

[mkoryak]

any updates on this, I would also really like to have this 👍

[tristanbes]

any updates on this issue ? stylefmt still not fixing automatically rules to comply with alphabetical order :(

[hudochenkov]

@tristanbes you need to use stylelint-order, because declaration-block-properties-order is deprecated in stylelint.

// .stylelintrc
{
	"plugins": [
		"stylelint-order"
	],
	"rules": {
		// ...
		"order/properties-alphabetical-order": true
		// ...
	}
}

As I know stylefmt supports stylelint-order rules.

[matype]

@tristanbes hudochenkov is right. Please use stylelint-order plugin :)

[tristanbes]

Sorry @morishitter @hudochenkov , I know it may be not the place, but after using the stylelint-order, it's still not auto-fixing the order in .scss (sass). Can you point me in the right direction please ?

Output of gulp lint

{
  "plugins": [
    "stylelint-order"
  ],
  "extends": [
    "stylelint-config-sass-guidelines"
  ]
}

The plugin is also shipped by the extended .stylelintrc

And from gulpfile.js

const stylefmt = require('stylefmt');
const gulpStylelint = require('gulp-stylelint');
const syntaxScss = require('postcss-scss');

function formatStyles() {
  const processors = [
    stylefmt(config.stylefmt),
    reporter(config.reporter),
  ];

  return gulp.src(`${config.path.src}/sass/**/*.scss`)
    .pipe(gulpPostcss(processors, { syntax: syntaxScss }))
    .pipe(gulp.dest(`${config.path.src}/sass`))
  ;
}

config : {
  styleLint: {
    failAfterError: false,
    reporters: [
      { formatter: 'string', console: true }
    ],
    debug: false,
    syntax: "scss",
  },
  stylefmt: {
    configFile: '.stylelintrc'
  }
}

[hudochenkov]

@tristanbes looks like you're using old version of stylelint-order. stylefmt supports latest version.

[tristanbes]

I use stylelint-order: ^0.4.3 which seems like the latest version :(

{
  "private": true,
  "scripts": {
    "build": "gulp build",
    "watch": "gulp watch",
    "lint": "gulp lint",
    "format": "gulp format"
  },
  "devDependencies": {
    "event-stream": "^3.3.4",
    "gulp": "^3.9",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.2",
    "gulp-eslint": "^3.0.1",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^3.1.1",
    "gulp-postcss": "^6.3.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-stylelint": "^3.9.0",
    "gulp-uglify": "^2.1.0",
    "gulp-util": "^3.0.7",
    "gulp-watch": "^4.3.11",
    "node-sass": "^4.5.0",
    "normalize.css": "^5.0.0",
    "postcss-reporter": "^3.0.0",
    "postcss-scss": "^0.4.1",
    "stylefmt": "^5.3.0",
    "stylelint": "^7.10.0",
    "stylelint-config-primer": "^1.4.0",
    "stylelint-config-sass-guidelines": "^2.0.0",
    "stylelint-order": "^0.4.3"
  }
}

[hudochenkov]

@tristanbes you might have seen deprecation notices then. Rename rule order/declaration-block-properties-alphabetical-order to order/properties-alphabetical-order in your config.

[tristanbes]

Thank you i'll provide a PR to the external rules we're using 🌷

[acdha]

I hit what appears to be a related issue: I have a project which uses order/properties-order and while stylelint doesn't produce any output at all, stylefmt reorders properties, causing the next lint run to produce errors:

.timeline-section-items {
    display: flex;
    flex-flow: row wrap;
    align-content: space-between;
    justify-content: flex-start;

    margin: 0 1rem;
}

$ stylelint test.scss 
$ stylefmt test.scss 
$ stylelint test.scss 

test.scss
 5:5  ✖  Expected "flex-flow" to come before "margin"         order/properties-order
 5:5  ✖  Expected an empty line before property "flex-flow"   order/properties-order
$ stylelint --version
7.10.1
$ stylefmt --version
5.3.2

https://gist.github.com/b33c056c240569190b93480ba7017e31 has my .stylelintrc – it's big but mostly a list of CSS property blocks.

[hudochenkov]

It might have a problem because of postcss-sorting and stylelint-order. I'll look into it.

BTW, If you specify flex-flow in your config it'll fix a problem :)

[acdha]

@hudochenkov ah, indeed – thanks!