feat(@angular-devkit/build-angular): rebase relative stylesheet asset…

…s when using preprocessors

Previously, when using a preprocessor, resources (e.g., `url(./my-image.jpg)`) referenced in a stylesheet that was imported into another stylesheet would retain the exact URL.  This would be problematic as the resource would not be at the relative location within the new combined stylesheet.  With this change the resource URLs will now be adjusted to reference the origin location of the resource.  This allows the resources to be found without any additional changes to the application or build process.
CSS and Less already functioned in this manner. This change brings Sass and Stylus to parity.

Fixes: #12797

packages/angular_devkit/build_angular/package.json

@@ -47,6 +47,7 @@
     "postcss-loader": "3.0.0",
     "raw-loader": "4.0.1",
     "regenerator-runtime": "0.13.5",
+    "resolve-url-loader": "3.1.1",
     "rimraf": "3.0.2",
     "rollup": "2.7.2",
     "rxjs": "6.5.5",

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts

@@ -126,11 +126,17 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
     {
       test: /\.scss$|\.sass$/,
       use: [
+        {
+          loader: require.resolve('resolve-url-loader'),
+          options: {
+            sourceMap: cssSourceMap,
+          },
+        },
         {
           loader: require.resolve('sass-loader'),
           options: {
             implementation: sassImplementation,
-            sourceMap: cssSourceMap,
+            sourceMap: true,
             sassOptions: {
               // bootstrap-sass requires a minimum precision of 8
               precision: 8,
@@ -162,9 +168,15 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
       test: /\.styl$/,
       use: [
         {
-          loader: require.resolve('stylus-loader'),
+          loader: require.resolve('resolve-url-loader'),
           options: {
             sourceMap: cssSourceMap,
+          },
+        },
+        {
+          loader: require.resolve('stylus-loader'),
+          options: {
+            sourceMap: { comment: false },
             paths: includePaths,
           },
         },

packages/angular_devkit/build_angular/test/browser/styles_spec_large.ts

@@ -647,4 +647,53 @@ describe('Browser Builder styles', () => {
       expect(await files['styles.css']).toMatch(/\.one(.|\n|\r)*\.two(.|\n|\r)*\.three/);
     });
   });
+
+  extensionsWithImportSupport.forEach(ext => {
+    it(`adjusts relative resource URLs when using @import in ${ext} (global)`, async () => {
+      host.copyFile('src/spectrum.png', './src/more-styles/images/global-img-relative.png');
+      host.writeMultipleFiles({
+        [`src/styles-one.${ext}`]: tags.stripIndents`
+            @import "more-styles/styles-two.${ext}";
+          `,
+        [`src/more-styles/styles-two.${ext}`]: tags.stripIndents`
+            .two {
+              background-image: url(images/global-img-relative.png);
+            }
+          `,
+      });
+
+      const overrides = {
+        sourceMap: false,
+        extractCss: true,
+        styles: [
+          `src/styles-one.${ext}`,
+        ],
+      };
+      const { files } = await browserBuild(architect, host, target, overrides);
+      expect(await files['styles.css']).toContain('\'global-img-relative.png\'');
+    });
+
+    it(`adjusts relative resource URLs when using @import in ${ext} (component)`, async () => {
+      host.copyFile('src/spectrum.png', './src/app/images/component-img-relative.png');
+      host.writeMultipleFiles({
+        [`src/app/styles/component-styles.${ext}`]: `
+            div { background-image: url(../images/component-img-relative.png); }
+          `,
+        [`src/app/app.component.${ext}`]: `
+            @import "styles/component-styles.${ext}";
+          `,
+      });
+
+      host.replaceInFile(
+        'src/app/app.component.ts',
+        './app.component.css',
+        `./app.component.${ext}`,
+      );
+
+      const overrides = {
+        sourceMap: false,
+      };
+      await browserBuild(architect, host, target, overrides);
+    });
+  });
 });