v18.0.1 Invalid URL replacement in SCSS @function

[tmakin]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

17.3.8

Description

The SCSS preprocessor matches url( in @function definitions, which causes SCSS compilation to fail.
e.g.

@function get-my-url($filename) { 

is rewritten as

@function get-my-url("/path/to/library||file:#{$filename}")  {

Which then fails with:

✘ [ERROR] expected ")".

Similar to this recent issue, where the pre-processor is replacing URLs in a way that is not compatible with an external library
#27688

I think the problem lies with the lexer which may need to explicitly ignore @function calls
https://github.com/angular/angular-cli/blob/18.0.x/packages/angular/build/src/tools/sass/lexer.ts#L51C11-L51C14

Minimal Reproduction

npx @angular/[email protected] new --defaults --style scss scss-url-bug18
cd scss-url-bug18
npm i govuk-frontend
echo "@import 'govuk-frontend/dist/govuk/all';" > src/styles.scss
ng build

Exception or Error

Application bundle generation failed. [2.272 seconds]

✘ [ERROR] expected ")".
   ╷
15 │ @function govuk-font-url("../node_modules/govuk-frontend/dist/govuk/tools||file:#{$filename}") {
   │                          ^
   ╵
  node_modules/govuk-frontend/dist/govuk/tools/_font-url.scss 15:26  @import
  node_modules/govuk-frontend/dist/govuk/tools/_index.scss 2:9       @import
  node_modules/govuk-frontend/dist/govuk/_base.scss 2:9              @import
  node_modules/govuk-frontend/dist/govuk/index.scss 1:9              @import
  node_modules/govuk-frontend/dist/govuk/all.scss 1:9                @import
  src/styles.scss 1:9                                                root stylesheet [plugin angular-sass]

    angular:styles/global:styles:1:8:
      1 │ @import 'src/styles.scss';

Your Environment

Angular CLI: 18.0.1
Node: 20.12.1
Package Manager: npm 10.5.0
OS: darwin arm64

Angular: 18.0.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.1
@angular-devkit/build-angular   18.0.1
@angular-devkit/core            18.0.1
@angular-devkit/schematics      18.0.1
@angular/cli                    18.0.1
@schematics/angular             18.0.1
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.6

Anything else relevant?

No response

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}