Add Sass support to Vue beautifier

[xream]

Description

The results of beautification are not what I expect.

Input Before Beautification

This is what the code looked like before:

<template lang="pug">
.counter
</template>

<script>
export default {
  name: 'Counter',
}
</script>

<style lang="sass" scoped>
body
  color: red
  background-color: red
</style>

Expected Output

The beautified code should have looked like this:

<template lang="pug">
.counter
</template>

<script>
export default {
  name: 'Counter',
}
</script>

<style lang="sass" scoped>
body
  color: red
  background-color: red
</style>

Actual Output

The beautified code actually looked like this:

<template lang="pug">

.counter

</template>

<script>
export default {
  name: 'Counter',
}
</script>

<style lang="sass" scoped>
body color:red background-color:red</style>

Steps to Reproduce

1. Add code to Atom editor
2. Run command Atom Beautify: Beautify Editor
3. This beautified code does not look right!

Debug

Here is a link to the debug.md Gist: https://gist.github.com/anonymous/bf36458f0777ea046ef706b9cd09cbaf

Checklist

I have:

• [x] Tried uninstalling and reinstalling Atom Beautify to ensure it installed properly
• [x] Reloaded (or restarted) Atom to ensure it is not a caching issue
• [x] Searched through existing Atom Beautify Issues at https://github.com/Glavin001/atom-beautify/issues so I know this is not a duplicate issue
• [x] Filled out the Input, Expected, and Actual sections above or have edited/removed them in a way that fully describes the issue.
• [x] Generated debugging information and added link for debug.md Gist to this issue

[Glavin001]

<template lang="pug">
.counter
</template>

becoming

<template lang="pug">

.counter

</template>

is caused by the two additional \n wrapping the beautified code: https://github.com/Glavin001/atom-beautify/blob/master/src/beautifiers/vue-beautifier.coffee#L29

This can be fixed. I recommend submitting a Pull Request and I would be happy to review and merge it.

 <style lang="sass" scoped>
body color:red background-color:red</style>

might be a Pretty Diff bug: https://github.com/Glavin001/atom-beautify/blob/master/src/beautifiers/vue-beautifier.coffee#L37 /cc @prettydiff

[prettydiff]

I am not able to reproduce the extra new lines around .counter and Pretty Diff provides no support for SASS lang. SCSS, yes, but not SASS.

[Glavin001]

The extra newlines created are another bug: https://github.com/Glavin001/atom-beautify/issues/1557

I'm changing this issue to adding support for Sass to Vue, which currently uses Pretty Diff (like SCSS) however it is not expected to work properly. Looking at https://github.com/Glavin001/atom-beautify#language-support only beautifier Sass-Convert supports Sass beautification, so it will likely need to be used.