_font-url function name causes Invalid function name error

[rickbergmann]

Using the following tech stack:

Node 18.19.0 Webpack 5.89.0 Sass 1.70.0 Sass-loader 14.0.0

I am getting this error during the webpack build:

ERROR in ./src/scss/style.scss (./src/scss/style.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/scss/style.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Invalid function name.
    ╷
163 │ ┌ @function _font-url($path,
164 │ │  $format,
165 │ │ $svgid: null,
166 │ │   $iefix: false) {
    │ └────────────────^
    ╵
  node_modules/accoutrement-type/sass/_helpers.scss 163:1  @import
  node_modules/accoutrement-type/sass/_type.scss 6:9       @import
  src/scss/style.scss 7:9                                  root stylesheet
 @ ./src/scss/style.scss

As a quick test I renamed the function to _font-urls which has fixed the error, but I don't understand why the function name is invalid. Any idea's?

[rickbergmann]

After some further testing and investigation, I initially thought that the Sass compiler had an issue with the 2 similarly named functions _font-url and font-url, but when I had renamed them both to _font-urls and font-urls the compile was still successful, so I ruled out that theory.

I looked a bit into the Sass compiler (Dart Sass, not Lib Sass), and it will throw this "Invalid function name" error if a reserved word is used as a function name, and the string url is included in that list, which is really strange because font-url does not throw an error but _font-url does.

I then used this online scss compiler (Dart Sass) to test the validity of function names and I found that when a function is prefixed with an underscore and contains a reserved word it throws the "Invalid function name" error. https://json2csharp.com/css-tools/scss-to-css

Some combinations I tried:

@function _font-url     : Fails
@function _font-path  : Passes
@function font-url      : Passes
@function _font-and   : Fails
@function _font-or     : Fails 

This could be a bug in the Dart Sass compiler, not sure if it's intended behavior.

As an interim solution I have submitted a PR and renamed the _font-url function to _font-path which will at least prevent the error from occurring during a build process.

[jamesnw]

I didn't see any differences in the outcomes, but here's the code in the official Sass Playground.