add css-module feature

e2e/__projects__/basic/__snapshots__/test.js.snap

@@ -42,7 +42,7 @@ function render(_ctx, _cache) {
     ]));
 }
 exports.render = render;
-;exports.default = {...exports.default, render};"
+;exports.default = {...exports.default, render};;exports.default = {...exports.default, __cssModules: {\\"css\\":{\\"testA\\":\\"testA\\"},\\"$style\\":{\\"testB\\":\\"testB\\"}}}"
 `;
 
 exports[`generates source maps using src attributes 1`] = `

e2e/__projects__/style/components/External.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="$style.testClass">
-    <div class="a" />
+    <div :class="css.a" />
   </div>
 </template>
 

e2e/__projects__/style/components/Less.vue

@@ -1,9 +1,28 @@
 <template>
-  <div />
+  <div>
+    <div :class="$style.a">a</div>
+    <div :class="styles.b">b</div>
+  </div>
 </template>
 
+<script>
+import { useCssModule, defineComponent } from 'vue'
+export default defineComponent({
+  setup() {
+    const styles = useCssModule()
+
+    return {
+      styles
+    }
+  }
+})
+</script>
+
 <style module lang="less">
 .a {
   background-color: @primary-color;
 }
+.b {
+  color: @primary-color;
+}
 </style>

e2e/__projects__/style/components/PostCss.vue

@@ -1,18 +1,30 @@
 <template>
   <section>
-    <div :class="$style.a"></div>
-    <div :class="$style.b"></div>
+    <div :class="$style.c"></div>
+    <div :class="style.d"></div>
   </section>
 </template>
 
+<script>
+import { useCssModule, defineComponent } from 'vue'
+export default defineComponent({
+  setup() {
+    const style = useCssModule()
+    return {
+      style
+    }
+  }
+})
+</script>
+
 <style module lang="postcss">
-.a {
+.c {
   background: color(purple a(90%));
 }
 </style>
 
 <style module lang="pcss">
-.b {
+.d {
   background: color(red a(90%));
 }
 </style>

e2e/__projects__/style/components/Sass.vue

@@ -1,7 +1,26 @@
 <template>
-  <div />
+  <div>
+    <div :class="$style.a"></div>
+    <div :class="style.b"></div>
+    <div :class="$style.c"></div>
+    <div :class="style.d"></div>
+    <div :class="$style.e"></div>
+  </div>
 </template>
 
+<script>
+import { defineComponent, useCssModule } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const style = useCssModule()
+    return {
+      style
+    }
+  }
+})
+</script>
+
 <style module lang="sass">
 @import "~__styles/sass-a"
 

e2e/__projects__/style/components/Scss.vue

@@ -1,7 +1,27 @@
 <template>
-  <div />
+  <div>
+    <div :class="$style.a" />
+    <div :class="style.b" />
+    <div :class="$style.c" />
+    <div :class="style.d" />
+    <div :class="$style.e" />
+    <div :class="style.f" />
+  </div>
 </template>
 
+<script>
+import { defineComponent, useCssModule } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const style = useCssModule()
+    return {
+      style
+    }
+  }
+})
+</script>
+
 <style lang="scss" module>
 @import '~__styles/scss-a';
 

e2e/__projects__/style/components/Stylus.vue

@@ -1,7 +1,23 @@
 <template>
-  <div />
+  <div>
+    <div :class="css.a" />
+    <div :class="style.b" />
+  </div>
 </template>
 
+<script>
+import { defineComponent, useCssModule } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const style = useCssModule()
+    return {
+      style
+    }
+  }
+})
+</script>
+
 <style lang="stylus" module="css">
 @import './relative/resource';
 

e2e/__projects__/style/test.js

@@ -2,10 +2,10 @@
 //
 import { createApp, h } from 'vue'
 
+import Less from './components/Less.vue'
 import Stylus from './components/Stylus.vue'
 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'
 
@@ -22,43 +22,59 @@ function mount(Component, props, slots) {
   createApp(Parent).mount(el)
 }
 
-xtest('processes Less', () => {
+test('processes Less', () => {
   mount(Less)
-  // expect(wrapper.is('div')).toBeTruthy()
-  // expect(wrapper.vm.$style.a).toEqual('a')
+  expect(document.getElementById('app').innerHTML).toEqual(
+    '<div><div class="a">a</div><div class="b">b</div></div>'
+  )
 })
 
-xtest('processes PostCSS', () => {
+test('processes PostCSS', () => {
   mount(PostCss)
+  expect(document.getElementById('app').innerHTML).toEqual(
+    '<section><div class="c"></div><div class="d"></div></section>'
+  )
   // expect(wrapper.is('section')).toBeTruthy()
   // expect(wrapper.vm.$style.a).toEqual('a')
   // expect(wrapper.vm.$style.b).toEqual('b')
 })
 
-xtest('processes Sass', () => {
+test('processes Sass', () => {
   mount(Sass)
+  expect(document.getElementById('app').innerHTML).toEqual(
+    '<div><div class="a"></div><div class="b"></div><div class="c"></div><div class=""></div><div class="e"></div></div>'
+  )
   // expect(wrapper.vm.$style.a).toEqual('a')
   // expect(wrapper.vm.$style.b).toEqual('b')
   // expect(wrapper.vm.$style.c).toEqual('c')
   // expect(wrapper.vm.$style.light).toBeUndefined()
 })
 
-xtest('processes SCSS with resources', () => {
+test('processes SCSS with resources', () => {
   mount(Scss)
+  expect(document.getElementById('app').innerHTML).toEqual(
+    '<div><div class="a"></div><div class="b"></div><div class="c"></div><div class=""></div><div class=""></div><div class="f"></div></div>'
+  )
   // expect(wrapper.vm.$style.a).toEqual('a')
   // expect(wrapper.vm.$style.b).toEqual('b')
   // expect(wrapper.vm.$style.c).toEqual('c')
 })
 
-xtest('process Stylus', () => {
+test('process Stylus', () => {
   mount(Stylus)
+  expect(document.getElementById('app').innerHTML).toEqual(
+    '<div><div class="a"></div><div class="b"></div></div>'
+  )
   // expect(wrapper.vm).toBeTruthy()
   // expect(wrapper.vm.css.a).toEqual('a')
   // expect(wrapper.vm.$style.b).toEqual('b')
 })
 
-xtest('process External', () => {
+test('process External', () => {
   mount(External)
+  expect(document.getElementById('app').innerHTML).toEqual(
+    '<div class="testClass"><div class="a"></div></div>'
+  )
   // expect(wrapper.vm).toBeTruthy()
   // expect(wrapper.vm.$style.xtestClass).toEqual('xtestClass')
   // expect(wrapper.vm.css.a).toEqual('a')

e2e/test-runner.js

@@ -18,6 +18,7 @@ function info(msg) {
   console.info(chalk.blue('\n[vue-jest]: ' + msg + '\n'))
 }
 
+// eslint-disable-next-line no-unused-vars
 function runTest(dir) {
   const resolvedPath = path.resolve(__dirname, '__projects__', dir)
 
@@ -71,7 +72,6 @@ async function testRunner() {
   const directories = fs
     .readdirSync(path.resolve(__dirname, '__projects__'))
     .filter(d => !IGNORE_FILES.includes(d))
-
   const matches = args.filter(d => directories.includes(d))
 
   if (matches.length) {

lib/generate-code.js

@@ -19,7 +19,8 @@ module.exports = function generateCode(
   scriptResult,
   scriptSetupResult,
   templateResult,
-  filename
+  filename,
+  stylesResult
 ) {
   var node = new SourceNode(null, null, null)
   addToSourceMap(node, scriptResult)
@@ -46,6 +47,21 @@ module.exports = function generateCode(
   } else {
     // node.add(';exports.default = {...exports.default};')
   }
+  if (Array.isArray(stylesResult)) {
+    const mergedStyle = {}
+    stylesResult.forEach(styleObj => {
+      const { code, moduleName } = styleObj
+      mergedStyle[moduleName] = {
+        ...(mergedStyle[moduleName] || {}),
+        ...(JSON.parse(code) || {})
+      }
+    })
+    node.add(
+      `;exports.default = {...exports.default, __cssModules: ${JSON.stringify(
+        mergedStyle
+      )}}`
+    )
+  }
 
   return node.toStringWithSourceMap({ file: filename })
 }

lib/process-style.js

@@ -82,6 +82,7 @@ module.exports = function processStyle(stylePart, filePath, config = {}) {
       config
     )
     const result = compileStyle({
+      id: `vue-jest-${filePath}`,
       source: content,
       filePath,
       preprocessLang: stylePart.lang,

lib/process.js

@@ -4,7 +4,7 @@ const babelTransformer = require('babel-jest')
 
 const typescriptTransformer = require('./transformers/typescript')
 const coffeescriptTransformer = require('./transformers/coffee')
-// const _processStyle = require('./process-style')
+const _processStyle = require('./process-style')
 // const processCustomBlocks = require('./process-custom-blocks')
 const getVueJestConfig = require('./utils').getVueJestConfig
 const getTsJestConfig = require('./utils').getTsJestConfig
@@ -116,7 +116,6 @@ function processTemplate(descriptor, filename, config) {
   }
 }
 
-/*
 function processStyle(styles, filename, config) {
   if (!styles) {
     return null
@@ -131,27 +130,25 @@ function processStyle(styles, filename, config) {
 
   return filteredStyles.length ? filteredStyles : null
 }
-*/
 
 module.exports = function(src, filename, config) {
   const { descriptor } = parse(src, { filename })
 
   const templateResult = processTemplate(descriptor, filename, config)
   const scriptResult = processScript(descriptor.script, filename, config)
   const scriptSetupResult = processScriptSetup(descriptor, filename, config)
-  /*
   const stylesResult = processStyle(descriptor.styles, filename, config)
-  const customBlocksResult = processCustomBlocks(
-    descriptor.customBlocks,
-    filename,
-    config
-  )
-  */
+  // const customBlocksResult = processCustomBlocks(
+  //   descriptor.customBlocks,
+  //   filename,
+  //   config
+  // )
   const output = generateCode(
     scriptResult,
     scriptSetupResult,
     templateResult,
-    filename
+    filename,
+    stylesResult
   )
 
   return {