SASS deprecation message (legacy JS API)

[n3f]

Description

I apologize if this is covered elsewhere but it didn't seem to be discovered with a search for sass legacy.

npx wp-scripts build should complete without errors, but shows deprecated message:

LOG from ./node_modules/sass-loader/dist/cjs.js sass-loader ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/style.scss
<w> Deprecation The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
<w>
<w> More info: https://sass-lang.com/d/legacy-js-api
<w>
<w> null

LOG from ./node_modules/sass-loader/dist/cjs.js sass-loader ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/editor.scss
<w> Deprecation The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
<w>
<w> More info: https://sass-lang.com/d/legacy-js-api
<w>
<w> null

Step-by-step reproduction instructions

1. npx @wordpress/create-block my-custom-block
2. cd my-custom-block
3. npx wp-scripts build

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[n3f]

It's possible that #37044 is related.

[ALJ]

I just started seeing this same deprecation notice today after a fresh install of @wordpress/scripts:

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

I believe this is related to dart-sass using the legacy JS API still. Version 1.79.0 was released two weeks ago and emits these warnings: sass/dart-sass#2343

I can reliably prevent the warnings by forcing the use of the "modern" JS API by adding the line api: "modern" as a new option in line 206 of wordpress/scripts webpack.config.js. Like this:

loader: require.resolve( 'sass-loader' ),
options: {
	sourceMap: ! isProduction,
	api: "modern",
},

[ALJ]

Hi @n3f if you're able to add more labels to this issue, I think the [Package] Scripts GitHub label is appropriate, in addition to the existing bug label.

[n3f]

Unfortunately it looks like I don't have the ability to add/edit tags here.

[gziolo]

Fixed with #67572. Tested with @wordpress/[email protected]. The stable version is expected to be published to npm on Wednesday.