Issues encountered when using a third-party Sass JSON importer

[Nathan7139]

I tried out Sass's new JS API. Since my project requires converting JSON into Sass variables, I originally used the node-sass-json-importer package to accomplish this. Here's an excerpt from my Vite configuration:

import jsonImporter from 'node-sass-json-importer';
...
css: {
  preprocessorOptions: {
    scss: {
      additionalData: '@use "@BBB/assets/scss/utils" as *;',
      importer: jsonImporter(),
    },
  },
  // Specific postcss config file folder.
  postcss: '../../packages/AAA',
},
...

I switched to using @blakedarlin/sass-json-importer as an alternative, but I encountered some issues. Here's the updated Vite configuration:

import jsonImporter from '@blakedarlin/sass-json-importer';
...
css: {
  preprocessorOptions: {
    scss: {
      api: 'modern-compiler',
      additionalData: '@use "@BBB/assets/scss/utils" as *;',
      importers: [jsonImporter()],
      silenceDeprecations: ['mixed-decls', 'import'],
    },
  },
  // Specific postcss config file folder.
  postcss: '../../packages/AAA',
},
...

I am using sass-embedded, but I guess the same issue would occur with sass.
The issue is that if I print the URL in the canonicalize method of @blakedarlin/sass-json-importer, I find that the URL is always @BBB/assets/scss/utils. This happens because utils/index.scss is not a JSON file, so the canonicalize method returns null. However, once canonicalize returns null, other SCSS files that are @used, @forwarded, or @imported within utils/index.scss no longer go through this importer and instead only pass through the default importer. As a result, my JSON files end up being handled by the default importer instead of @blakedarlin/sass-json-importer, which prevents them from functioning as expected.

I would like to ask the following questions:

1. Is my understanding of this behavior correct?
2. Is this the expected implementation, or is it a bug?
3. Am I misusing the importer, or is there a misunderstanding on the part of the importer's author?

Thank you so much for your time and assistance! I really appreciate your help. 🙏

[nex3]

It's hard to tell whether or not this is the expected behavior without seeing it in action. Can you provide a minimal reproduction that just uses the Sass API, without Vite?

[Nathan7139]

Thank you for your reply!

I created a reproduction for this issue: CodeSandbox Link.

You can test it by running the following commands:

pnpm install && pnpm dev

This will start Vite and reproduce the problem I described within the Vite environment. At the same time, the vite.config.js file also uses sass.compileAsync to compile index.scss. The latter appears to work correctly, with the console output showing:

css: '.logo {\n  border: 1px solid #323232;\n}'

indicating that it successfully produces the expected result.

However, the issue arises on the Vite side, where I get the following error:

[vite] Pre-transform error: [sass] Error: expected "}".
  ╷
1 │ {
  │ ^
  ╵
  /project/workspace/src/assets/json/colors.json 1:1           @import
  /project/workspace/src/assets/scss/utils/colors.scss 1:9     @use
  /project/workspace/src/assets/scss/utils/variables.scss 1:1  @forward
  /project/workspace/src/assets/scss/utils/index.scss 1:1      @use
  /project/workspace/src/App.vue 1:1                           root stylesheet

It seems like the issue is more related to Vite rather than Sass itself. Do you think I should report this as an issue to Vite instead?

Thank you again for your guidance! 🙏

[nex3]

If it's not possible to reproduce this without Vite, then it's likely to be an issue with Vite itself and I suggest you report it there.

[Nathan7139]

Got it, thank you for your reply. I will report this issue to Vite instead.