Sass Formatter

.vscode/launch.json

@@ -89,6 +89,6 @@
       "outFiles": ["${workspaceFolder}/dist/test/**/*.js"],
       "smartStep": true,
       "skipFiles": ["<node_internals>/**"]
-    },
+    }
   ]
 }

client/client.ts

@@ -39,7 +39,16 @@ export function initializeLanguageClient(vlsModulePath: string, globalSnippetDir
   const clientOptions: LanguageClientOptions = {
     documentSelector,
     synchronize: {
-      configurationSection: ['vetur', 'emmet', 'html', 'javascript', 'typescript', 'prettier', 'stylusSupremacy'],
+      configurationSection: [
+        'vetur',
+        'sass',
+        'emmet',
+        'html',
+        'javascript',
+        'typescript',
+        'prettier',
+        'stylusSupremacy'
+      ],
       fileEvents: vscode.workspace.createFileSystemWatcher('{**/*.js,**/*.ts}', false, false, true)
     },
     initializationOptions: {

docs/formatting.md

@@ -14,6 +14,7 @@ These formatters are available:
 - [`prettier-eslint`](https://github.com/prettier/prettier-eslint): For js. Run `prettier` and `eslint --fix`.
 - [`prettyhtml`](https://github.com/Prettyhtml/prettyhtml): For html.
 - [`stylus-supremacy`](https://github.com/ThisIsManta/stylus-supremacy): For stylus.
+- [`sass-formatter`](https://github.com/TheRealSyler/sass-formatter): For sass.
 - [`vscode-typescript`](https://github.com/Microsoft/TypeScript): For js/ts. The same js/ts formatter for VS Code.
 
 Vetur bundles all the above formatters. When Vetur observes a local install of the formatter, it'll prefer to use the local version.
@@ -31,6 +32,7 @@ Current default:
   "vetur.format.defaultFormatter.scss": "prettier",
   "vetur.format.defaultFormatter.less": "prettier",
   "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
+  "vetur.format.defaultFormatter.sass": "sass",
   "vetur.format.defaultFormatter.js": "prettier",
   "vetur.format.defaultFormatter.ts": "prettier"
 }
@@ -124,7 +126,7 @@ Default settings are [here](https://github.com/vuejs/vetur/blob/master/server/sr
 
 #### [stylus-supremacy](https://thisismanta.github.io/stylus-supremacy/)
 
-Other settings are read from `stylusSupremacy.*`. You can install [Stylus Supremacy extension](https://marketplace.visualstudio.com/items?itemName=thisismanta.stylus-supremacy) to get IntelliSense for settings, but Vetur will work without it. A useful default:
+Settings are read from `stylusSupremacy.*`. You can install [Stylus Supremacy extension](https://marketplace.visualstudio.com/items?itemName=thisismanta.stylus-supremacy) to get IntelliSense for settings, but Vetur will work without it. A useful default:
 
 ```json
 {
@@ -133,3 +135,24 @@ Other settings are read from `stylusSupremacy.*`. You can install [Stylus Suprem
   "stylusSupremacy.insertSemicolons": false
 }
 ```
+
+#### [sass-formatter](https://github.com/TheRealSyler/sass-formatter)
+
+Settings are read from `sass.format.*`. You can install [Sass extension](https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented) to get IntelliSense for settings, but Vetur will work without it. A useful default:
+
+```json
+{
+  // Convert scss/css to sass.
+  "sass.format.convert": true,
+  // also removes empty rows that are near a property.
+  "sass.format.deleteCompact": true,
+  // removes empty rows.
+  "sass.format.deleteEmptyRows": true,
+  // removes trailing whitespace.
+  "sass.format.deleteWhitespace": true,
+  // replace spaces or tabs to the opposite based on the selected preference(indent Using Spaces/Tabs).
+  "sass.format.replaceSpacesOrTabs": true,
+  // If true space between the property: value, is always set to 1.
+  "sass.format.setPropertySpace": true
+}
+```

package.json

@@ -315,6 +315,19 @@
           ],
           "description": "Default formatter for <style lang='scss'> region"
         },
+        "vetur.format.defaultFormatter.sass": {
+          "type": "string",
+          "default": "sass",
+          "enum": [
+            "none",
+            "sass"
+          ],
+          "enumDescriptions": [
+            "disable formatting",
+            "sass formatter"
+          ],
+          "description": "Default formatter for <style lang='sass'> region"
+        },
         "vetur.format.defaultFormatter.less": {
           "type": "string",
           "default": "prettier",

server/package.json

@@ -37,6 +37,7 @@
     "prettier-tslint": "^0.4.2",
     "read-pkg-up": "^4.0.0",
     "resolve": "^1.8.1",
+    "sass-formatter": "^0.0.5",
     "stylus": "^0.54.5",
     "stylus-supremacy": "^2.12.6",
     "typescript": "^3.6.3",

server/src/embeddedSupport/embeddedSupport.ts

@@ -8,6 +8,7 @@ export type LanguageId =
   | 'css'
   | 'postcss'
   | 'scss'
+  | 'sass'
   | 'less'
   | 'stylus'
   | 'javascript'

server/src/embeddedSupport/languageModes.ts

@@ -33,6 +33,7 @@ import { VueInfoService } from '../services/vueInfoService';
 import { DependencyService, State } from '../services/dependencyService';
 import { nullMode } from '../modes/nullMode';
 import { getServiceHost, IServiceHost } from '../services/typescriptService/serviceHost';
+import { SassLanguageMode } from '../modes/style/sass/sassLanguageMode';
 
 export interface VLSServices {
   infoService?: VueInfoService;
@@ -82,6 +83,7 @@ export class LanguageModes {
     css: nullMode,
     postcss: nullMode,
     scss: nullMode,
+    sass: nullMode,
     less: nullMode,
     stylus: nullMode,
     javascript: nullMode,
@@ -140,6 +142,7 @@ export class LanguageModes {
     this.modes['css'] = getCSSMode(this.documentRegions);
     this.modes['postcss'] = getPostCSSMode(this.documentRegions);
     this.modes['scss'] = getSCSSMode(this.documentRegions);
+    this.modes['sass'] = new SassLanguageMode();
     this.modes['less'] = getLESSMode(this.documentRegions);
     this.modes['stylus'] = getStylusMode(this.documentRegions);
     this.modes['javascript'] = jsMode;
@@ -166,7 +169,6 @@ export class LanguageModes {
         });
       }
     });
-
     return result;
   }
 

server/src/modes/style/sass/sassLanguageMode.ts

@@ -0,0 +1,78 @@
+import { LanguageMode } from '../../../embeddedSupport/languageModes';
+
+import { TextDocument, Range, FormattingOptions, CompletionList } from 'vscode-languageserver-types/lib/umd/main';
+
+import { Position, TextEdit } from 'vscode-css-languageservice';
+
+import { DocumentContext } from '../../../types';
+
+import { SassFormatter, SassTextDocument, SassFormatterConfig } from 'sass-formatter';
+
+export class SassLanguageMode implements LanguageMode {
+  private config: any = {};
+
+  constructor() {}
+
+  getId() {
+    return 'sass';
+  }
+
+  configure(c: any) {
+    this.config = c;
+  }
+
+  doValidation(document: TextDocument): any {
+    return undefined;
+  }
+  doComplete(document: TextDocument, position: Position) {
+    return CompletionList.create();
+  }
+  doHover(document: TextDocument, position: Position): any {
+    return undefined;
+  }
+  findDocumentHighlight(document: TextDocument, position: Position) {
+    return [];
+  }
+  findDocumentLinks(document: TextDocument, documentContext: DocumentContext) {
+    return [];
+  }
+  findDocumentSymbols(document: TextDocument) {
+    return [];
+  }
+  format(document: TextDocument, range: Range, formattingOptions: FormattingOptions) {
+    const sassConfig: SassFormatterConfig = {
+      convert: true,
+      deleteCompact: true,
+      deleteEmptyRows: true,
+      deleteWhitespace: true,
+      replaceSpacesOrTabs: true,
+      setPropertySpace: true
+    };
+    Object.assign(this.config.sass.format, sassConfig);
+    return [
+      TextEdit.replace(
+        range,
+        SassFormatter.Format(
+          new SassTextDocument(document.getText(range)),
+          {
+            insertSpaces: formattingOptions.insertSpaces,
+            tabSize: formattingOptions.tabSize
+          },
+          {
+            convert: this.config.sass.format.convert,
+            deleteCompact: this.config.sass.format.deleteCompact,
+            deleteEmptyRows: this.config.sass.format.deleteEmptyRows,
+            deleteWhitespace: this.config.sass.format.deleteWhitespace,
+            replaceSpacesOrTabs: this.config.sass.format.replaceSpacesOrTabs,
+            setPropertySpace: this.config.sass.format.setPropertySpace
+          }
+        )
+      )
+    ];
+  }
+  findDefinition(document: TextDocument, position: Position): any {
+    return undefined;
+  }
+  onDocumentRemoved(document: TextDocument) {}
+  dispose() {}
+}

server/yarn.lock

@@ -3911,6 +3911,13 @@ safe-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass-formatter@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/sass-formatter/-/sass-formatter-0.0.5.tgz#a5607119126d2b3e44c7557808c89d4ad0db3ec8"
+  integrity sha512-7wQWezrnsV4pIcyOJxb4iYEDUV32hQMQDXf++YeAqMZ6iFjFf5dwGtjSeuxZpTc9ql0RtJEI6TVb5If7NvHE1A==
+  dependencies:
+    suf-regex "^0.0.2"
+
 [email protected]:
   version "0.5.8"
   resolved "https://registry.yarnpkg.com/sax/-/sax-0.5.8.tgz#d472db228eb331c2506b0e8c15524adb939d12c1"
@@ -4282,6 +4289,11 @@ stylus@^0.54.5:
     sax "0.5.x"
     source-map "0.1.x"
 
+suf-regex@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/suf-regex/-/suf-regex-0.0.2.tgz#d15a2b5a0efccb5d7ef396f9c7d88224e909ed0b"
+  integrity sha512-ntDtKKE6sYUOzjULRNlPrs5ln/SMJ1J/ygSZrk+CYdxmT6UKOGH8wJHjJCibBaPkszK6LICs6KWgt0P/Yllk/A==
+
 [email protected]:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.4.0.tgz#1c6b337402c2137605efe19f10fec390f6faab54"

test/lsp/fixture/client/formatting/Sass.Expected.vue

@@ -0,0 +1,8 @@
+<style lang="sass">
+.foo
+  color: blue
+
+.bar
+
+  position: static
+</style>

test/lsp/fixture/client/formatting/Sass.vue

@@ -0,0 +1,10 @@
+<style lang="sass">
+.foo {
+  color: blue;
+}
+
+.bar
+
+
+  position: static
+</style>

test/lsp/formatting/basic.test.ts

@@ -14,6 +14,9 @@ describe('Should format', () => {
   const docUri3 = getDocUri('client/formatting/TwoStylus.vue');
   const expectedDocUri3 = getDocUri('client/formatting/TwoStylus.Expected.vue');
 
+  const docUri4 = getDocUri('client/formatting/Sass.vue');
+  const expectedDocUri4 = getDocUri('client/formatting/Sass.Expected.vue');
+
   before('activate', async () => {
     await activateLS();
     await showFile(docUri);
@@ -26,6 +29,7 @@ describe('Should format', () => {
     await testFormat(docUri, expectedDocUri);
     await testFormat(docUri2, expectedDocUri2);
     await testFormat(docUri3, expectedDocUri3);
+    await testFormat(docUri4, expectedDocUri4);
   });
 });