rebase relative stylesheet assets when using preprocessors

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/src/angular-cli-files/plugins/postcss-cli-resources.ts

@@ -81,11 +81,7 @@ export default postcss.plugin('postcss-cli-resources', (options: PostcssCliResou
       return cachedUrl;
     }
 
-    if (inputUrl.startsWith('~')) {
-      inputUrl = inputUrl.substr(1);
-    }
-
-    if (inputUrl.startsWith('/')) {
+    if (rebaseRootRelative && inputUrl.startsWith('/')) {
       let outputUrl = '';
       if (deployUrl.match(/:\/\//) || deployUrl.startsWith('/')) {
         // If deployUrl is absolute or root relative, ignore baseHref & use deployUrl as is.
@@ -103,6 +99,10 @@ export default postcss.plugin('postcss-cli-resources', (options: PostcssCliResou
       return outputUrl;
     }
 
+    if (inputUrl.startsWith('~')) {
+      inputUrl = inputUrl.substr(1);
+    }
+
     const { pathname, hash, search } = url.parse(inputUrl.replace(/\\/g, '/'));
     const resolver = (file: string, base: string) => new Promise<string>((resolve, reject) => {
       loader.resolve(base, decodeURI(file), (err, result) => {

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

@@ -257,6 +257,17 @@ describe('Browser Builder styles', () => {
   });
 
   it(`supports font-awesome imports`, async () => {
+    host.writeMultipleFiles({
+      'src/styles.scss': `
+        @import "font-awesome/scss/font-awesome";
+      `,
+    });
+
+    const overrides = { extractCss: true, styles: [`src/styles.scss`] };
+    await browserBuild(architect, host, target, overrides);
+  }, 30000);
+
+  it(`supports font-awesome imports (tilde)`, async () => {
     host.writeMultipleFiles({
       'src/styles.scss': `
         $fa-font-path: "~font-awesome/fonts";
@@ -282,15 +293,23 @@ describe('Browser Builder styles', () => {
   it(`uses autoprefixer`, async () => {
     host.writeMultipleFiles({
       'src/styles.css': tags.stripIndents`
+        @import url(imported-styles.css);
         /* normal-comment */
         /*! important-comment */
         div { flex: 1 }`,
+      'src/imported-styles.css': tags.stripIndents`
+        /* normal-comment */
+        /*! important-comment */
+        section { flex: 1 }`,
       '.browserslistrc': 'IE 10',
     });
 
     const overrides = { extractCss: true, optimization: false };
     const { files } = await browserBuild(architect, host, target, overrides);
     expect(await files['styles.css']).toContain(tags.stripIndents`
+      /* normal-comment */
+      /*! important-comment */
+      section { -ms-flex: 1; flex: 1 }
       /* normal-comment */
       /*! important-comment */
       div { -ms-flex: 1; flex: 1 }`);
@@ -570,6 +589,31 @@ describe('Browser Builder styles', () => {
     await browserBuild(architect, host, target, overrides);
   });
 
+  it('causes equal failure for tilde and tilde-slash url()', async () => {
+    host.writeMultipleFiles({
+      'src/styles.css': `
+        body {
+          background-image: url('~/does-not-exist.jpg');
+        }
+      `,
+    });
+
+    const overrides = { extractCss: true, optimization: true };
+    const run = await architect.scheduleTarget(target, overrides);
+    await expectAsync(run.result).toBeResolvedTo(jasmine.objectContaining({ success: false }));
+
+    host.writeMultipleFiles({
+      'src/styles.css': `
+        body {
+          background-image: url('~does-not-exist.jpg');
+        }
+      `,
+    });
+
+    const run2 = await architect.scheduleTarget(target, overrides);
+    await expectAsync(run2.result).toBeResolvedTo(jasmine.objectContaining({ success: false }));
+  });
+
   it('supports Protocol-relative Url', async () => {
     host.writeMultipleFiles({
       'src/styles.css': `
@@ -639,4 +683,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);
+    });
+  });
 });