Consider finding a formatter for scss files

[jonasfj]

I might have an extension in vscode I can't figure out, or vscode has formatting for scss files built-in.

Is this something we should consider enabling?

I'm not sure if there is a good formatting for SASS, and if so, if we need to configure settings etc.

I'm just noting that having automatic formatting isn't the worst idea, if it's easily available, and we all have the same settings. Of course if we risk having different settings, then it becomes a massive pain.

[isoos]

I think the VSCode plugin uses this project: https://github.com/beautifier/js-beautify

We should investigate how hard it would be to make a formatter using the parser and visitor from https://pub.dev/packages/csslib

[isoos]

I've checked https://pub.dev/packages/sass_api and it seems to me that it has a great AST + visitor pattern that we could use to create a canonical format for our sass files.

[isoos]

I have checked sass_api, and I think it wouldn't be too hard to use it for parsing and then reformatting the AST. We could even build and release it as a separate tool under the sass repository. /cc @nex3 @jathak for comments on that

For a smaller scope, if we want to introduce only a few rules, mostly on a case-by-case basis, we could write smaller migrations like the existing ones here: https://github.com/sass/migrator/tree/main/lib/src/migrators

However, since this has only a low priority, we could adopt an existing command-line tool through docker, either https://beautifier.io/ or https://prettier.io/. I will do a head-to-head comparison on our codebase which one feels better out of the box.

/cc @parlough

[isoos]

Since prettier.io seems more actively maintained and used, I've used it to get an overview of its formatting with default settings: https://github.com/dart-lang/pub-dev/compare/master...isoos:wip-prettier-scss?expand=1

Most of it seems to be an okay change. Some rules need a bit restructuring, eg.

h1 { font-size: 36px; } // note: github uses 2em, ~32px

h1 {
  font-size: 36px;
} // note: github uses 2em, ~32px

h1 {
  // note: github uses 2em, ~32px <-- we should put it here or on the font-size line
  font-size: 36px; 
}

However, there are some strange breakup of an expressions:

I disliked the most the following, where the collapse of inline whitespaces broke the column alignment, which for me makes it harder to compare the values while reading:

.

wdyt? /cc @sigurdm @szakarias

[nex3]

We (the Sass team) are currently working with a contractor to improve the Prettier formatting story. We consider it unsuitable for real use for the time being, because it makes semantic changes far too often, but we're rewriting it using a JS-based port of the Dart parser which we expect to make it much more robust.

[sigurdm]

I'm personally willing to accept formatting being slightly ugly if it is auto-formatted. But I won't mandate anything here, as I'm rarely touching these.

Perhaps we wait for Prettier to improve?

[isoos]

We have discussed it offline today: I've checked both pub-dev and dartdoc with a recent prettifier version, and the changes seem to be safe, they are not changing semantics, and this is also confirmed by the automated screenshot diffs in both projects. We will update the files and add prettifier to the CI checks.

[sigurdm]

Is there an easy way to have the code auto-formatted in vs-code? That would be nice vs. waiting for CI to tell you that you forgot to run some obscure command...

[isoos]

Is there an easy way to have the code auto-formatted in vs-code?

There is a prettier plugin, and I am planning to provide a one-liner that pulls a docker container and formats it, so that we don't depend only on the editor. I think there is also an existing github action we could use to run it on CI.

[sigurdm]

Some instructions in:

https://itsfoss.com/vs-code-auto-format-code/#:~:text=Now%20that%20Prettier%20is%20installed,for%20Editor%3A%20Format%20On%20Save.

Seems like it requires installing an extension which probably cannot be automated...

Maybe we just make a script somewhere, and mention it in the README...