Skip to content

Commit 2e027a8

Browse files
thebanjomaticAdam Hines
thebanjomatic
and
Adam Hines
authoredJun 28, 2022
fix(sass-imports): resolve module imports relative to file being processed (#478)
* fix(sass-imports): resolve module imports relative to file being processed Currently sass-imports that use the module import syntax (eg. `~module-to-import/some.sass`) are resolved relative to the vue-jest package. If you only have one version of that package, and everything has been hoisted to the same level as vue-jest (or higher), then things work as expected. Where things start to fail is when you have more than one instance of the sass package you are trying to import as it is possible the wrong version will be loaded, and it is concievable that the file won't be found. Where I encountered this problem, we had something like the following: ``` node_modules/ component-library/ node_modules/ sass-library@3.0.0 mixins.sass some-component.vue: <style lang="sass"> @import '~sass-library/mixins.scss'; class foo { @use someMixinFromV3 } </style> sass-library@1.0.0 mixins.sass @vue/vue2-jest lib module-name-mapper-helper.js ``` Notice that "sass-library" v1 was hoisted to the top level, but "component-library" depends on v3 of sass-library so v3 is in a nested node_modules directory. When "@vue/vue2-jest" does `require.resolve('sass-library/mixins.scss')`, while processing `component-library/some-component.vue`, the module search path is relative to the vue2-jest source file and not relative to some-component.vue like you would expect. The end result is that it finds the top-level `sass-library@1.0.0` and not the v3 version. To fix this, I am now passing in the optional "paths" value to require.resolve (available since node 8.9 https://nodejs.org/api/modules.html#requireresolverequest-options) and providing the path to the source file being processed instead. This will start the module resolution search at some-component.vue and the nested `node_modules/sass-library`` v3 will be found instead. * test(vue2): adding e2e tests for sass-importer * test(vue3): adding e2e tests for sass-importer Co-authored-by: Adam Hines <ahines@factset.com>
·
v29.2.6v28.0.1
1 parent e218c07 commit 2e027a8

File tree

24 files changed

+319
-4
lines changed

24 files changed

+319
-4
lines changed
 

‎e2e/2.x/sass-importer/entry/babel-transformer.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
const { createTransformer } = require('babel-jest').default
2+
module.exports = createTransformer({
3+
presets: ['@babel/preset-env']
4+
})

‎e2e/2.x/sass-importer/entry/components/Entry.vue

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div>
3+
<h1 class="entry">Entry</h1>
4+
<lib-component />
5+
</div>
6+
</template>
7+
8+
<script>
9+
import LibComponent from 'vue2-sass-importer-lib/index.vue'
10+
11+
export default {
12+
components: {
13+
LibComponent
14+
}
15+
}
16+
</script>
17+
18+
<style lang="scss" module>
19+
@import '~vue2-sass-importer-sass-lib/index.scss';
20+
21+
.entry {
22+
@include my-v2-mixin;
23+
}
24+
</style>

‎e2e/2.x/sass-importer/entry/package.json

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "vue2-sass-importer-entry",
3+
"version": "1.0.0",
4+
"license": "MIT",
5+
"private": true,
6+
"scripts": {
7+
"test": "jest --no-cache --coverage test.js"
8+
},
9+
"dependencies": {
10+
"vue": "^2.5.21",
11+
"vue-template-compiler": "^2.5.21",
12+
"vue2-sass-importer-lib": "file:../lib",
13+
"vue2-sass-importer-sass-lib": "file:../sass-lib-v2"
14+
},
15+
"devDependencies": {
16+
"@babel/core": "^7.9.0",
17+
"@babel/preset-env": "^7.9.0",
18+
"@vue/test-utils": "^1.1.0",
19+
"babel-jest": "^28.0.2",
20+
"jest": "28.x",
21+
"jest-environment-jsdom": "28.0.2",
22+
"postcss": "^7.0.13",
23+
"postcss-color-function": "^4.0.1",
24+
"sass": "^1.23.7",
25+
"@vue/vue2-jest": "^28.0.0"
26+
},
27+
"jest": {
28+
"testEnvironment": "jsdom",
29+
"moduleFileExtensions": [
30+
"js",
31+
"json",
32+
"vue"
33+
],
34+
"transformIgnorePatterns": [
35+
"/node_modules/.*(?<!.vue)$"
36+
],
37+
"transform": {
38+
"^.+\\.js$": "./babel-transformer.js",
39+
"^.+\\.vue$": "@vue/vue2-jest"
40+
},
41+
"globals": {
42+
"vue-jest": {
43+
"transform": {
44+
"^js$": "./babel-transformer.js"
45+
}
46+
}
47+
}
48+
}
49+
}

‎e2e/2.x/sass-importer/entry/test.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { mount } from '@vue/test-utils'
2+
import Entry from './components/Entry.vue'
3+
4+
test('processes sass imports relative to current file', () => {
5+
const wrapper = mount(Entry)
6+
expect(wrapper).toBeDefined()
7+
})

‎e2e/2.x/sass-importer/lib/index.vue

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div class="lib-class">Lib Component</div>
3+
</template>
4+
5+
<style lang="scss" module>
6+
@import '~vue2-sass-importer-sass-lib/index.scss';
7+
8+
.lib-class {
9+
@include my-v1-mixin;
10+
}
11+
</style>

‎e2e/2.x/sass-importer/lib/package.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "vue2-sass-importer-lib",
3+
"version": "1.0.0",
4+
"license": "MIT",
5+
"private": true,
6+
"main": "index.vue",
7+
"files": [
8+
"index.vue"
9+
],
10+
"scripts": {
11+
"test": "echo 'No tests found.'"
12+
},
13+
"dependencies": {
14+
"vue2-sass-importer-sass-lib": "file:../sass-lib-v1"
15+
},
16+
"peerDependencies": {
17+
"vue": "^2.5.21"
18+
}
19+
}

‎e2e/2.x/sass-importer/sass-lib-v1/index.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@mixin my-v1-mixin {
2+
color: blue;
3+
}

‎e2e/2.x/sass-importer/sass-lib-v1/package.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "vue2-sass-importer-sass-lib",
3+
"version": "1.0.0",
4+
"license": "MIT",
5+
"private": true,
6+
"files": [
7+
"index.scss"
8+
],
9+
"scripts": {
10+
"test": "echo 'No tests found.'"
11+
}
12+
}

‎e2e/2.x/sass-importer/sass-lib-v2/index.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@mixin my-v2-mixin {
2+
color: red;
3+
}

‎e2e/2.x/sass-importer/sass-lib-v2/package.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "vue2-sass-importer-sass-lib",
3+
"version": "2.0.0",
4+
"license": "MIT",
5+
"private": true,
6+
"files": [
7+
"index.scss"
8+
],
9+
"scripts": {
10+
"test": "echo 'No tests found.'"
11+
}
12+
}

‎e2e/3.x/sass-importer/entry/babel-transformer.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
const { createTransformer } = require('babel-jest').default
2+
module.exports = createTransformer({
3+
presets: ['@babel/preset-env']
4+
})

‎e2e/3.x/sass-importer/entry/components/Entry.vue

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div>
3+
<h1 class="entry">Entry</h1>
4+
<lib-component />
5+
</div>
6+
</template>
7+
8+
<script>
9+
import LibComponent from 'vue3-sass-importer-lib/index.vue'
10+
11+
export default {
12+
components: {
13+
LibComponent
14+
}
15+
}
16+
</script>
17+
18+
<style lang="scss" module>
19+
@import '~vue3-sass-importer-sass-lib/index.scss';
20+
21+
.entry {
22+
@include my-v2-mixin;
23+
}
24+
</style>

‎e2e/3.x/sass-importer/entry/package.json

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"name": "vue3-sass-importer-entry",
3+
"version": "1.0.0",
4+
"license": "MIT",
5+
"private": true,
6+
"scripts": {
7+
"test": "jest --no-cache --coverage test.js"
8+
},
9+
"dependencies": {
10+
"vue": "^3.2.22",
11+
"vue3-sass-importer-lib": "file:../lib",
12+
"vue3-sass-importer-sass-lib": "file:../sass-lib-v2"
13+
},
14+
"devDependencies": {
15+
"@babel/core": "^7.9.0",
16+
"@babel/preset-env": "^7.9.0",
17+
"@vue/test-utils": "^2.0.0-rc.10",
18+
"babel-jest": "^28.0.2",
19+
"jest": "28.x",
20+
"jest-environment-jsdom": "28.0.2",
21+
"postcss": "^7.0.13",
22+
"postcss-color-function": "^4.0.1",
23+
"sass": "^1.23.7",
24+
"@vue/vue3-jest": "^28.0.0"
25+
},
26+
"jest": {
27+
"testEnvironment": "jsdom",
28+
"moduleFileExtensions": [
29+
"js",
30+
"json",
31+
"vue"
32+
],
33+
"transformIgnorePatterns": [
34+
"/node_modules/.*(?<!.vue)$"
35+
],
36+
"transform": {
37+
"^.+\\.js$": "./babel-transformer.js",
38+
"^.+\\.vue$": "@vue/vue3-jest"
39+
},
40+
"globals": {
41+
"vue-jest": {
42+
"transform": {
43+
"^js$": "./babel-transformer.js"
44+
}
45+
}
46+
}
47+
}
48+
}

‎e2e/3.x/sass-importer/entry/test.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { mount } from '@vue/test-utils'
2+
import Entry from './components/Entry.vue'
3+
4+
test('processes sass imports relative to current file', () => {
5+
const wrapper = mount(Entry)
6+
expect(wrapper).toBeDefined()
7+
})

‎e2e/3.x/sass-importer/lib/index.vue

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div class="lib-class">Lib Component</div>
3+
</template>
4+
5+
<style lang="scss" module>
6+
@import '~vue3-sass-importer-sass-lib/index.scss';
7+
8+
.lib-class {
9+
@include my-v1-mixin;
10+
}
11+
</style>

‎e2e/3.x/sass-importer/lib/package.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "vue3-sass-importer-lib",
3+
"version": "1.0.0",
4+
"license": "MIT",
5+
"private": true,
6+
"main": "index.vue",
7+
"files": [
8+
"index.vue"
9+
],
10+
"scripts": {
11+
"test": "echo 'No tests found.'"
12+
},
13+
"dependencies": {
14+
"vue3-sass-importer-sass-lib": "file:../sass-lib-v1"
15+
},
16+
"peerDependencies": {
17+
"vue": "^3.2.22"
18+
}
19+
}

‎e2e/3.x/sass-importer/sass-lib-v1/index.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@mixin my-v1-mixin {
2+
color: blue;
3+
}

‎e2e/3.x/sass-importer/sass-lib-v1/package.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "vue3-sass-importer-sass-lib",
3+
"version": "1.0.0",
4+
"license": "MIT",
5+
"private": true,
6+
"files": [
7+
"index.scss"
8+
],
9+
"scripts": {
10+
"test": "echo 'No tests found.'"
11+
}
12+
}

‎e2e/3.x/sass-importer/sass-lib-v2/index.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@mixin my-v2-mixin {
2+
color: red;
3+
}

‎e2e/3.x/sass-importer/sass-lib-v2/package.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "vue3-sass-importer-sass-lib",
3+
"version": "2.0.0",
4+
"license": "MIT",
5+
"private": true,
6+
"files": [
7+
"index.scss"
8+
],
9+
"scripts": {
10+
"test": "echo 'No tests found.'"
11+
}
12+
}

‎package.json

+6-2
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,14 @@
88
"workspaces": {
99
"packages": [
1010
"packages/*",
11-
"e2e/**"
11+
"e2e/2.x/*",
12+
"e2e/2.x/**/entry",
13+
"e2e/3.x/*",
14+
"e2e/3.x/**/entry"
1215
],
1316
"nohoist": [
14-
"**/vue"
17+
"**/vue",
18+
"**/vue2-sass-importer-sass-lib"
1519
]
1620
},
1721
"scripts": {

‎packages/vue2-jest/lib/module-name-mapper-helper.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ function resolveSass(to, importPath, fileType) {
3131

3232
for (const filename of filenames) {
3333
try {
34-
return require.resolve(path.join(dirname, filename))
34+
return require.resolve(path.join(dirname, filename), { paths: [to] })
3535
} catch (_) {}
3636
}
3737
}

‎packages/vue3-jest/lib/module-name-mapper-helper.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ function resolve(to, importPath, fileType) {
1414
if (path.isAbsolute(importPath)) {
1515
return importPath
1616
} else if (matchModuleImport.test(importPath)) {
17-
return require.resolve(importPath.replace(matchModuleImport, ''))
17+
return require.resolve(importPath.replace(matchModuleImport, ''), {
18+
paths: [to]
19+
})
1820
}
1921
return path.join(path.dirname(to), importPath)
2022
}

‎yarn.lock

+22
Original file line numberDiff line numberDiff line change
@@ -10865,6 +10865,28 @@ vue-template-es2015-compiler@^1.9.0:
1086510865
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
1086610866
integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
1086710867

10868+
"vue2-sass-importer-lib@file:e2e/2.x/sass-importer/lib":
10869+
version "1.0.0"
10870+
dependencies:
10871+
vue2-sass-importer-sass-lib "file:../../.cache/yarn/v6/npm-vue2-sass-importer-lib-1.0.0-1087f856-8699-4ac6-a0fa-2288988256c2-1656107462461/node_modules/sass-lib-v1"
10872+
10873+
"vue2-sass-importer-sass-lib@file:e2e/2.x/sass-importer/sass-lib-v1":
10874+
version "1.0.0"
10875+
10876+
"vue2-sass-importer-sass-lib@file:e2e/2.x/sass-importer/sass-lib-v2":
10877+
version "2.0.0"
10878+
10879+
"vue3-sass-importer-lib@file:e2e/3.x/sass-importer/lib":
10880+
version "1.0.0"
10881+
dependencies:
10882+
vue3-sass-importer-sass-lib "file:../../.cache/yarn/v6/npm-vue3-sass-importer-lib-1.0.0-c866bb73-f527-47b9-932d-498dea4cf3d0-1656107462461/node_modules/sass-lib-v1"
10883+
10884+
"vue3-sass-importer-sass-lib@file:e2e/3.x/sass-importer/sass-lib-v1":
10885+
version "1.0.0"
10886+
10887+
"vue3-sass-importer-sass-lib@file:e2e/3.x/sass-importer/sass-lib-v2":
10888+
version "2.0.0"
10889+
1086810890
vue@^2.4.2, vue@^2.5.21:
1086910891
version "2.6.14"
1087010892
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"

0 commit comments

Comments
 (0)
Please sign in to comment.