feat: support linting in vue single-file components with scss

Author: jonboiser

.circleci/config.yml

@@ -7,7 +7,7 @@ defaults: &defaults
   environment:
     # Pre-install the required language file as package activation doesn't wait
     # for the installation to complete.
-    APM_TEST_PACKAGES: "language-postcss"
+    APM_TEST_PACKAGES: "language-postcss language-vue"
   steps:
     # Restore project state
     - attach_workspace:

.travis.yml

@@ -8,7 +8,7 @@ env:
   global:
     # Pre-install the required language file as package activation doesn't wait
     # for the installation to complete.
-    - APM_TEST_PACKAGES="language-postcss"
+    - APM_TEST_PACKAGES="language-postcss language-vue"
 
 jobs:
   include:

appveyor.yml

@@ -1,6 +1,6 @@
 ### Project specific config ###
 environment:
-  APM_TEST_PACKAGES: language-postcss
+  APM_TEST_PACKAGES: language-postcss language-vue
 
   matrix:
   - ATOM_CHANNEL: stable

circle.yml

@@ -0,0 +1,14 @@
+dependencies:
+  override:
+    - curl -s -O https://raw.githubusercontent.com/atom/ci/master/build-package.sh
+    - chmod u+x build-package.sh
+
+test:
+  override:
+    - ./build-package.sh
+
+machine:
+  environment:
+    # Pre-install the required language file as package activation doesn't wait
+    # for the installation to complete.
+    APM_TEST_PACKAGES: "language-postcss language-vue"

lib/index.js

@@ -67,7 +67,8 @@ export default {
       'source.less',
       'source.css.less',
       'source.css.postcss',
-      'source.css.postcss.sugarss'
+      'source.css.postcss.sugarss',
+      'source.css.scss.embedded.html'
     ];
   },
 

spec/fixtures/vue/.stylelintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "block-no-empty": true
+  }
+}

spec/fixtures/vue/badSCSS.vue

@@ -0,0 +1,9 @@
+<template></template>
+
+
+<script></script>
+
+
+<style lang="scss" scoped>
+a {}
+</style>

spec/fixtures/vue/goodSCSS.vue

@@ -0,0 +1,11 @@
+<template></template>
+
+
+<script></script>
+
+
+<style lang="scss" scoped>
+a {
+  color: red;
+}
+</style>

spec/linter-stylelint-spec.js

@@ -249,4 +249,30 @@ describe('The stylelint provider for Linter', () => {
       expect(messages.length).toBe(0);
     });
   });
+
+  describe('works with Vue Single File Components', () => {
+    const goodVueSCSS = path.join(fixtures, 'vue', 'goodSCSS.vue');
+    const badVueSCSS = path.join(fixtures, 'vue', 'badSCSS.vue');
+
+    beforeEach(async () => {
+      await atom.packages.activatePackage('language-vue');
+    });
+
+    it('shows lint messages when found', async () => {
+      const editor = await atom.workspace.open(badVueSCSS);
+      const messages = await lint(editor);
+
+      expect(messages[0].severity).toBe('error');
+      expect(messages[0].excerpt).toBe(blockNoEmpty);
+      expect(messages[0].url).toBe(blockNoEmptyUrl);
+      expect(messages[0].location.file).toBe(badVueSCSS);
+      expect(messages[0].location.position).toEqual([[7, 2], [7, 4]]);
+    });
+
+    it('finds nothing wrong with a valid file', async () => {
+      const editor = await atom.workspace.open(goodVueSCSS);
+      const messages = await lint(editor);
+      expect(messages.length).toBe(0);
+    });
+  });
 });