Relative url() paths in styles are resolved incorrectly for non-root directory

[fetis]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

I'm not sure.

Description

It looks like the assets resolution mechanism (with or without resourcesOutputPath) always expects that stylesheets are placed in the root folder. If you use elaborate stylesheets configuration with subfolders it brokes relative URLs in stylesheets.

🔬 Minimal Reproduction

I have 2 stylesheets styles.scss and styles2.scss, configured next way in angular.json

            "styles": [
              "src/styles.scss",
              {
                "input": "src/styles2.scss",
                "bundleName": "themes/style2"
              },

both files have the same rule (just for testing)

h1 {
  background: url('./styles/some/relative/background.jpg');
}

after build or serve I have the next output

/styles.css
/themes/styles2.css

but relative paths in both cases resolved as for a file located in the root, i.e. background: url(background.png);

Expected behavior

The relative path in styles2 should be resolved as ../background.png

🌍 Your Environment

Angular CLI: 10.0.5
Node: 12.18.3
OS: darwin x64

Angular: 10.0.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1000.5
@angular-devkit/build-angular      0.1000.8
@angular-devkit/build-ng-packagr   0.1000.5
@angular-devkit/build-optimizer    0.1000.8
@angular-devkit/build-webpack      0.1000.8
@angular-devkit/core               10.0.5
@angular-devkit/schematics         10.0.5
@angular/cdk                       10.1.1
@angular/cli                       10.0.5
@angular/material                  10.1.1
@angular/material-moment-adapter   11.2.0
@ngtools/webpack                   10.0.8
@schematics/angular                10.0.5
@schematics/update                 0.1000.5
ng-packagr                         10.0.3
rxjs                               6.5.5
typescript                         3.9.7
webpack                            4.43.0

[alan-agius4]

Hi @fetis,

The problem here is that the bundle name is actually a path, which is not intended. In this case, we should provide a clear error that the bundle name is invalid.

[Splaktar]

Angular Material's doc site used this feature of bundleName: https://github.com/angular/material.angular.io/blob/master/angular.json#L55

Now with 12.0.0-next.7, we get this error:

$ ng serve
Schema validation failed with the following errors:
  Data path ".styles[2].bundleName" should match pattern "^[\w\-.]*$".
  Data path ".styles[2]" should be string.
  Data path ".styles[2]" should match exactly one schema in oneOf.
error Command failed with exit code 1.

So while this fix makes sense and having these be paths isn't intended, the path feature is currently being used in applications and will cause them to break in v12.

Update: for reference, our fix: angular/material.angular.io#939.