add pre & post css transform callbacks to customize css transformation behavior

Author: yohodopo

lib/compilers/helpers/module-name-mapper-helper.js

@@ -1,17 +1,22 @@
 const path = require('path')
-
+const matchModuleImport = /^[^?]*~/
 /**
  * Resolves the path to the file locally.
  *
  * @param {String} to - the name of the file to resolve to
- * @param {String} localPath - the local path
+ * @param {String} importPath - the local path
+ * @param {String} fileType - extn of the file to be resolved
  * @returns {String} path - path to the file to import
  */
-function localResolve(to, localPath) {
-  if (localPath.startsWith('/')) {
-    return localPath
+function resolve(to, importPath, fileType) {
+  importPath =
+    path.extname(importPath) === '' ? `${importPath}.${fileType}` : importPath
+  if (importPath.startsWith('/')) {
+    return importPath
+  } else if (matchModuleImport.test(importPath)) {
+    return require.resolve(importPath.replace(matchModuleImport, ''))
   }
-  return path.join(path.dirname(to), localPath)
+  return path.join(path.dirname(to), importPath)
 }
 
 /**
@@ -20,12 +25,14 @@ function localResolve(to, localPath) {
  * @param {String} source - the original string
  * @param {String} filePath - the path of the current file (where the source originates)
  * @param {Object} jestConfig - the jestConfig holding the moduleNameMapper settings
+ * @param {Object} fileType - extn of the file to be resolved
  * @returns {String} path - the final path to import (including replacements via moduleNameMapper)
  */
 module.exports = function applyModuleNameMapper(
   source,
   filePath,
-  jestConfig = {}
+  jestConfig = {},
+  fileType = ''
 ) {
   if (!jestConfig.moduleNameMapper) return source
 
@@ -47,5 +54,5 @@ module.exports = function applyModuleNameMapper(
     )
   }, source)
 
-  return localResolve(filePath, importPath)
+  return resolve(filePath, importPath, fileType)
 }

lib/compilers/sass-compiler.js

@@ -28,7 +28,8 @@ module.exports = (content, filePath, jestConfig = {}) => {
           file: applyModuleNameMapper(
             url,
             prev === 'stdin' ? filePath : prev,
-            jestConfig
+            jestConfig,
+            'sass'
           )
         })
       })

lib/compilers/scss-compiler.js

@@ -1,5 +1,3 @@
-const path = require('path')
-const fs = require('fs')
 const ensureRequire = require('../ensure-require')
 const getVueJestConfig = require('../utils').getVueJestConfig
 const warn = require('../utils').warn
@@ -19,26 +17,17 @@ module.exports = (content, filePath, jestConfig = {}) => {
 
   ensureRequire('scss', ['node-sass'])
   const sass = require('node-sass')
-
-  let scssResources = ''
-  if (vueJestConfig.resources && vueJestConfig.resources.scss) {
-    scssResources = vueJestConfig.resources.scss
-      .map(scssResource => path.resolve(process.cwd(), scssResource))
-      .filter(scssResourcePath => fs.existsSync(scssResourcePath))
-      .map(scssResourcePath => fs.readFileSync(scssResourcePath).toString())
-      .join('\n')
-  }
-
   try {
     return sass
       .renderSync({
-        data: scssResources + content,
+        data: content,
         outputStyle: 'compressed',
         importer: (url, prev, done) => ({
           file: applyModuleNameMapper(
             url,
             prev === 'stdin' ? filePath : prev,
-            jestConfig
+            jestConfig,
+            'scss'
           )
         })
       })

lib/process-style.js

@@ -1,19 +1,73 @@
+const path = require('path')
+const fs = require('fs')
 const getVueJestConfig = require('./utils').getVueJestConfig
+const warn = require('./utils').warn
 const cssExtract = require('extract-from-css')
 
 module.exports = function processStyle(stylePart, filePath, jestConfig = {}) {
   const vueJestConfig = getVueJestConfig(jestConfig)
+  let cssTransform =
+    vueJestConfig['cssTransform'] &&
+    vueJestConfig['cssTransform'][stylePart.lang]
+  if (cssTransform && /^less|pcss|postcss/.test(stylePart.lang)) {
+    !vueJestConfig.hideStyleWarn &&
+      warn(
+        'Less and PostCSS transforms are not currently supported by vue-jest'
+      )
+  }
+  const validTransforms =
+    cssTransform &&
+    !/^less|pcss|postcss/.test(stylePart.lang) &&
+    (cssTransform.pre || cssTransform.post)
+  cssTransform = cssTransform || {}
 
   if (!stylePart || vueJestConfig.experimentalCSSCompile === false) {
     return {}
   }
 
-  const processStyleByLang = lang =>
-    require('./compilers/' + lang + '-compiler')(
-      stylePart.content,
+  const globaResources = lang => {
+    let globalResources = ''
+    if (vueJestConfig.resources && vueJestConfig.resources[lang]) {
+      globalResources = vueJestConfig.resources[lang]
+        .map(resource => path.resolve(process.cwd(), resource))
+        .filter(resourcePath => fs.existsSync(resourcePath))
+        .map(resourcePath => fs.readFileSync(resourcePath).toString())
+        .join('\n')
+    }
+    return globalResources
+  }
+
+  const cssTransfomer = (transform, content) => {
+    if (!validTransforms || !transform || typeof transform !== 'string') {
+      return content
+    }
+
+    return require(path.resolve(process.cwd(), transform))(
+      content,
+      vueJestConfig,
+      stylePart.attrs
+    )
+  }
+
+  const processStyleByLang = lang => {
+    const content = globaResources(lang) + stylePart.content
+    const preProcessedContent = cssTransfomer(cssTransform.pre, content)
+    return require('./compilers/' + lang + '-compiler')(
+      preProcessedContent,
       filePath,
       jestConfig
     )
+  }
+
+  const extractClassMap = cssCode => {
+    const cssNames = cssExtract.extractClasses(cssCode)
+    const obj = {}
+    for (let i = 0, l = cssNames.length; i < l; i++) {
+      obj[cssNames[i]] = cssNames[i]
+    }
+
+    return obj
+  }
 
   let cssCode = stylePart.content
   switch (stylePart.lang) {
@@ -29,12 +83,16 @@ module.exports = function processStyle(stylePart, filePath, jestConfig = {}) {
       break
   }
 
-  const cssNames = cssExtract.extractClasses(cssCode)
-
-  const obj = {}
-  for (let i = 0, l = cssNames.length; i < l; i++) {
-    obj[cssNames[i]] = cssNames[i]
+  if (validTransforms) {
+    const locals = cssTransfomer(cssTransform.post, cssCode)
+    if (typeof locals !== 'object') {
+      !vueJestConfig.hideStyleWarn &&
+        warn(
+          'post-transformers are expected to return an object with key value pair as class names of the component'
+        )
+    }
+    return locals
+  } else {
+    return extractClassMap(cssCode)
   }
-
-  return obj
 }