Legacy JS API is deprecated message missing info

[requinDr]

I just updated from 1.78 to 1.79.1 and got to see many of the same warning in my React project.

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

Since it's missing the problematic file I looked here on the changelog and saw

While the legacy API has been deprecated since we released the modern API, we now emit warnings when the legacy API is used to make sure users are aware that it will be removed in Dart Sass 2.0.0. In the meantime, you can silence these warnings by passing legacy-js-api in silenceDeprecations when using the legacy API.

It's not very helpful, I don't know what this legacy API is supposed to be. And obviously I don't want to just silence these warning.

I can probably find the origin of issue with some more time, but it would be very appreciated to at least get the problematic files if possible in the warning.

Some example of what could throw the warning (and the good way to fix it) would be appreciated too

[Mister-Hope]

I do think this is clearly mentioned in docs at https://sass-lang.com/documentation/js-api/interfaces/legacysharedoptions/#silenceDeprecations

const sass = require('sass');

sass.render({
  file: "style.scss",
  silenceDeprecations: ['legacy-js-api'],
}, function(err, result) {
  // ...
});

[codeflyA]

同样遇到了一样的问题

[iamlinkus]

I've started experiencing the same thing, and have been trying to find what the exact problem is and how can I adapt my own code to fix it.

@Mister-Hope I think you've clearly didn't read the OP issue, as they mention not wanting to silence the warning, but rather solve the problem.

For my own context, I'm using next.js (canary 158) and the 1.79.1 of sass.

Would be super useful if someone would point to the right direction as to how one can upgrade the code to follow the "modern API".

[zhaojjiang]

I just bump sass version in my project. But I don't know what is legacy api, what is this api for, which code/file/package throw these warning lines.

[agantelin]

@Mister-Hope Thank you for hint! It works.

Solution how to silence the warning in Vite

[requinDr]

It can help if you don't want to be flooded with warnings, but you are only hiding the problem, it's in no way a solution. @agantelin

For my part I'm currently thinking it's an issue with how Vite resolve CSS preprocessor paths using the "legacy API" and not an actual issue with dart-sass.

[Mister-Hope]

Vite already support modern api since 5.4 by my pushing, you should set api: modern in css.preprocesserOptions.scss (also sass if you are using sass)

I'm not sure if the option name is completely correct, as I am on subway I don't want to check it from my phone, The final option should be similar at least.

If you are talking about vite however, then this is somehow not a good issue, as bundler usage report should be contained with further envinfo about bundler.

Edited: documentation here https://vitejs.dev/config/shared-options.html#css-preprocessoroptions

[Mister-Hope]

I think you've clearly didn't read the OP issue, as they mention not wanting to silence the warning, but rather solve the problem.

This is something I want to omit at the first sight, as long as you are searching js api usage or command line usage, then you can get the correct docs describing a 3 year old "modern api" with no problem.

@iamlinkus

Again to be clear: sass team has placed modern api docs in there docs for over 3 years. So it wound be very confused for open source contributors like me to understand why shall anyone fail to find the docs.

[Mister-Hope]

@Mister-Hope Thank you for hint! It works.

Solution how to silence the warning in Vite

Just a note: this is not a valid solution.

If you cannot upgrade to vite 5.4, Then you should add the same slientDeprecations options I posted above as first comment.

Starting from 1.79.0, sass support this option in legacy interface

[requinDr]

Vite already support modern api since 5.4 by my pushing, you should set api: modern in css.preprocesserOptions.scss (also sass if you are using sass)

@Mister-Hope Y That fixed it indeed! Thank you.

When I opened the issue I thought it was coming from the way I used dart-sass. But the warning was so generic I couldn't tell what to repport. Also I'm not used to opening issues so I might be missing some reflexes... I obviously did my research on sass and vite docs before and after but I wasn't able to find the information I was looking for. I guess it's on me.

Anyway for anyone else, here is what fixed the issue for me in vite.config.js

defineConfig({
  ...
  css :{
    preprocessorOptions : {
      scss: {
        api: "modern",
      }        
    } 
  }
})

[iamlinkus]

Awesome! Is there such a fix for webpack/nextjs projects?

[Mister-Hope]

For webpack, if you are using sass-loader v16, then there should be no issue. (Unless you opt-in to use legacy ones)

I am not familiar with nextjs

[nex3]

Thanks for helping out, @Mister-Hope.

It sounds like we could use a full deprecation page for this on the website, along with a link to that from the deprecation warning that gets printed.

[dotZak]

@iamlinkus I just ran into this warning today on a brand new project using NextJS 15-rc using Turbopack. My situation isn't exactly yours, but the fix should be the same. I followed @Mister-Hope's recommendation to use sass-loader and it resolved the issue.

Given that turbopack is supporting the webpack loader, this should work identically on NextJS 13 and 14 with webpack. You just need to take the rules out of experimental.turbo.

Install sass-loader.

npm i -D sass sass-loader

/package.json

{
  "name": "…",
  "scripts": {"…"},
  "dependencies": {
    "next": "15.0.0-rc.0",
    "react": "19.0.0-rc-f994737d14-20240522",
    "react-dom": "19.0.0-rc-f994737d14-20240522"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "babel-plugin-react-compiler": "^0.0.0-experimental-24ec0eb-20240918",
    "eslint": "^8",
    "eslint-config-next": "15.0.0-rc.0",
    "eslint-plugin-react-compiler": "^0.0.0-experimental-7670337-20240918",
    "sass": "^1.79.1",
    "sass-loader": "^16.0.1", // 👈 HERE
    "typescript": "^5"
  }
}

Configure the sass-loader for webpack (in my case, for Turbopack).

/next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      rules: {
        "*.scss": {
          loaders: ["sass-loader"],
          as: "*.css",
        },
      },
    }

};

export default nextConfig;

[iamlinkus]

Thanks, @dotZak . Unfortunately, the projects I'm working on have a lot more dependencies and are pretty big and turbopack is not yet working properly, they still have some stuff to fix before we can use it.

[dotZak]

@iamlinkus You don't need to use Turbo. I was just using it as an example that switching over to sass-loader should resolve the issue for you—sass-loader is the same for both webpack and turbo.

Given the size of your project(s), switching to sass-loader may not be an option. But if you're already using webpack then you may give it a try.

[dotZak]

For anyone who's satisfied with silencing the deprecation in NextJS, you can simply add:

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  sassOptions: {
    silenceDeprecations: ["legacy-js-api"], // 👈 HERE
  }
};

export default nextConfig;

[requinDr]

Thanks for the new release 1.79.2 with the link to the well written documentation!

[beatrizsmerino]

In nuxt 2, how can I fix this?

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. More info: https://sass-lang.com/d/legacy-js-api

I have this configuration about sass/scss in the nuxt.config.js file:

"modules": [
    [
        "@nuxtjs/style-resources",
        {
            "scss": [
                    "@/assets/scss/styles.scss",
            ],
        },
    ],
],
"build": {
    "extractCSS": false,
    "postcss": {
        "preset": {
            "postcss-import": {
                "path": [
                    "node_modules",
                    "assets/scss/**/*",
                ],
            },
            "autoprefixer": {
                "browsers": false,
            },
        },
    },
},

This works for me with Vue 3 + Vite in the vite.config.js:

"css": {
        "preprocessorOptions": {
            "scss": {
                "api": "modern-compiler",
                "additionalData": `
                    @use "sass:color";
                    @import "@/assets/scss/styles";
                `,
            },
        },
    },

[nex3]

@beatrizsmerino That's a good question to ask the nuxt maintainers. We don't know the details of how the Sass API is used by every framework out there.

[striderwhite]

Does anyone have a way to quiet the warning for a vite/vue3 setup?

[zhaojjiang]

Does anyone have a way to quiet the warning for a vite/vue3 setup?

You can set vite to use modern api

css.preprocessorOptions.scss.api = 'modern',

https://vitejs.dev/config/shared-options.html#css-preprocessoroptions

[elevchyt]

@iamlinkus I just ran into this warning today on a brand new project using NextJS 15-rc using Turbopack...

When using CSS modules, upon compilation we're getting an error ReferenceError: classes is not defined when attempting to use the classes of a CSS module in this fashion: className={classes.userTitle}.

We're using Turbo with Next.js. Would love to solve this, any idea?

[nex3]

That's not a Sass error. I suggest asking for help from the CSS modules team.

[netil]

for those who only use vitest, add below option to your vitest.config.ts file.

import {defineConfig} from "vitest/config";

export default defineConfig({
    css: {
        preprocessorOptions: {
            scss: {
                api: "modern-compiler",
                silenceDeprecations: ["legacy-js-api"]
            }        
        }
    },
   test: { ... }
});

[melMass]

Thanks Mister-Hope, the preprocessor vite option solves the issue but I agree with the general feeling that the error is super confusing/generic. It points to some announcement that keep referring to various API but I honestly have no clue what they refer to.

[nex3]

There's only so much we can do to document this for you if you're not directly using the Sass API. Some tool you're using is using it for you, but we can't know in the documentation which tool that is it what interface it provides to support the latest version (if it provides one at all!). I suppose we can add a section to the deprecation page encouraging users to reach out to framework support channels.

[melMass]

@nex3 Definitely, there are probably too many ones to fully list them but even mentioning that fact would be good imo: "If you don't understand or directly use the sass API, a component in your stack does (postcss,vite,...)".

That's more of a suggestion to avoid more confused users opening issues than anything

[nex3]

It looks like we already have a section about that here:

If you're using a bundler or other tool that calls the Sass API rather than using it directly, you may need to change the configuration you pass to that tool to tell it to use the modern API.

Webpack should already use the modern API by default, but if you're getting warnings, set api to "modern" or "modern-compiler". See Webpack's documentation for more details.

Vite still defaults to the legacy API, but you can similarly switch it by setting api to "modern" or "modern-compiler". See Vite's documentation for more details.

For other tools, check their documentation or issue tracker for information about supporting the modern Sass API.

It's not clear to me what else we could add to make this clearer.

[0x78f1935]

Vite already support modern api since 5.4 by my pushing, you should set api: modern in css.preprocesserOptions.scss (also sass if you are using sass)

@Mister-Hope Y That fixed it indeed! Thank you.

When I opened the issue I thought it was coming from the way I used dart-sass. But the warning was so generic I couldn't tell what to repport. Also I'm not used to opening issues so I might be missing some reflexes... I obviously did my research on sass and vite docs before and after but I wasn't able to find the information I was looking for. I guess it's on me.

Anyway for anyone else, here is what fixed the issue for me in vite.config.js

defineConfig({
  ...
  css :{
    preprocessorOptions : {
      scss: {
        api: "modern",
      }        
    } 
  }
})

for webpack

Workaround A

Update your webpack.config.cjs

            {
              // load sass files into css files
              loader: 'sass-loader',
              options: {
                sourceMap: isDevelopment,
                api: 'modern'
              }
            }

The line api: 'modern' suppresses the warning.

What your most likely want to do instead is

Recomended Solution

Check the version in package.json. My case, I was using "sass-loader": "^13.3.2",. Simply update to the latest version: yarn upgrade-interactive --latest.

>(*) sass-loader                   latest  13.3.3    ❯  16.0.2

Now run your application, problem should be solved.

For webpack, if you are using sass-loader v16, then there should be no issue. (Unless you opt-in to use legacy ones)

[elifnurturk]

Updating the Node.js version to a newer release and reinstalling the project resolved the issue successfully for me in my Nuxt project.

[AdrianoCahete]

If you're on Nuxt and don't want to create a vite config just for it, you can use that on nuxt.config.ts

vite: {
    css: {
      preprocessorOptions: {
        scss: {
          api: "modern-compiler",
        },
      },
    },
  },

Make sure to change too scss or sass to match your project.

[j0rgedev]

@AdrianoCahete thanks, it solved it. I added that to my nuxt.config.ts and installed sass-loader

[movahhedi]

How can I configure PostCSS in Rollup to use the modern compiler? My current config:

import { glob } from "glob";
import Postcss from "rollup-plugin-postcss";

const a = await glob(["./**/!(*.d).ts", "./**/*.tsx"]);

export default a.map((i) => {
    return {
        input: i,
        plugins: [
            Postcss({
                extract: true,
                modules: {
                    generateScopedName: "_[local]_[hash:base64:5]",
                },
                minimize: true,
                use: ["sass"],
            }),
        ],
        output: [
            {
                file: "dist/index.js",
                format: "es",
            },
        ],
    };
});

[nex3]

That sounds like a question to ask the maintainers of rollup-plugin-postcss.

[elron]

Anybody knows how to get rid of that warning in Svelte 5?

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

More info: https://sass-lang.com/d/legacy-js-api