After quasar upgrade 2.16.11 → 2.17.0, Deprecation warnings from Dart Sass

[ssuess]

After upgrading quasar to latest, when I run dev I now have endless repeating warnings like this in the console:

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

found this similar (closed) issue from quite some time ago: #9362

Any suggestions? Is this Quasar or is it me in my code somehow?

[yusufkandemir]

You've probably upgraded more than just quasar 2.16.11 → 2.17.0 and I am sure that if you pin "quasar": "2.16.11" and reinstall deps, you will still see it. It probably happened as part of the app-vite's sass dependency upgrade. sass has added a new warning. But, Quasar doesn't use sass(dart sass) package directly. Vite invokes sass.render, which is now a deprecated API here: https://github.com/vitejs/vite/blob/c1ed8a595a02ec7f8f5a8d23f97b2f21d3834ab1/packages/vite/src/node/plugins/css.ts#L2199
They have a TODO comment to change the default API to a more modern one, in Vite 6:
https://github.com/vitejs/vite/blob/c1ed8a595a02ec7f8f5a8d23f97b2f21d3834ab1/packages/vite/src/node/plugins/css.ts#L2444-L2445
There is an option to control which API it uses, to override the default which emits a warning:
https://vitejs.dev/config/shared-options.html#css-preprocessoroptions
Quasar has a reference to that page in here:
https://quasar.dev/quasar-cli-vite/css-preprocessors#configuration

So, to sum up:

• You upgraded app-vite
• app-vite upgraded sass
• The sass package has added a new warning in a new version
• Vite uses the legacy API of sass by default
• As a result, you started getting warnings

You can override the Vite config to enable modern API to avoid the warnings:

// quasar.config file
import { mergeConfig } from 'vite'
// ...
build: {
  extendViteConf (viteConf) {
    viteConf.css = mergeConfig(viteConf.css, {
      preprocessorOptions: {
        scss: {
          api: 'modern-compiler'
        }
      }
    })
  }
}

We will most likely include that config override in app-vite v2 beta to avoid inconveniences until Vite 6 stable is out with a good default value.

[rstoenescu]

Next q/app-s will use sass-embedded by default.

[yusufkandemir]

👆 see #17522

[ssuess]

I don't know what I am doing wrong, I can't supress the warnings no matter how I try to configure it, maybe I am having problems because there are other items in my extended conf? I have tried several formats with and without the mergeConfig command but none of them make any difference, I still see the warnings in the terminal when running quasar dev

Here was one of several attempts:

extendViteConf (viteConf) {
        viteConf.build.terserOptions = viteConf.build.terserOptions || {}
        viteConf.build.terserOptions = {
          ...viteConf.build.terserOptions,
          compress: {
            ...viteConf.build.terserOptions.compress,
            drop_console: process.env.DEV ? false : process.env.BETA ? false : false
          }
        },
        viteConf = mergeConfig(viteConf, {
          ssr: {
            noExternal: ['@fortawesome/*']
          }
        }),
        viteConf.css = mergeConfig(viteConf.css, {
          preprocessorOptions: {
            sass: {
              api: 'modern'
            },
            scss: {
              api: 'modern'
            }
          }
        })
      },

Have also tried modern-compiler, moving these values into the other mergeConfig, trying without mergeConfig, nothing seems to work alas, I still have the warnings.

[rstoenescu]

Yeah, Vite 2 does not support latest sass settings and doesn't even know about sass-embedded. In any case, will make CLI releases today and this problem will go away. Just remember to remove any of the currently added extendViteConf "fixes" after upgrading.

As a sideline, what I strongly recommend is to upgrade to q/app-vite v2 beta (has Vite 5) or q/app-webpack v4 beta.

[rstoenescu]

The new versions of CLIs are now available.
Again, remember to remove any of the currently added extendViteConf "fixes" after upgrading

[mapleeit]

I switched to q/app-vite v2, but the warnings are still there

Build mode............. spa
 Pkg quasar............. v2.17.0
 Pkg @quasar/app-vite... v2.0.0-beta.22
 Pkg vite............... v5.4.9
 Debugging.............. no
 Publishing............. no

 App • Using quasar.config.js in "esm" format
 App • Running "@quasar/qmarkdown" Quasar App Extension...
 App • Extension(@quasar/qmarkdown): Extending quasar.config file configuration...
The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
 App • Extension(@quasar/qmarkdown): Extending Vite config
 App Extension (qmarkdown) Info: 'Adding markdown loader (*.md) to extendViteConf'
 App •  WAIT  • Compiling of SPA UI with Vite in progress...
Deprecation Warning on line 1, column 9 of ../../../@quasar/quasar-ui-qmarkdown/src/index.sass: 
Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import
  ╷
1 │ @import 'src/css/quasar.variables.scss'
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

[zeid0ne]

same for me

[rstoenescu]

Upgrade to latest beta. Have released a new version yesterday which deals with the new deprecation warnings that were just shipped with Sass.

[rmcf]

I use quasar: "2.17.0"
After upgrade:
@quasar/app-vite: "1.10.0" => "1.10.1"
received these warnings:
Warning: Future global-builtin deprecation is not yet active, so silencing it is unnecessary.
Warning: Future import deprecation is not yet active, so silencing it is unnecessary.
Fixed with:
yarn add @quasar/[email protected] -D

[rstoenescu]

Yeah. I'll quote one of our team members: Sass team loves warnings so much that they wrote a warning for silencing warnings.

Please do a clean install. This warning in particular appears when a warning does not exists in your current version of Sass (but in a future one), which means that you still have the old sass-embedded version installed.

[mapleeit]

Thank you for you reply @rstoenescu , confirmed that v2.0.0 beta24 works without warning now

[arnonrdp]

I just had this problem. Here is part of my package.json:

  "dependencies": {
    "@quasar/extras": "^1.16.12",
    "quasar": "^2.17.1",
    "vue": "^3.4.27",
  },
  "devDependencies": {
    "@quasar/vite-plugin": "^1.8.0",
    "@vitejs/plugin-vue": "^5.1.4",
    "sass-embedded": "^1.80.2",
    "vite": "^5.4.9",
  }

[arnonrdp]

I fixed this error by updating the path of sassVariables in vite.config.js:

sassVariables: '@/quasar-variables.sass'

[coredev-uk]

I get a similar issue, I'm running RC-4 and getting these spammed in console:

Invalid deprecation "global-builtin".
Warning: Future import deprecation is not yet active, so silencing it is unnecessary.

I have tried using quietDeps to get rid of it and ran their migration tool and removed any reference to depreciated functions. I'm not sure what is going on here, even with verbose on there is not any more info.

Sry if this is the wrong place to ask, but seems similar so if anyone has any idea lmk ty

[yusufkandemir]

If you have sass or similar in your package.json, delete them and depend on what @quasar/app-* packages provide for you. Otherwise, please provide a reproduction or at least more info.

[coredev-uk]

I found out why, we had a override for the sass package, forgot it was there. thanks

[Aymkdn]

I deleted my node_modules and I installed the below packages:
"@quasar/app-vite": "^2.0.0-rc.4",
"@quasar/extras": "^1.16.13",
"quasar": "^2.17.4",
"vite-plugin-html": "^3.2.2",
"vue": "^3.5.13",
"@quasar/vite-plugin": "^1.8.1",
"@vitejs/plugin-basic-ssl": "^1.2.0",
"@vitejs/plugin-vue": "^5.2.1",
"vite": "^6.0.1",
"vite-plugin-dynamic-import": "^1.6.0",
"vite-plugin-eslint": "^1.8.1"

But I'm still getting the warnings :-(

I tried with and without [email protected]

Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
╷
5 │ @import './variables.sass'
│ ^^^^^^^^^^^^^^^^^^
╵
......\quasar\src\css\index.sass 5:9 root stylesheet

[yusufkandemir]

You have @quasar/app-vite. So, don't install @quasar/vite-plugin, @vitejs/plugin-vue, sass/sass-embedded, etc. yourself. We can't say more without seeing more info.

[Aymkdn]

You have @quasar/app-vite. So, don't install @quasar/vite-plugin, @vitejs/plugin-vue, sass/sass-embedded, etc. yourself. We can't say more without seeing more info.

Thanks. Actually I think I found the issue: my project crosses several directories, and it's the wrong node_modules that was used.