diff --git a/e2e/__projects__/style/components/External.vue b/e2e/__projects__/style/components/External.vue
new file mode 100644
index 00000000..70db7dec
--- /dev/null
+++ b/e2e/__projects__/style/components/External.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
diff --git a/e2e/__projects__/style/components/styles/external.css b/e2e/__projects__/style/components/styles/external.css
new file mode 100644
index 00000000..365af23e
--- /dev/null
+++ b/e2e/__projects__/style/components/styles/external.css
@@ -0,0 +1,3 @@
+.testClass {
+ background-color: red;
+}
diff --git a/e2e/__projects__/style/test.js b/e2e/__projects__/style/test.js
index a5280a20..f4ae204c 100644
--- a/e2e/__projects__/style/test.js
+++ b/e2e/__projects__/style/test.js
@@ -4,6 +4,7 @@ import Scss from './components/Scss.vue'
import Sass from './components/Sass.vue'
import Less from './components/Less.vue'
import PostCss from './components/PostCss.vue'
+import External from './components/External.vue'
test('processes Less', () => {
const wrapper = mount(Less)
@@ -39,3 +40,10 @@ test('process Stylus', () => {
expect(wrapper.vm.css.a).toEqual('a')
expect(wrapper.vm.$style.b).toEqual('b')
})
+
+test('process External', () => {
+ const wrapper = mount(External)
+ expect(wrapper.vm).toBeTruthy()
+ expect(wrapper.vm.$style.testClass).toEqual('testClass')
+ expect(wrapper.vm.css.a).toEqual('a')
+})
diff --git a/lib/process-style.js b/lib/process-style.js
index b1760dc3..98c4d959 100644
--- a/lib/process-style.js
+++ b/lib/process-style.js
@@ -6,6 +6,7 @@ const compileStyle = require('@vue/component-compiler-utils').compileStyle
const applyModuleNameMapper = require('./module-name-mapper-helper')
const getCustomTransformer = require('./utils').getCustomTransformer
const logResultErrors = require('./utils').logResultErrors
+const loadSrc = require('./utils').loadSrc
function getGlobalResources(resources, lang) {
let globalResources = ''
@@ -48,9 +49,13 @@ function getPreprocessOptions(lang, filePath, jestConfig) {
}
}
-module.exports = function processStyle(stylePart, filename, config = {}) {
+module.exports = function processStyle(stylePart, filePath, config = {}) {
const vueJestConfig = getVueJestConfig(config)
+ if (stylePart.src && !stylePart.content) {
+ stylePart.content = loadSrc(stylePart.src, filePath)
+ }
+
if (vueJestConfig.experimentalCSSCompile === false || !stylePart.content) {
return '{}'
}
@@ -64,21 +69,21 @@ module.exports = function processStyle(stylePart, filename, config = {}) {
// pre process
if (transformer.preprocess) {
- content = transformer.preprocess(content, filename, config, stylePart.attrs)
+ content = transformer.preprocess(content, filePath, config, stylePart.attrs)
}
// transform
if (transformer.process) {
- content = transformer.process(content, filename, config, stylePart.attrs)
+ content = transformer.process(content, filePath, config, stylePart.attrs)
} else {
const preprocessOptions = getPreprocessOptions(
stylePart.lang,
- filename,
+ filePath,
config
)
const result = compileStyle({
source: content,
- filename,
+ filePath,
preprocessLang: stylePart.lang,
preprocessOptions,
scoped: false
@@ -89,7 +94,7 @@ module.exports = function processStyle(stylePart, filename, config = {}) {
// post process
if (transformer.postprocess) {
- return transformer.postprocess(content, filename, config, stylePart.attrs)
+ return transformer.postprocess(content, filePath, config, stylePart.attrs)
}
return JSON.stringify(extractClassMap(content))
diff --git a/lib/process.js b/lib/process.js
index dd3b11af..6bc5002c 100644
--- a/lib/process.js
+++ b/lib/process.js
@@ -5,13 +5,11 @@ const generateSourceMap = require('./generate-source-map')
const typescriptTransformer = require('./typescript-transformer')
const coffeescriptTransformer = require('./coffee-transformer')
const _processStyle = require('./process-style')
-const fs = require('fs')
-const path = require('path')
const getVueJestConfig = require('./utils').getVueJestConfig
const logResultErrors = require('./utils').logResultErrors
const stripInlineSourceMap = require('./utils').stripInlineSourceMap
const getCustomTransformer = require('./utils').getCustomTransformer
-const throwError = require('./utils').throwError
+const loadSrc = require('./utils').loadSrc
const babelTransformer = require('babel-jest')
const compilerUtils = require('@vue/component-compiler-utils')
const convertSourceMap = require('convert-source-map')
@@ -28,18 +26,6 @@ function resolveTransformer(lang = 'js', vueJestConfig) {
}
}
-function loadSrc(src, filePath) {
- var dir = path.dirname(filePath)
- var srcPath = path.resolve(dir, src)
- try {
- return fs.readFileSync(srcPath, 'utf-8')
- } catch (e) {
- throwError(
- 'Failed to load src: "' + src + '" from file: "' + filePath + '"'
- )
- }
-}
-
function processScript(scriptPart, filePath, config) {
if (!scriptPart) {
return null
diff --git a/lib/utils.js b/lib/utils.js
index 29b4b886..a2e34384 100644
--- a/lib/utils.js
+++ b/lib/utils.js
@@ -2,6 +2,7 @@ const loadPartialConfig = require('@babel/core').loadPartialConfig
const createTransformer = require('ts-jest').createTransformer
const chalk = require('chalk')
const path = require('path')
+const fs = require('fs')
const fetchTransformer = function fetchTransformer(key, obj) {
for (const exp in obj) {
@@ -114,6 +115,18 @@ const logResultErrors = result => {
}
}
+const loadSrc = (src, filePath) => {
+ var dir = path.dirname(filePath)
+ var srcPath = path.resolve(dir, src)
+ try {
+ return fs.readFileSync(srcPath, 'utf-8')
+ } catch (e) {
+ throwError(
+ 'Failed to load src: "' + src + '" from file: "' + filePath + '"'
+ )
+ }
+}
+
module.exports = {
stripInlineSourceMap,
throwError,
@@ -126,5 +139,6 @@ module.exports = {
info,
warn,
resolvePath,
- fetchTransformer
+ fetchTransformer,
+ loadSrc
}