stylelint fix findings

[bardware]

Hi,

is there a possibility to have findings like whitespaces in comments as specified in rule scss/double-slash-comment-whitespace-inside fixed automatically?

[kristerkari]

I haven't had a lot of time for this project lately, so I'm not sure how stylelint's autofixing is implemented. Would be interesting to know if it is easy to implement fixing for plugins.

Any ideas @jeddy3 @davidtheclark @evilebottnawi ?

[jeddy3]

stylelint-order is the first plugin (pack) I know of to add support for --fix.

Enabling plugins to autofix their violations is one of the driving forces behind adding the feature to stylelint.

[OriR]

@kristerkari I'm integrating stylelint-scss to an existing project and I'm getting a hundreds of errors on similar rules.

Is there any chance we can promote this?

[kristerkari]

@OriR That sure is quite frustrating.

I might have some time in the near future to look at implementing --fix for some of the rules, but there are quite many of them and I'm limited on the time that I can put to this library.

Any help to add fixing to rules and any ideas how to get people to help is appreciated. :)

[OriR]

any ideas how to get people to help is appreciated. :)

I'm a big believer in just asking nicely ;)

So I'm here to help! let me know how you want to divide the work, and if you could point me at the right direction so I'll start poking around the code I'll get right on it 😃

[kristerkari]

I'm very happy that you want to help with this @OriR 🙏So thanks in advance!

First of all, there are some rules that can be too complicated to implement --fix, so we need to find out which ones can support it.

If it helps, we can start gathering a list of rules that can support fixing.

It's very easy to add unit tests for the fix flag, you just need to enable it in tests (fix: true) and then add fixed: next to a test that is rejected:
https://github.com/stylelint/stylelint/blob/master/lib/rules/no-missing-end-of-source-newline/__tests__/index.js#L9-L43

The code to do the fixing can be very simple or somewhat complicated depending on the rule. You can use if (context.fix) { to see if the fixing is enabled. Here's an example:
https://github.com/stylelint/stylelint/blob/master/lib/rules/no-missing-end-of-source-newline/index.js#L25-L29

[kristerkari]

There's also documentation for autofixing:
https://github.com/stylelint/stylelint/blob/master/docs/developer-guide/rules.md#adding-autofixing

[OriR]

I took a quick look at the readme and I think the --fix flag could apply to these rules:

• at-else-closing-brace-newline-after (WIP @OriR Add autofix for at-if/else-closing-brace-newline-after #229)
• at-else-closing-brace-space-after (WIP @OriR Add autofix for at-if-else-closing-brace-space-after #228)
• at-else-empty-line-before (WIP @kristerkari Add autofix for at-else-empty-line-before #221)
• at-else-if-parentheses-space-before (WIP @kristerkari Add autofix for at-else-if-parentheses-space-before #222)
• at-function-parentheses-space-before (WIP @kristerkari Add autofix for at-function-parentheses-space-before #223)
• at-if-closing-brace-newline-after (WIP @OriR Add autofix for at-if/else-closing-brace-newline-after #229)
• at-if-closing-brace-space-after (WIP @OriR Add autofix for at-if-else-closing-brace-space-after #228)
• at-mixin-parentheses-space-before (WIP @kristerkari Add autofix for at-mixin-parentheses-space-before #224)
• dollar-variable-colon-newline-after (WIP @OriR Add autofix for dollar-variable-colon-newline-after #231)
• dollar-variable-colon-space-after (WIP @kristerkari Add autofix for dollar-variable-colon-space-after/before #227)
• dollar-variable-colon-space-before(WIP @kristerkari Add autofix for dollar-variable-colon-space-after/before #227)
• dollar-variable-empty-line-before (WIP @kristerkari Add autofix for dollar-variable-empty-line-before #226)
• double-slash-comment-empty-line-before (WIP @OriR Add autofix for double-slash-comment-empty-line-before #230)
• double-slash-comment-whitespace-inside
• operator-no-newline-after
• operator-no-newline-before
• operator-no-unspaced

Rules that I'm not sure about are:

• selector-no-redundant-nesting-selector - although redundant it may change the actual selector output of the rule.
• double-slash-comment-inline - may cause subsequent errors if we just lift up the comment to the line above, so it may be possible but need to be done carefully.
• at-import-no-partial-leading-underscore - technically we can "fix" it but it may cause errors if there's already a file with the same name without the leading underscore so I'd rather not take any risks about this.

The rest are "pattern" or "missing" rules that I don't think are even possible to automatically fix.

I think this is a good place to start from, WDYT @kristerkari ?

[kristerkari]

@OriR That list looks really good! Thanks!

The ones you are not sure about are rules that most likely can not have autofixing and the same goes for "pattern" and "missing" rules.

I created a new milestone called "--fix", so we can start implementing autofix to rules one-by-one. It's probably a good idea to update your list when working on a rule by marking (WIP @username) next to the rule name.

[kristerkari]

@OriR I started with an easy one:
#221

[OriR]

@kristerkari Wow!
Wasn't expecting for such a quick turnaround!
Was gonna try and start working on it this weekend but I don't think I'd be able to learn the codebase & PostCSS AST in time because it looks like you're already halfway through 😅

[kristerkari]

Haha, don't worry, there are still plenty of rules that need autofix. You can have a look at my pull requests for example of how I have implemented autofixing :)

[OriR]

Yeah sure!
I'll start poking around and see what I come up with, I'll probably open my first PR sometime tomorrow :)

[kristerkari]

btw. operator-no-* rules might be a bit tricky to autofix, we need to have a closer look and decide if we want to do it or not.

[OriR]

Yeah, saw that 😞
Also, the function findCommentsInRaws makes it all the more difficult to fix double-slash-comment-whitespace-inside and operator-no-unspaced because it doesn't actually traverses the AST, so we can't just modify a node we find that needs fixing during the same iteration.

[kristerkari]

We can maybe skip the rules that use findCommentsInRaws for now, and later refactor the code to better support autofixing.

[kristerkari]

This has been released in 3.0.0. Thanks for helping!

[PurpleTape]

Hello!
May you tell me if the autofix feature is currently available? The matter is that at me the rule "scss/double-slash-comment-whitespace-inside" is not applied (autofix //comment to // coomment). What to do in such a situation?
Thanks!

[wuyuweixin]

Not fixed yet

[Sergiobop]

Not fixed @kristerkari , the problem @PurpleTape says is still happening

Hello! May you tell me if the autofix feature is currently available? The matter is that at me the rule "scss/double-slash-comment-whitespace-inside" is not applied (autofix //comment to // coomment). What to do in such a situation? Thanks!