Issue with Vite's new Sass JS API and @blakedarlin/sass-json-importer

[Nathan7139]

Describe the bug

Describe the bug
I'm attempting to use Vite's new Sass JS API for a project where I need to convert JSON files into Sass variables. Previously, I used the node-sass-json-importer package with the old Vite configuration. Here's an example of the old config:

import jsonImporter from 'node-sass-json-importer';

export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@BBB/assets/scss/utils" as *;',
        importer: jsonImporter(),
      },
    },
    // Specific PostCSS config file folder.
    postcss: '../../packages/AAA',
  },
};

With the new API, I switched to using @blakedarlin/sass-json-importer. Below is my updated Vite config:

import jsonImporter from '@blakedarlin/sass-json-importer';

export default {
  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',
  },
};

However, the @blakedarlin/sass-json-importer package doesn't work as expected in the Vite environment. When I print out the url from the canonicalize method, it always returns @BBB/assets/scss/utils. This is problematic because utils/index.scss is not a JSON file, and canonicalize returns null. Once canonicalize returns null, other @use, @forward, or @import statements inside utils/index.scss are skipped by this importer and are only processed by the default importer.

I confirmed that this package is designed to work specifically with sass-embedded. I also raised this issue in the Sass community, and the conclusion was that Sass itself seems to process the input correctly, so this might be a Vite-related issue.

Reproduction

https://codesandbox.io/p/devbox/k8xtqw?file=%2Fvite.config.js

Steps to reproduce

1. Run pnpm install && pnpm dev in the example project.
2. This will start Vite and reproduce the issue in the Vite environment.
3. The vite.config.js file also uses sass.compileAsync to compile index.scss.
   • Using sass.compileAsync, everything works fine, and the console output shows:

     .logo {
       border: 1px solid #323232;
     }

     This is the expected result.
4. However, Vite throws 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
   

• The issue occurs when Vite tries to handle imports within utils/index.scss, and the importer doesn't process JSON correctly after canonicalize returns null.
• The standalone sass.compileAsync appears to handle everything correctly, so this seems to be specific to Vite's handling of the Sass API.

Is this issue related to Vite's Sass integration, the way I'm using the @blakedarlin/sass-json-importer, or the implementation of the package itself?

Any guidance or recommendations would be appreciated!

Thanks in advance for your support!

System Info

System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M1
    Memory: 39.52 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.2 - ~/.nvm/versions/node/v18.20.2/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v18.20.2/bin/npm
    pnpm: 8.7.6 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.140
    Safari: 17.6
    Safari Technology Preview: 18.0
  npmPackages:
    @vitejs/plugin-vue: ^5.1.5 => 5.2.1 
    vite: ^5.4.11 => 5.4.11

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hi-ogawa]

Can you move your reproduction somewhere else? It now says "Out of credits".