fix: PostCSS mixins cause style parsing to break (#425)

Replaced `extract-from-css` which is outdated (7yo) with `css-tree`

Resolves #424

Author: sevilyilmaz

e2e/2.x/custom-transformers/scss-transformer.js

@@ -1,14 +1,18 @@
-const cssExtract = require('extract-from-css')
+const cssTree = require('css-tree')
+
 module.exports = {
   preprocess: function preprocess(src, filepath, config, attrs) {
     return `${src}\n .g{width: 10px}`
   },
   postprocess: function postprocess(src, filepath, config, attrs) {
-    const cssNames = cssExtract.extractClasses(src)
-    const obj = {}
-    for (let i = 0, l = cssNames.length; i < l; i++) {
-      obj[cssNames[i]] = cssNames[i]
-    }
+    const ast = cssTree.parse(src)
+    const obj = cssTree
+      .findAll(ast, node => node.type === 'ClassSelector')
+      .reduce((acc, cssNode) => {
+        acc[cssNode.name] = cssNode.name
+
+        return acc
+      }, {})
 
     if (!attrs.themed) {
       return JSON.stringify(obj)

e2e/2.x/style/components/PostCss.vue

@@ -1,14 +1,27 @@
 <template>
   <section>
-    <div :class="$style.a"></div>
-    <div :class="$style.b"></div>
+    <div :class="$style.a" />
+    <div :class="$style.b" />
   </section>
 </template>
 
 <style module lang="postcss">
+:root {
+  --theme_color_background_base: #f00;
+}
+
+@define-mixin hover {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--theme_color_background_base);
+}
+
 .a {
   background: color(purple a(90%));
 }
+
+.a:hover {
+  @mixin hover;
+}
 </style>
 
 <style module lang="pcss">

e2e/3.x/custom-transformers/package.json

@@ -13,13 +13,13 @@
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.0",
     "@vue/test-utils": "^2.0.0-rc.10",
+    "@vue/vue3-jest": "^27.0.0-alpha.1",
     "babel-jest": "^27.0.0",
-    "extract-from-css": "^0.4.4",
+    "css-tree": "^2.0.1",
     "jest": "^27.0.0",
     "postcss": "^7.0.13",
     "postcss-color-function": "^4.0.1",
-    "sass": "^1.23.7",
-    "@vue/vue3-jest": "^27.0.0-alpha.1"
+    "sass": "^1.23.7"
   },
   "jest": {
     "testEnvironment": "jsdom",

e2e/3.x/custom-transformers/scss-transformer.js

@@ -1,14 +1,18 @@
-const cssExtract = require('extract-from-css')
+const cssTree = require('css-tree')
+
 module.exports = {
   preprocess: function preprocess(src, filepath, config, attrs) {
     return `${src}\n .g{width: 10px}`
   },
   postprocess: function postprocess(src, filepath, config, attrs) {
-    const cssNames = cssExtract.extractClasses(src)
-    const obj = {}
-    for (let i = 0, l = cssNames.length; i < l; i++) {
-      obj[cssNames[i]] = cssNames[i]
-    }
+    const ast = cssTree.parse(src)
+    const obj = cssTree
+      .findAll(ast, node => node.type === 'ClassSelector')
+      .reduce((acc, cssNode) => {
+        acc[cssNode.name] = cssNode.name
+
+        return acc
+      }, {})
 
     if (!attrs.themed) {
       return JSON.stringify(obj)

e2e/3.x/style/components/PostCss.vue

@@ -1,7 +1,7 @@
 <template>
   <section>
-    <div :class="$style.c"></div>
-    <div :class="style.d"></div>
+    <div :class="$style.c" />
+    <div :class="style.d" />
   </section>
 </template>
 
@@ -18,9 +18,22 @@ export default defineComponent({
 </script>
 
 <style module lang="postcss">
+:root {
+  --theme_color_background_base: #f00;
+}
+
+@define-mixin hover {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--theme_color_background_base);
+}
+
 .c {
   background: color(purple a(90%));
 }
+
+.c:hover {
+  @mixin hover;
+}
 </style>
 
 <style module lang="pcss">

packages/vue2-jest/lib/process-style.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const fs = require('fs')
-const cssExtract = require('extract-from-css')
+const cssTree = require('css-tree')
 const getVueJestConfig = require('./utils').getVueJestConfig
 const compileStyle = require('@vue/component-compiler-utils').compileStyle
 const applyModuleNameMapper = require('./module-name-mapper-helper')
@@ -21,12 +21,15 @@ function getGlobalResources(resources, lang) {
 }
 
 function extractClassMap(cssCode) {
-  const cssNames = cssExtract.extractClasses(cssCode)
-  const cssMap = {}
-  for (let i = 0, l = cssNames.length; i < l; i++) {
-    cssMap[cssNames[i]] = cssNames[i]
-  }
-  return cssMap
+  const ast = cssTree.parse(cssCode)
+
+  return cssTree
+    .findAll(ast, node => node.type === 'ClassSelector')
+    .reduce((acc, cssNode) => {
+      acc[cssNode.name] = cssNode.name
+
+      return acc
+    }, {})
 }
 
 function getPreprocessOptions(lang, filePath, jestConfig) {

packages/vue2-jest/package.json

@@ -54,7 +54,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.2.0",
     "@vue/component-compiler-utils": "^3.1.0",
     "chalk": "^2.1.0",
-    "extract-from-css": "^0.4.4",
+    "css-tree": "^2.0.1",
     "source-map": "0.5.6"
   },
   "repository": {

packages/vue3-jest/lib/process-style.js

@@ -1,7 +1,7 @@
 const { compileStyle } = require('@vue/compiler-sfc')
 const path = require('path')
 const fs = require('fs')
-const cssExtract = require('extract-from-css')
+const cssTree = require('css-tree')
 const getVueJestConfig = require('./utils').getVueJestConfig
 const applyModuleNameMapper = require('./module-name-mapper-helper')
 const getCustomTransformer = require('./utils').getCustomTransformer
@@ -21,12 +21,15 @@ function getGlobalResources(resources, lang) {
 }
 
 function extractClassMap(cssCode) {
-  const cssNames = cssExtract.extractClasses(cssCode)
-  const cssMap = {}
-  for (let i = 0, l = cssNames.length; i < l; i++) {
-    cssMap[cssNames[i]] = cssNames[i]
-  }
-  return cssMap
+  const ast = cssTree.parse(cssCode)
+
+  return cssTree
+    .findAll(ast, node => node.type === 'ClassSelector')
+    .reduce((acc, cssNode) => {
+      acc[cssNode.name] = cssNode.name
+
+      return acc
+    }, {})
 }
 
 function getPreprocessOptions(lang, filePath, jestConfig) {

packages/vue3-jest/package.json

@@ -55,7 +55,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.2.0",
     "chalk": "^2.1.0",
     "convert-source-map": "^1.6.0",
-    "extract-from-css": "^0.4.4",
+    "css-tree": "^2.0.1",
     "source-map": "0.5.6",
     "tsconfig": "^7.0.0"
   },