satisfy scss spec

Author: btjk

lib/process-style/index.js

@@ -1,13 +1,11 @@
-const path = require('path')
 const cssExtract = require('extract-from-css')
 
 module.exports = function processStyle (stylePart, filePath, config) {
   if (!stylePart) return {}
 
-  const dir = path.dirname(filePath)
-  const processStyleByLang = lang => require('./' + lang)(stylePart.content, dir, config)
+  const processStyleByLang = lang => require('./' + lang)(stylePart.content, filePath, config)
 
-  let cssCode = ''
+  let cssCode = stylePart.content
   switch (stylePart.lang) {
     case 'styl':
     case 'stylus':

lib/process-style/scss.js

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

lib/process-style/stylus.js

@@ -1,2 +1,8 @@
 const stylus = require('stylus')
-module.exports = (content, dir, config) => stylus.render(content, { paths: [dir, process.cwd()] })
+const path = require('path')
+
+module.exports = (content, filePath, config) => stylus.render(
+  content, {
+    paths: [path.dirname(filePath), process.cwd()]
+  }
+)

lib/process.js

@@ -88,6 +88,7 @@ module.exports = function (src, filePath) {
 
     const styleStr = parts.styles.map(ast => {
       if (!module) return
+
       const styleObj = (/^sass|less|pcss|postcss/.test(ast.lang))
         ? {}
         : processStyle(ast, filePath, config)

test/scss.spec.js

@@ -2,7 +2,7 @@ import { shallow } from 'vue-test-utils'
 import Sass from './resources/Sass.vue'
 import SassModule from './resources/SassModule.vue'
 
-describe('processes .vue file with Stylus style', () => {
+describe('processes .vue file with scss style', () => {
   it('does not error on scss or sass', () => {
     const wrapper = shallow(Sass)
     expect(wrapper.classes()).toContain('testA')