v18.0.1 Rebasing SCSS url() breaks when there are more than two quote characters due to concatenation

[jonaskuske]

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

When the URL of an SCSS asset is made up of multiple concatenated strings, the lexer yields the (partial) URL after it encounters the second quote character, even though the URL might not be done, as + "other/string" follows. (https://github.com/angular/angular-cli/blob/main/packages/angular/build/src/tools/sass/lexer.ts#L95)

This can break URLs, in my case by adding extraneous whitespace:

url("#{$icons-path}functional/fonts/#{$icon-font-family+ "-" + $icon-category}.woff2")
↓
lexer yields part between the first two ", note the trailing whitespace:
#{$icons-path}functional/fonts/#{$icon-font-family+
↓
rebase, this escapes whitespace:
"base||file:#{$icons-path}functional/fonts/#{$icon-font-family+\\ "
↓
"base||file:#{$icons-path}functional/fonts/#{$icon-font-family+\\ "-" + $icon-category}.woff2"
↓
base||file:@pkg/dir/functional/fonts/solid-24\\ -zoom.woff2

Minimal Reproduction

npx @angular/[email protected] new --defaults --style scss scss-rebase-bug18 && cd $_
npm i @db-ui/core
echo '@import "@db-ui/core/sources/css/rollup.assets-paths";@import "@db-ui/core/sources/css/enterprise/db-ui-core";' > src/styles.scss
ng build

Exception or Error

✘ [ERROR] Could not resolve "@db-ui/core/dist/icons/functional/fonts/icons-64-filled\\  -av.woff2?4r2098" [plugin angular-css-resource]

    src/styles.scss:4065:11:
      4065 │   src: url("../node_modules/@db-ui/core/sources/_patterns/00-bas...
           ╵            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@db-ui/core/dist/icons/functional/fonts/icons-64-filled\\  -av.woff2?4r2098" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.
  Preprocessor stylesheets may not show the exact file location of the error.

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / Ôû│ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 18.0.1
Node: 20.11.1
Package Manager: npm 10.2.4
OS: linux x64

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

[jonaskuske]

Awesome, thanks for the quick fix! 😊

[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.}