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 }