-
Notifications
You must be signed in to change notification settings - Fork 89
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
Comments
@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"
]
}
}
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 |
cool! |
@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 // .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
The plugin is also shipped by the extended And from 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 {
"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 |
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 .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 |
It might have a problem because of postcss-sorting and stylelint-order. I'll look into it. BTW, If you specify |
@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.
The text was updated successfully, but these errors were encountered: