fix: allow importing relative paths in global resources #373

pmrotule · 2021-08-10T09:59:03Z

Closes #374

Fix importing relative paths inside a stylesheet being made globally available using the option jest.globals['vue-jest'].resources:

{
  "jest": {
    "globals": {
      "vue-jest": {
        "resources": {
          "scss": [
            "./src/styles/settings/global.scss"
          ]
        }
      }
    }
  }
}

src/styles/settings/global.scss

@import './unit.scss';

$another-variable: 10px;

considering that src/styles/settings/unit.scss exists, it shouldn't throw the following error

Version

My branch is based on the v4.0.1 tag which is the version I'm using. It doesn't seem like there is a v4 branch I could base my PR on.

lmiller1990

Sorry for the slow reply. Let's get this merged and released.

Are you able to resolve the conflicts?

pmrotule · 2021-09-06T07:38:56Z

Are you able to resolve the conflicts?

@lmiller1990 I can't unfortunately. It is actually on the latest v4 code, but there is no v4 branch that I could based this PR on. It is currently based on master, but the master branch is now a monorepo for v26. I think making a v4 branch would make sense and get rid of the conflicts. I would need your help to create the branch though.

FYI: yarn test:e2e style was failing with Less and I just fixed it with my latest commit. Should be good to go now.

lmiller1990 · 2021-09-24T01:09:16Z

Sorry about the delay on this.

If we can resolve the conflicts, we can merge!

pmrotule · 2021-09-27T13:47:28Z

If we can resolve the conflicts, we can merge!

⚠️ There is no conflict.

@lmiller1990 It seems like you missed my explanation about the source of the conflicts. In #374 (comment), you confirmed that v4 was the correct version and this PR is currently on the latest v4 code. We only see conflicts because the PR is currently based on the master branch which is v27:

but there is no v4 branch, only a v3 one.

TLDR;

To fix the conflicts, you need to create a v4 branch for me to base the PR on. Or should I fix it in v3?

lmiller1990 · 2021-09-29T04:33:32Z

Right, sorry, I did not explain the context.

In order to support both Vue 2 and Vue 3 (and Jest 26.x and 27.x) we moved to a monorepo.

There are two packages: vue2-jest and vue3-jest. Since vue-jest is built for Jest, we need to follow their versioning scheme to ensure compatibility.

We have two branches:

master will target the latest major version of Jest, right now that's 27.x. You can see that in the package.json for both vue2-jest and vue3-jest packages.
v26 targets Jest 26.

The code for v4, which works with Vue 2, is in vue2-jest now. If you are on Jest 26, you'd submit your patch against vue2-jest on the v26 branch. For Jest 27, it'd be on the vue2-jest package on master.

Ideally we want to be patching the latest version of Jest, which is v27, but if you are still on v26 you could submit the patch against that branch/package and we could release it.

Sorry if that's confusing, if it's still not clear, let me know.

lmiller1990 · 2021-10-08T13:51:58Z

Hi! Can you resolve the conflicts? Then we can get this merged up. Let me know if my above comment is confusing.

pmrotule · 2021-10-08T15:52:50Z

@lmiller1990 I'm sorry, I'm currently on vacation, but I'm back on Monday and can resolve the conflicts on the v26 branch. Thanks for your explanation, it is much clearer now and sorry for the back and forth. I can probably also fix it in v27, we just didn't use it in our project yet since it is still in alpha version. We're looking forward to use Jest v27 though and Nuxt 3 is around the corner so we will soon finally switch to Vue 3.

I'll keep you posted.

pmrotule · 2021-10-11T15:28:17Z

@lmiller1990 I was able to resolve the conflicts by rebasing my branch on 26.x, but I'm still confused about the next steps. I tested my changes locally with my own project, but I didn't know how to run the e2e tests until I realized there was no test running on the CI. I guess that's why it is still an alpha version, but considering this, shouldn't I be fixing the bug on the stable version?

I also noticed something wrong in the e2e package.json files: it refers to vue2-jest instead of @vue/vue2-jest or vue-jest. It seems to be fixed on the master branch, but it still doesn't make sense to refer to a specific version on npm instead of the local version.

I decided to go ahead and fix the e2e test run in 4222d23 using the local versions like I suggested. It's out of scope so let me know if you would rather have it in a separate PR. If you like it, I'm happy to submit a new PR to implement it for v27.

pmrotule · 2021-10-11T15:33:54Z

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

@@ -32,6 +40,7 @@ function extractClassMap(cssCode) {
 function getPreprocessOptions(lang, filePath, jestConfig) {
  if (lang === 'scss' || lang === 'sass') {
    return {
+      filename: filePath,


After rebasing, all the tests for vue files including a relative @import statement started to fail when I was testing vue-jest in my own project. This line fixed the issue which provide the file path to the processor (sass) making it able to resolve the relative paths.

lmiller1990

Some q's! Thanks.

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

lmiller1990 · 2021-10-12T01:32:45Z

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

@@ -12,14 +11,23 @@ function getGlobalResources(resources, lang) {
  let globalResources = ''
  if (resources && resources[lang]) {
    globalResources = resources[lang]
-      .map(resource => path.resolve(process.cwd(), resource))
-      .filter(resourcePath => fs.existsSync(resourcePath))


I forgot what this does exactly but it looks like it does something different to the code you added. It looks like this line handles <style src="/something.css">. Did I misunderstand this? Do you know what is going on here by any chance?

I can provide more details indeed. This function is only used to inject the global resources provided in the jest config. If you check where it is being used:

let content = getGlobalResources(vueJestConfig.resources, stylePart.lang) + stylePart.content

It basically define the final content of the <style> block by prepending the global resources but only if there are resources defined for the current style lang (i.e. lang="scss").

Now back to the code I replaced: it used to get the content of each global resource with fs.readFileSync, join them with a line break and return it to be injected as a string in the <style> block. This is the reason why the bug I fixed was happening because it makes the relative imports relative to the .vue file instead of relative to the global resource. For instance, if we have styles/global.scss as global resource in the Jest config:

styles/global.scss

@import './fonts.scss'; $font-super-large: $font-size-large * 2;

components/Something.vue

<style lang="scss" module> .something { font-size: $font-super-large; } </style>

It will be compiled to:

@import './fonts.scss'; $font-super-large: $font-size-large * 2; .something { font-size: $font-super-large; }

which is wrong since fonts.scss is within the styles directory, not components. I fixed it by injecting an actual import statement instead which will make the processor understand the relative import as it should.

My code change will produce:

@import '/absolute/path/to/styles/global.scss'; .something { font-size: $font-super-large; }

Does that make sense?

I think so. I'll merge and release this now. Let's keep an eye after people start upgrading to see if anything was negatively impacted by this change.

It looks like the script you added for the tests isn't running on CI 🤔

It looks like the script you added for the tests isn't running on CI 🤔

@lmiller1990 It's running on CircleCI, but not on Github actions since the 26.x branch is not targeted. It would need to be added to node.yml:

By the way, I removed the test-runner I previously added since it was useless: the e2e tests were already running since each of them is a package of the monorepo and their test scripts were called by yarn workspaces. I'm sorry for the confusion.

pmrotule · 2021-11-12T08:45:10Z

@lmiller1990 Any chance we can merge this PR?

pmrotule · 2021-11-24T08:28:20Z

@lmiller1990 Please?

lmiller1990 · 2021-11-28T23:15:49Z

@pmrotule Yes, sorry.

lmiller1990 · 2021-11-28T23:52:28Z

@pmrotule pls try it out: https://github.com/vuejs/vue-jest/releases/tag/v26.0.1

We now use 26.x for Jest 26 support. You changes should be on @vue/vue2-jest@26.0.1.

Let me know if you have any problems.

pmrotule · 2021-11-29T13:28:31Z

@lmiller1990 Thanks! I just tested @vue/vue2-jest@26.0.1 in my project and it works like a charm 🎉

We are currently working on upgrading to Vue 3 so I should be able to create a PR with the same fix for Vue 3 in the next few days.

lmiller1990 · 2021-11-30T00:18:07Z

Great, thanks. I'll try to be more responsive with merging and releasing new versions.

lmiller1990 reviewed Sep 6, 2021

View reviewed changes

pmrotule force-pushed the fix/global-resources-scss branch from af32ba1 to a3da7fc Compare September 6, 2021 07:49

pmrotule requested a review from lmiller1990 September 9, 2021 17:43

pmrotule force-pushed the fix/global-resources-scss branch from a3da7fc to d34db83 Compare October 11, 2021 12:19

pmrotule changed the base branch from master to 26.x October 11, 2021 12:21

pmrotule commented Oct 11, 2021

View reviewed changes

pmrotule force-pushed the fix/global-resources-scss branch from aeacd25 to 4222d23 Compare October 11, 2021 20:01

lmiller1990 reviewed Oct 12, 2021

View reviewed changes

pmrotule force-pushed the fix/global-resources-scss branch from 4222d23 to 8eb2cee Compare October 12, 2021 13:48

pmrotule requested a review from lmiller1990 October 12, 2021 13:52

pmrotule force-pushed the fix/global-resources-scss branch from 4b0050a to c0a5f3e Compare October 25, 2021 12:48

pmrotule added 2 commits October 25, 2021 14:52

fix: allow importing relative paths in global resources

473b5fe

fix: allow importing relative paths in style blocks

39c8d49

pmrotule force-pushed the fix/global-resources-scss branch from c0a5f3e to 39c8d49 Compare October 25, 2021 12:57

lmiller1990 merged commit 51f0c90 into vuejs:26.x Nov 28, 2021

pmrotule deleted the fix/global-resources-scss branch November 29, 2021 13:29

pmrotule mentioned this pull request Aug 10, 2023

fix: allow importing relative paths in global resources #548

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: allow importing relative paths in global resources #373

fix: allow importing relative paths in global resources #373

pmrotule commented Aug 10, 2021 •

edited

Loading

lmiller1990 left a comment

pmrotule commented Sep 6, 2021

lmiller1990 commented Sep 24, 2021

pmrotule commented Sep 27, 2021

lmiller1990 commented Sep 29, 2021 •

edited

Loading

lmiller1990 commented Oct 8, 2021

pmrotule commented Oct 8, 2021

pmrotule commented Oct 11, 2021 •

edited

Loading

pmrotule Oct 11, 2021 •

edited

Loading

lmiller1990 left a comment

lmiller1990 Oct 12, 2021

pmrotule Oct 12, 2021 •

edited

Loading

lmiller1990 Oct 25, 2021 •

edited

Loading

pmrotule Oct 25, 2021 •

edited

Loading

pmrotule commented Nov 12, 2021

pmrotule commented Nov 24, 2021

lmiller1990 commented Nov 28, 2021

lmiller1990 commented Nov 28, 2021

pmrotule commented Nov 29, 2021

lmiller1990 commented Nov 30, 2021

fix: allow importing relative paths in global resources #373

fix: allow importing relative paths in global resources #373

Conversation

pmrotule commented Aug 10, 2021 • edited Loading

Version

lmiller1990 left a comment

Choose a reason for hiding this comment

pmrotule commented Sep 6, 2021

lmiller1990 commented Sep 24, 2021

pmrotule commented Sep 27, 2021

TLDR;

lmiller1990 commented Sep 29, 2021 • edited Loading

lmiller1990 commented Oct 8, 2021

pmrotule commented Oct 8, 2021

pmrotule commented Oct 11, 2021 • edited Loading

pmrotule Oct 11, 2021 • edited Loading

Choose a reason for hiding this comment

lmiller1990 left a comment

Choose a reason for hiding this comment

lmiller1990 Oct 12, 2021

Choose a reason for hiding this comment

pmrotule Oct 12, 2021 • edited Loading

Choose a reason for hiding this comment

lmiller1990 Oct 25, 2021 • edited Loading

Choose a reason for hiding this comment

pmrotule Oct 25, 2021 • edited Loading

Choose a reason for hiding this comment

pmrotule commented Nov 12, 2021

pmrotule commented Nov 24, 2021

lmiller1990 commented Nov 28, 2021

lmiller1990 commented Nov 28, 2021

pmrotule commented Nov 29, 2021

lmiller1990 commented Nov 30, 2021

pmrotule commented Aug 10, 2021 •

edited

Loading

lmiller1990 commented Sep 29, 2021 •

edited

Loading

pmrotule commented Oct 11, 2021 •

edited

Loading

pmrotule Oct 11, 2021 •

edited

Loading

pmrotule Oct 12, 2021 •

edited

Loading

lmiller1990 Oct 25, 2021 •

edited

Loading

pmrotule Oct 25, 2021 •

edited

Loading