Skip to content

Commit f17f970

Browse files
Brian Tubtjk
Brian Tu
authored andcommitted
add scss compiler
exclude scss from warning include node-sass as peer dependency
1 parent 8f72df8 commit f17f970

File tree

6 files changed

+501
-41
lines changed

6 files changed

+501
-41
lines changed

lib/process-style/index.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const path = require('path')
2+
const cssExtract = require('extract-from-css')
3+
4+
module.exports = function processStyle (stylePart, filePath) {
5+
if (!stylePart) return {}
6+
7+
const dir = path.dirname(filePath)
8+
const cwd = process.cwd()
9+
const processStyleByLang = lang => require('./' + lang)(stylePart.content, dir, cwd)
10+
11+
let cssCode = ''
12+
switch (stylePart.lang) {
13+
case 'styl':
14+
case 'stylus':
15+
cssCode = processStyleByLang('stylus')
16+
break
17+
case 'scss':
18+
cssCode = processStyleByLang('scss')
19+
break
20+
}
21+
22+
const cssNames = cssExtract.extractClasses(cssCode)
23+
const obj = {}
24+
25+
for (let i = 0, l = cssNames.length; i < l; i++) {
26+
obj[cssNames[i]] = cssNames[i]
27+
}
28+
29+
return obj
30+
}

lib/process-style/scss.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const path = require('path')
2+
const fs = require('fs')
3+
const sass = require('node-sass')
4+
5+
module.exports = (content, dir, cwd) => {
6+
7+
const getRelativeImportPath = (oldImportPath, absoluteImportPath) => (/^\~/.test(oldImportPath))
8+
? oldImportPath
9+
: path.relative(cwd, absoluteImportPath);
10+
11+
const scssResources = require(cwd + '/package.json').vueJest.resources.scss
12+
.map(scssResource => path.resolve(cwd, scssResource))
13+
.filter(scssResourcePath => fs.existsSync(scssResourcePath))
14+
.map(scssResourcePath => fs.readFileSync(scssResourcePath).toString()
15+
.replace(/@import\s+(?:'([^']+)'|"([^"]+)"|([^\s;]+))/g, (entire, single, double, unquoted) => {
16+
var oldImportPath = single || double || unquoted;
17+
var absoluteImportPath = path.join(path.dirname(scssResourcePath), oldImportPath);
18+
var relImportPath = getRelativeImportPath(oldImportPath, absoluteImportPath);
19+
var newImportPath = relImportPath.split(path.sep).join('/');
20+
var lastCharacter = entire[entire.length - 1];
21+
var quote = lastCharacter === "'" || lastCharacter === '"' ? lastCharacter : '';
22+
return '@import ' + quote + newImportPath + quote;
23+
})
24+
)
25+
.join('\n')
26+
27+
return sass.renderSync({
28+
data: scssResources + content,
29+
outputStyle: 'compressed'
30+
}).css.toString()
31+
32+
}

lib/process-style/stylus.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
const stylus = require('stylus')
2+
module.exports = (content, dir, cwd) => stylus.render(content, { paths: [dir, cwd] })

lib/process.js

Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const compileBabel = require('./compilers/babel-compiler')
66
const compileTypescript = require('./compilers/typescript-compiler')
77
const compileCoffeeScript = require('./compilers/coffee-compiler')
88
const extractPropsFromFunctionalTemplate = require('./extract-props')
9+
const processStyle = require('./process-style')
910
const fs = require('fs')
1011
const path = require('path')
1112
const join = path.join
@@ -29,26 +30,6 @@ function processScript (scriptPart) {
2930
return compileBabel(scriptPart.content)
3031
}
3132

32-
function processStyle (stylePart, filePath) {
33-
if (!stylePart) return {}
34-
35-
let cssCode = stylePart.content
36-
if (/^styl|stylus$/.test(stylePart.lang)) {
37-
const dir = path.dirname(filePath)
38-
const stylus = require('stylus')
39-
cssCode = stylus.render(stylePart.content, { paths: [dir, process.cwd()] })
40-
}
41-
42-
const cssNames = cssExtract.extractClasses(cssCode)
43-
const obj = {}
44-
45-
for (let i = 0, l = cssNames.length; i < l; i++) {
46-
obj[cssNames[i]] = cssNames[i]
47-
}
48-
49-
return obj
50-
}
51-
5233
function changePartsIfFunctional (parts) {
5334
const isFunctional = parts.template && parts.template.attrs && parts.template.attrs.functional
5435
if (isFunctional) {
@@ -101,13 +82,13 @@ module.exports = function (src, filePath) {
10182
}
10283

10384
if (Array.isArray(parts.styles) && parts.styles.length > 0) {
104-
if (parts.styles.some(ast => /^scss|sass|less|pcss|postcss/.test(ast.lang))) {
105-
logger.warn('Sass/SCSS, Less and PostCSS are not currently compiled by vue-jest')
85+
if (parts.styles.some(ast => /^sass|less|pcss|postcss/.test(ast.lang))) {
86+
logger.warn('Sass, Less and PostCSS are not currently compiled by vue-jest')
10687
}
10788

10889
const styleStr = parts.styles.map(ast => {
10990
if (!module) return
110-
const styleObj = (/^scss|sass|less|pcss|postcss/.test(ast.lang))
91+
const styleObj = (/^sass|less|pcss|postcss/.test(ast.lang))
11192
? {}
11293
: processStyle(ast, filePath)
11394
const moduleName = ast.module === true ? '$style' : ast.module

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
},
5454
"peerDependencies": {
5555
"babel-core": "^6.25.0 || ^7.0.0-0",
56+
"node-sass": "^4.7.2",
5657
"vue": "^2.x",
5758
"vue-template-compiler": "^2.x"
5859
},

0 commit comments

Comments
 (0)