fix(@angular/cli): support inlining stylesheet resource tilde paths

Author: clydin

packages/@angular/cli/models/webpack-configs/styles.ts

@@ -46,6 +46,10 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
 
   const postcssPluginCreator = function() {
     return [
+      postcssUrl({
+        filter: ({ url }: { url: string }) => url.startsWith('~'),
+        url: ({ url }: { url: string }) => path.join(projectRoot, 'node_modules', url.substr(1)),
+      }),
       postcssUrl([
         {
           // Only convert root relative URLs, which CSS-Loader won't process into require().
@@ -83,7 +87,7 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
       'postcss-url': 'postcssUrl',
       'postcss-custom-properties': 'customProperties'
     },
-    variables: { minimizeCss, baseHref, deployUrl }
+    variables: { minimizeCss, baseHref, deployUrl, projectRoot }
   };
 
   // determine hashing format

tests/e2e/tests/build/styles/inline-urls.ts

@@ -1,4 +1,4 @@
-import { ng } from '../../../utils/process';
+import { ng, silentNpm } from '../../../utils/process';
 import {
   expectFileToMatch,
   expectFileToExist,
@@ -7,6 +7,7 @@ import {
 } from '../../../utils/fs';
 import { copyProjectAsset } from '../../../utils/assets';
 import { expectToFail } from '../../../utils/utils';
+import { updateJsonFile } from '../../../utils/project';
 
 const imgSvg = `
   <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
@@ -16,8 +17,11 @@ const imgSvg = `
 
 export default function () {
   return Promise.resolve()
+    .then(() => silentNpm('install', '[email protected]'))
     .then(() => writeMultipleFiles({
-      'src/styles.css': `
+      'src/styles.scss': `
+        $fa-font-path: "~font-awesome/font";
+        @import "~font-awesome/scss/font-awesome";
         h1 { background: url('./assets/large.png'); }
         h2 { background: url('./assets/small.svg'); }
         p  { background: url('./assets/small-id.svg#testID'); }
@@ -30,7 +34,16 @@ export default function () {
       'src/assets/small-id.svg': imgSvg
     }))
     .then(() => copyProjectAsset('images/spectrum.png', './assets/large.png'))
+    .then(() => updateJsonFile('.angular-cli.json', configJson => {
+      const app = configJson['apps'][0];
+      app['styles'] = ['styles.scss'];
+    }))
     .then(() => ng('build', '--extract-css', '--aot'))
+    .then(({ stdout }) => {
+      if (stdout.match(/postcss-url: \.+: Can't read file '\.+', ignoring/)) {
+        throw new Error('Expected no postcss-url file read warnings.');
+      }
+    })
     // Check paths are correctly generated.
     .then(() => expectFileToMatch('dist/styles.bundle.css',
       /url\([\'"]?large\.[0-9a-f]{20}\.png[\'"]?\)/))