fixers/stylelint: enhance stylelint fixer

[charlesbjohnson]

👋

This upgrades the stylelint fixer. A few things have been done:

1. The fixer now supports let g:ale_stylelint_options for custom flags
2. The fixer now supports stdin by virtue of --stdin-filename (available in 6.3.0)
3. The fixer now changes the working directory before running stylelint

(much of this is inspired from fixers/prettier)

I believe the combination of 2 & 3 may resolve a few issues since it allows any stylelint plugins to find project configuration files as expected (similar to #2622). This may fix:

• Local Prettier config .prettierrc ignored for prettier-eslint fixer #2227 Probably won't fix, seems unrelated to stylelint
• .prettierignore file not used when fixing on save #1425 Possibly partial fix, assuming prettier is being used with stylelint
• prettier-eslint can not find eslint dependency installed locally #1648 Probably won't fix, seems unrelated to stylelint

[charlesbjohnson]

Please hold on review, I'm running into a bug where the error output is actually replacing the buffer when using stdin.

Seems to affect other syntaxes (ie. SCSS):

❯ echo '.foo- {' | npx stylelint --fix --stdin-filename foo.scss
foo.scss
 1:1  ✖  Unclosed block   CssSyntaxError

❯ echo '.foo- {' | npx stylelint --fix --stdin-filename foo.css
.foo- {
}

[charlesbjohnson]

According to stylelint/stylelint#3633, it seems to only happen when a non-CSS --syntax is used.

Without any stylelint configuration for SCSS:

❯ echo '$color:red; .foo { &-bar { color:$color } }' | npx stylelint --fix --stdin-filename foo.css
$color:red; .foo { &-bar { color:$color } }

With stylelint configuration for SCSS (ie. stylelint-scss with scss/dollar-variable-colon-newline-after) and valid syntax:

❯ echo '$color:red; .foo { &-bar { color:$color } }' | npx stylelint --fix --stdin-filename foo.css
$color:
red; .foo { &-bar { color:$color } }

With stylelint configuration for SCSS and invalid syntax (as demonstrated previously):

❯ echo '.foo- {' | npx stylelint --fix --stdin-filename foo.css
.foo- {
}

As such, I've made a change to force a .css extension after the stdin filename. So far it seems to resolve the issue for me, but perhaps better to let it bake for some time 🍞 first.

[w0rp]

Does this work acceptably well for other file formats?

[charlesbjohnson]

I have not yet tested with other file formats since I've found that this workaround still isn't a good enough solution. I'm still occasionally running into issues where stylelint dumps a stacktrace to stdout and blows away my buffer.

Let me know how you want to proceed. My guess is that it's either a bug in stylelint or there's some flag that I'm unaware of. I have yet to take a look at how stylelint plugins for other editors are handling this.

[w0rp]

If the --stdin-filename argument can cause some problems, maybe take that away for now and keep just the other changes which shouldn't cause any issues, and bring that back later when the issues have been resolved.

[charlesbjohnson]

take that away for now and keep just the other changes which shouldn't cause any issues

Done. Two things worth noting:

1. It seems that using a temporary file is still an issue for configuration detection. With stylelint-prettier, for example, prettier is unable to detect a project configuration file since it starts trying to find one from the file being formatted. This is essentially the same thing as feat(template-lint): Read from stdin #2622, and it will be resolved when we can use --stdin-filename without issue.

2. I believe I misjudged the issues I linked in the PR description. The behavior in those issues is similar, though, and I think the fix would be similar to what we're doing here but just for a different tool (ie eslint vs stylelint). These changes probably won't fix them.

bring that back later when the issues have been resolved

Sounds good, stay tuned 📺

Thanks!