add scss compiler

exclude scss from warning

include node-sass as peer dependency

Author: Brian Tu

lib/process-style/index.js

@@ -0,0 +1,30 @@
+const path = require('path')
+const cssExtract = require('extract-from-css')
+
+module.exports = function processStyle (stylePart, filePath) {
+  if (!stylePart) return {}
+
+  const dir = path.dirname(filePath)
+  const cwd = process.cwd()
+  const processStyleByLang = lang => require('./' + lang)(stylePart.content, dir, cwd)
+
+  let cssCode = ''
+  switch (stylePart.lang) {
+    case 'styl':
+    case 'stylus':
+      cssCode = processStyleByLang('stylus')
+      break
+    case 'scss':
+      cssCode = processStyleByLang('scss')
+      break
+  }
+
+  const cssNames = cssExtract.extractClasses(cssCode)
+  const obj = {}
+
+  for (let i = 0, l = cssNames.length; i < l; i++) {
+    obj[cssNames[i]] = cssNames[i]
+  }
+
+  return obj
+}

lib/process-style/scss.js

@@ -0,0 +1,32 @@
+const path = require('path')
+const fs = require('fs')
+const sass = require('node-sass')
+
+module.exports = (content, dir, cwd) => {
+
+  const getRelativeImportPath = (oldImportPath, absoluteImportPath) => (/^\~/.test(oldImportPath))
+    ? oldImportPath
+    : path.relative(cwd, absoluteImportPath);
+
+  const scssResources = require(cwd + '/package.json').vueJest.resources.scss
+    .map(scssResource => path.resolve(cwd, scssResource))
+    .filter(scssResourcePath => fs.existsSync(scssResourcePath))
+    .map(scssResourcePath => fs.readFileSync(scssResourcePath).toString()
+      .replace(/@import\s+(?:'([^']+)'|"([^"]+)"|([^\s;]+))/g, (entire, single, double, unquoted) => {
+        var oldImportPath = single || double || unquoted;
+        var absoluteImportPath = path.join(path.dirname(scssResourcePath), oldImportPath);
+        var relImportPath = getRelativeImportPath(oldImportPath, absoluteImportPath);
+        var newImportPath = relImportPath.split(path.sep).join('/');
+        var lastCharacter = entire[entire.length - 1];
+        var quote = lastCharacter === "'" || lastCharacter === '"' ? lastCharacter : '';
+        return '@import ' + quote + newImportPath + quote;
+      })
+    )
+    .join('\n')
+
+  return sass.renderSync({
+    data: scssResources + content,
+    outputStyle: 'compressed'
+  }).css.toString()
+  
+}

lib/process-style/stylus.js

@@ -0,0 +1,2 @@
+const stylus = require('stylus')
+module.exports = (content, dir, cwd) => stylus.render(content, { paths: [dir, cwd] })

lib/process.js

@@ -6,6 +6,7 @@ const compileBabel = require('./compilers/babel-compiler')
 const compileTypescript = require('./compilers/typescript-compiler')
 const compileCoffeeScript = require('./compilers/coffee-compiler')
 const extractPropsFromFunctionalTemplate = require('./extract-props')
+const processStyle = require('./process-style')
 const fs = require('fs')
 const path = require('path')
 const join = path.join
@@ -29,26 +30,6 @@ function processScript (scriptPart) {
   return compileBabel(scriptPart.content)
 }
 
-function processStyle (stylePart, filePath) {
-  if (!stylePart) return {}
-
-  let cssCode = stylePart.content
-  if (/^styl|stylus$/.test(stylePart.lang)) {
-    const dir = path.dirname(filePath)
-    const stylus = require('stylus')
-    cssCode = stylus.render(stylePart.content, { paths: [dir, process.cwd()] })
-  }
-
-  const cssNames = cssExtract.extractClasses(cssCode)
-  const obj = {}
-
-  for (let i = 0, l = cssNames.length; i < l; i++) {
-    obj[cssNames[i]] = cssNames[i]
-  }
-
-  return obj
-}
-
 function changePartsIfFunctional (parts) {
   const isFunctional = parts.template && parts.template.attrs && parts.template.attrs.functional
   if (isFunctional) {
@@ -101,13 +82,13 @@ module.exports = function (src, filePath) {
   }
 
   if (Array.isArray(parts.styles) && parts.styles.length > 0) {
-    if (parts.styles.some(ast => /^scss|sass|less|pcss|postcss/.test(ast.lang))) {
-      logger.warn('Sass/SCSS, Less and PostCSS are not currently compiled by vue-jest')
+    if (parts.styles.some(ast => /^sass|less|pcss|postcss/.test(ast.lang))) {
+      logger.warn('Sass, Less and PostCSS are not currently compiled by vue-jest')
     }
 
     const styleStr = parts.styles.map(ast => {
       if (!module) return
-      const styleObj = (/^scss|sass|less|pcss|postcss/.test(ast.lang))
+      const styleObj = (/^sass|less|pcss|postcss/.test(ast.lang))
         ? {}
         : processStyle(ast, filePath)
       const moduleName = ast.module === true ? '$style' : ast.module

package.json

@@ -53,6 +53,7 @@
   },
   "peerDependencies": {
     "babel-core": "^6.25.0 || ^7.0.0-0",
+    "node-sass": "^4.7.2",
     "vue": "^2.x",
     "vue-template-compiler": "^2.x"
   },