Open Zzzlaya opened 8 years ago
@morishitter Please mark this with an appropriate label, e.g. "incompatibility with stylelint" so that it wouldn't get lost.
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 :)
@hudochenkov i can try to implement alphabetical sorting if given some pointers :)
I couldn't get postcss-sorting to work :(
@goldylucks I'm finishing postcss-sorting@2.0.0
which is has alphabetical order. Should be released in a month.
cool! will it work with stylemft?
@goldylucks yes. It was developed with stylefmt in mind :)
any updates on this, I would also really like to have this π
any updates on this issue ? stylefmt still not fixing automatically rules to comply with alphabetical order :(
@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.
@tristanbes hudochenkov is right. Please use stylelint-order plugin :)
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'
}
}
@tristanbes looks like you're using old version of stylelint-order. stylefmt supports latest version.
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"
}
}
@tristanbes you might have seen deprecation notices then. Rename rule order/declaration-block-properties-alphabetical-order
to order/properties-alphabetical-order
in your config.
Thank you i'll provide a PR to the external rules we're using π·
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.
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 :)
@hudochenkov ah, indeed β thanks!
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.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:
works, while config with nested arrays for grouping, i.e.
does not work at all (supposedly nested array itself is just being copied improperly?).
Anyway, I see at least two problems here:
"declaration-block-properties-order"
must be set up according to the PostCSS Sorting config (maybe even give this rule a new name?)I find stylefmt being a very powerful tool and I'd really appreciate this issue to be fixed soon.