Custom sass functions suddenly do not work? Or the API has changed?

[eastside]

Bug report

I'm using Webpack and Sass to implement a Blueprint.js installation. I (and some others, here) are experiencing an issue registering a custom Sass function.

The error makes it seem like the API for registering a custom Sass function has changed out from under us. Like, in the small example of a power function below, if you play with it, you'll see that suddenly the custom Sass function is getting two arguments when there's supposed to be just one. And when you take webpack out of the picture, sure enough, the pow function only gets one argument and everything works just fine.

I pride myself on figuring out these weird front-end issues, but so far I'm stumped. I'm pretty sure this has to be a bug in sass-loader. I believe everything in the reproducible is correct (tell me if not!), and yet the test.scss file does not compile without an error.

In the enclosed reproducible Github project, you'll find a very simple webpack project. It just has an index.js and test.scss file. The test.scss file includes the following:

  body {
      font-weight: pow(10, 3);
  }

pow is a custom function, which was created by copying Sass-lang.org's own custom function example. This custom function was placed into webpack.config as follows:

              sassOptions: {
                "functions": {
                  'pow($base, $exponent)': function(args) {
                    console.log("args were: ", args);
                    const base = args[0].assertNumber('base').assertNoUnits('base');
                    const exponent = args[1].assertNumber('exponent').assertNoUnits('exponent');
                    return new sass.SassNumber(Math.pow(base.value, exponent.value));
                  }
                }
              }

I believe I've done everything correct here, but test.scss fails to compile. Details follow.

Actual Behavior

When the dev-server is run...

node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js

This error is generated...

ERROR in ./src/test.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: NoSuchMethodError: method not found: 'assertNumber' on null
  ╷
2 │     font-weight: pow(10, 3);
  │                  ^^^^^^^^^^
  ╵
  src/test.scss 2:18  root stylesheet
SassError: SassError: NoSuchMethodError: method not found: 'assertNumber' on null
  ╷
2 │     font-weight: pow(10, 3);
  │                  ^^^^^^^^^^
  ╵
  src/test.scss 2:18  root stylesheet
    at Object.loader (/Users/adam/sass-webpack-test/node_modules/sass-loader/dist/index.js:56:14)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
 @ ./src/index.js 1:0-21

webpack 5.82.0 compiled with 1 error in 622 ms

Expected Behavior

The project should compile. (And font-weight should be 1000!)

How Do We Reproduce?

I've created a very small github repo here. https://github.com/eastside/webpack-sass-broken

The steps to reproduce this on your own are pretty simple:

1. Install a basic webpack environment with sass: npm install webpack webpack-cli webpack-dev-server sass-loader sass
2. Copy from the above repo webpack.config.mjs and contents of src/
3. Run node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js

You should see the same error.

Please paste the results of npx webpack-cli info here, and mention other relevant information

MacBook-Pro:sass-webpack-test adam$ npx webpack-cli info

System:
OS: macOS 11.6
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Memory: 23.53 MB / 32.00 GB
Binaries:
Node: 18.14.1 - /usr/local/bin/node
npm: 9.3.1 - /usr/local/bin/npm
Browsers:
Chrome: 112.0.5615.137
Edge: 112.0.1722.39
Firefox: 102.0.1
Safari: 15.0
Packages:
sass-loader: ^13.2.2 => 13.2.2
webpack: ^5.82.0 => 5.82.0
webpack-cli: ^5.0.2 => 5.0.2
webpack-dev-server: ^4.13.3 => 4.13.3

[alexander-akait]

There are no bugs, you use compileStringAsync in your example, but it is a new sass API and it is tracked here #774, currently we can't use the new API due to lack abilities to implement resolving #774 (comment), yeah, sass team recently merge RFC to support it, so I think it will be fixed soon, but I can't say when, because I am not a part of the sass team and I can't promise anything.

It means we use render currently, you can see when you/we use render https://sass-lang.com/documentation/js-api/interfaces/LegacyStringOptions#functions arguments are not grouping into args and there are no assertNumber or similar functions for other types, sorry, until sass team doesn't finish resolving support we can't use the new API

Closing in favor of #774.

Anyway feel free to feedback and questions