Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Zzzlaya opened this issue Aug 3, 2016 · 18 comments
Labels

Comments

@Zzzlaya
Copy link

Zzzlaya commented Aug 3, 2016

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

gajus commented Sep 15, 2016

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

@hudochenkov
Copy link
Contributor

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

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

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

@hudochenkov
Copy link
Contributor

@goldylucks I'm finishing postcss-sorting@2.0.0 which is has alphabetical order. Should be released in a month.

@goldylucks
Copy link

cool!
will it work with stylemft?

@hudochenkov
Copy link
Contributor

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

@mkoryak
Copy link

mkoryak commented Jan 11, 2017

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

@tristanbes
Copy link

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

@hudochenkov
Copy link
Contributor

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

@masaakim
Copy link
Owner

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

@tristanbes
Copy link

tristanbes commented Apr 11, 2017

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
hyper

{
  "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
Copy link
Contributor

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

@tristanbes
Copy link

tristanbes commented Apr 11, 2017

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
Copy link
Contributor

@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
Copy link

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

@acdha
Copy link

acdha commented Apr 11, 2017

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
Copy link
Contributor

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

acdha commented Apr 11, 2017

@hudochenkov ah, indeed – thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

8 participants