feat: handle external css (#158)

Author: hewIngram

e2e/__projects__/style/components/External.vue

@@ -0,0 +1,13 @@
+<template>
+  <div :class="$style.testClass">
+    <div class="a" />
+  </div>
+</template>
+
+<style module src="./styles/external.css" />
+
+<style module="css">
+.a {
+  background: color(red a(90%));
+}
+</style>

e2e/__projects__/style/components/styles/external.css

@@ -0,0 +1,3 @@
+.testClass {
+  background-color: red;
+}

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')
+})

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))

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

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
 }