From 032579452ec5fca2d53b2982eebf6b265a39610c Mon Sep 17 00:00:00 2001
From: YutamaKotaro <california.dreamin.never.die@gmail.com>
Date: Thu, 27 May 2021 23:56:18 +0900
Subject: [PATCH 1/2] add css-module feature

---
 .../basic/__snapshots__/test.js.snap          |  2 +-
 .../style/components/External.vue             |  2 +-
 e2e/__projects__/style/components/Less.vue    | 21 +++++++++++-
 e2e/__projects__/style/components/PostCss.vue | 20 ++++++++---
 e2e/__projects__/style/components/Sass.vue    | 21 +++++++++++-
 e2e/__projects__/style/components/Scss.vue    | 22 +++++++++++-
 e2e/__projects__/style/components/Stylus.vue  | 18 +++++++++-
 e2e/__projects__/style/test.js                | 34 ++++++++++++++-----
 e2e/test-runner.js                            |  2 +-
 lib/generate-code.js                          | 18 +++++++++-
 lib/process-style.js                          |  1 +
 lib/process.js                                | 24 ++++++-------
 12 files changed, 152 insertions(+), 33 deletions(-)

diff --git a/e2e/__projects__/basic/__snapshots__/test.js.snap b/e2e/__projects__/basic/__snapshots__/test.js.snap
index 5b8d3ecf..a10f241c 100644
--- a/e2e/__projects__/basic/__snapshots__/test.js.snap
+++ b/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`] = `
diff --git a/e2e/__projects__/style/components/External.vue b/e2e/__projects__/style/components/External.vue
index 70db7dec..90b1df56 100644
--- a/e2e/__projects__/style/components/External.vue
+++ b/e2e/__projects__/style/components/External.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="$style.testClass">
-    <div class="a" />
+    <div :class="css.a" />
   </div>
 </template>
 
diff --git a/e2e/__projects__/style/components/Less.vue b/e2e/__projects__/style/components/Less.vue
index 2731b5dc..79b80341 100644
--- a/e2e/__projects__/style/components/Less.vue
+++ b/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>
diff --git a/e2e/__projects__/style/components/PostCss.vue b/e2e/__projects__/style/components/PostCss.vue
index 6aa351c7..a96aadec 100644
--- a/e2e/__projects__/style/components/PostCss.vue
+++ b/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>
diff --git a/e2e/__projects__/style/components/Sass.vue b/e2e/__projects__/style/components/Sass.vue
index a76ec392..77228766 100644
--- a/e2e/__projects__/style/components/Sass.vue
+++ b/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"
 
diff --git a/e2e/__projects__/style/components/Scss.vue b/e2e/__projects__/style/components/Scss.vue
index fd801f8a..5f987a89 100644
--- a/e2e/__projects__/style/components/Scss.vue
+++ b/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';
 
diff --git a/e2e/__projects__/style/components/Stylus.vue b/e2e/__projects__/style/components/Stylus.vue
index 7a790344..b1db654c 100644
--- a/e2e/__projects__/style/components/Stylus.vue
+++ b/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';
 
diff --git a/e2e/__projects__/style/test.js b/e2e/__projects__/style/test.js
index d3a27fc8..8940dd42 100644
--- a/e2e/__projects__/style/test.js
+++ b/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')
diff --git a/e2e/test-runner.js b/e2e/test-runner.js
index e74069b9..6bc0be41 100644
--- a/e2e/test-runner.js
+++ b/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) {
diff --git a/lib/generate-code.js b/lib/generate-code.js
index 9e0b9ca1..f4af783a 100644
--- a/lib/generate-code.js
+++ b/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 })
 }
diff --git a/lib/process-style.js b/lib/process-style.js
index 0f7b944d..5c679c10 100644
--- a/lib/process-style.js
+++ b/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,
diff --git a/lib/process.js b/lib/process.js
index ef1b5a7d..df5c735e 100644
--- a/lib/process.js
+++ b/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,7 +130,6 @@ function processStyle(styles, filename, config) {
 
   return filteredStyles.length ? filteredStyles : null
 }
-*/
 
 module.exports = function(src, filename, config) {
   const { descriptor } = parse(src, { filename })
@@ -139,23 +137,25 @@ module.exports = function(src, filename, config) {
   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 {
     code: output.code,
-    map: output.map.toString()
+    map: output.map.toString(),
+    __cssModules: {
+      $style: stylesResult
+    }
   }
 }

From 33aba389e157dc7aa1fa88b2e6da748afcb36b92 Mon Sep 17 00:00:00 2001
From: YutamaKotaro <california.dreamin.never.die@gmail.com>
Date: Fri, 28 May 2021 08:47:44 +0900
Subject: [PATCH 2/2] remove excess code

---
 lib/process.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/lib/process.js b/lib/process.js
index df5c735e..d16f330f 100644
--- a/lib/process.js
+++ b/lib/process.js
@@ -153,9 +153,6 @@ module.exports = function(src, filename, config) {
 
   return {
     code: output.code,
-    map: output.map.toString(),
-    __cssModules: {
-      $style: stylesResult
-    }
+    map: output.map.toString()
   }
 }