From 5edd7103adc60f8b704143158b8ade93f601c3d6 Mon Sep 17 00:00:00 2001 From: Sevil Yilmaz Date: Tue, 7 Dec 2021 22:28:43 +0100 Subject: [PATCH] fix: PostCSS mixins cause style parsing to break Replaced `extract-from-css` which is outdated (7yo) with `css-tree` Resolves vuejs/vue-jest#424 --- .../custom-transformers/scss-transformer.js | 16 +- e2e/2.x/style/components/PostCss.vue | 17 +- e2e/3.x/custom-transformers/package.json | 6 +- .../custom-transformers/scss-transformer.js | 16 +- e2e/3.x/style/components/PostCss.vue | 17 +- packages/vue2-jest/lib/process-style.js | 17 +- packages/vue2-jest/package.json | 2 +- packages/vue3-jest/lib/process-style.js | 17 +- packages/vue3-jest/package.json | 2 +- yarn.lock | 847 +----------------- 10 files changed, 97 insertions(+), 860 deletions(-) diff --git a/e2e/2.x/custom-transformers/scss-transformer.js b/e2e/2.x/custom-transformers/scss-transformer.js index b2ca2848..15eb6cb0 100644 --- a/e2e/2.x/custom-transformers/scss-transformer.js +++ b/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) diff --git a/e2e/2.x/style/components/PostCss.vue b/e2e/2.x/style/components/PostCss.vue index 6aa351c7..1d748f32 100644 --- a/e2e/2.x/style/components/PostCss.vue +++ b/e2e/2.x/style/components/PostCss.vue @@ -1,14 +1,27 @@