ESBuild scss compile has broken with bootstrap 4 / 5 scss file.

[leo6104]

Command

build

Is this a regression?

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

The previous version in which this bug was not present was

14.x.x, 15.x.x without esbuild

Description

Here is the error message & bootstrap library file implementation.

@function escape-svg($string) {
  @if str-index($string, "data:image/svg+xml") {
    @each $char, $encoded in $escaped-characters {
      // Do not escape the url brackets
      @if str-index($string, "url(") == 1 {
        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
      } @else {
        $string: str-replace($string, $char, $encoded);
      }
    }
  }

  @return $string;
}

Minimal Reproduction

ng new repro-app
cd repro-app
npm install [email protected] 

In styles.scss, add below scss.

@import "node_modules/bootstrap/scss/functions";

Exception or Error

✘ [ERROR] [plugin angular-sass] Expected ".
   ╷
61 │       @if str-index($string, "url(./../../../../../../../node_modules/bootstrap/scss/\") == 1 {
   │                                                                                                ^
   ╵
  bootstrap/scss/_functions.scss 61:96                                               @import
  projects/styled-components/src/module/alert/component/mp-toast/toast.scss 3:9      @import
  projects/styled-components/src/module/alert/component/mp-toast/mp-toast.scss 4:11  root stylesheet


✘ [ERROR] [plugin angular-sass] Expected ".
   ╷
61 │       @if str-index($string, "url(./../../../node_modules/bootstrap/scss/\") == 1 {
   │                                                                                    ^
   ╵
  bootstrap/scss/_functions.scss 61:84               @import
  projects/styled-components/scss/bs-modal.scss 8:9  @import
  projects/styled-components/scss/all.scss 2:9       @import
  projects/kokomu-pc/scss/styles.scss 1:9            root stylesheet

    angular:styles/global:styles:2:8:
      2 │ @import 'projects/kokomu-pc/scss/styles.scss';

### Your Environment

```text
Angular CLI: 15.0.0-rc.5
Node: 16.18.0
Package Manager: npm 8.19.2
OS: darwin x64

Angular: 15.0.0-rc.4
... animations, bazel, common, compiler, compiler-cli, core
... elements, forms, localize, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.0-rc.5
@angular-devkit/build-angular   15.0.0-rc.5
@angular-devkit/core            15.0.0-rc.5
@angular-devkit/schematics      15.0.0-rc.5
@angular/cdk                    15.0.0-rc.2
@angular/cli                    15.0.0-rc.5
@angular/material               15.0.0-rc.2
@angular/youtube-player         15.0.0-rc.2
@nguniversal/common             14.2.0
@schematics/angular             15.0.0-rc.5
ng-packagr                      15.0.0-rc.0
rxjs                            7.5.6
typescript                      4.8.4

Anything else relevant?

https://github.com/angular/angular-cli/commit/7dd122ad5f34a488f3784326b579b8a93511af7e

I think here is relevant code. Rebase 'url(' logic make it broken. It should be skip with above code.

[leo6104]

I found one more error case.

background-image: url($file-1x);

[e-oz]

Same with Bootstrap v5.2.2.

Please add it to the title if you don't mind.

[leo6104]

Related: https://github.com/angular/angular-cli/pull/24285 PR

[angular-automatic-lock-bot[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.}