fix(typography): deprecation warning in latest sass version (#14673)

* Updates to the latest `node-sass` version.
* Fixes the build not using the `node-sass` version from the package.json.
* Fixes a deprecation warning from the latest SASS version when the consumer has configured a non-string `font-family` (e.g. `Helvetica Neue`).

Fixes #14636.

Author: crisbeto

package.json

@@ -98,7 +98,7 @@
     "gulp-if": "^2.0.2",
     "gulp-markdown": "^1.2.0",
     "gulp-rename": "^1.2.2",
-    "gulp-sass": "^3.1.0",
+    "gulp-sass": "^4.0.2",
     "gulp-transform": "^2.0.0",
     "gulp-util": "^3.0.8",
     "hammerjs": "^2.0.8",
@@ -121,7 +121,7 @@
     "minimist": "^1.2.0",
     "mock-fs": "^4.7.0",
     "moment": "^2.18.1",
-    "node-sass": "^4.9.3",
+    "node-sass": "^4.11.0",
     "parse5": "^5.0.0",
     "protractor": "^5.4.1",
     "resolve-bin": "^0.4.0",

src/lib/core/typography/_typography-utils.scss

@@ -31,7 +31,8 @@
     $font-family: _mat-get-type-value($config, $level, font-family);
   }
 
-  @return if($font-family == null, $font-family, unquote($font-family));
+  // Guard against unquoting non-string values, because it's deprecated.
+  @return if(type-of($font-family) == string, unquote($font-family), $font-family);
 }
 
 // Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to

tools/package-tools/gulp/build-scss-pipeline.ts

@@ -4,13 +4,17 @@ import {buildConfig} from '../build-config';
 
 // These imports lack of type definitions.
 const gulpSass = require('gulp-sass');
+const nodeSass = require('node-sass');
 const gulpIf = require('gulp-if');
 const gulpCleanCss = require('gulp-clean-css');
 
 const sassIncludePaths = [
   join(buildConfig.projectDir, 'node_modules/')
 ];
 
+// Set the compiler to our version of `node-sass`, rather than the one that `gulp-sass` depends on.
+gulpSass.compiler = nodeSass;
+
 /** Create a gulp task that builds SCSS files. */
 export function buildScssPipeline(sourceDir: string, minifyOutput = false) {
   return src(join(sourceDir, '**/*.scss'))

yarn.lock

@@ -4921,14 +4921,17 @@ gulp-rename@^1.2.2:
   resolved "https://registry.yarnpkg.com/gulp-rename/-/gulp-rename-1.4.0.tgz#de1c718e7c4095ae861f7296ef4f3248648240bd"
   integrity sha512-swzbIGb/arEoFK89tPY58vg3Ok1bw+d35PfUNwWqdo7KM4jkmuGA78JiDNqR+JeZFaeeHnRg9N7aihX3YPmsyg==
 
-gulp-sass@^3.1.0:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/gulp-sass/-/gulp-sass-3.2.1.tgz#2e3688a96fd8be1c0c01340750c191b2e79fab94"
-  integrity sha512-UATbRpSDsyXCnpYSPBUEvdvtSEzksJs7/oQ0CujIpzKqKrO6vlnYwhX2UTsGrf4rNLwqlSSaM271It0uHYvJ3Q==
+gulp-sass@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/gulp-sass/-/gulp-sass-4.0.2.tgz#cfb1e3eff2bd9852431c7ce87f43880807d8d505"
+  integrity sha512-q8psj4+aDrblJMMtRxihNBdovfzGrXJp1l4JU0Sz4b/Mhsi2DPrKFYCGDwjIWRENs04ELVHxdOJQ7Vs98OFohg==
   dependencies:
-    gulp-util "^3.0"
+    chalk "^2.3.0"
     lodash.clonedeep "^4.3.2"
     node-sass "^4.8.3"
+    plugin-error "^1.0.1"
+    replace-ext "^1.0.0"
+    strip-ansi "^4.0.0"
     through2 "^2.0.0"
     vinyl-sourcemaps-apply "^0.2.0"
 
@@ -4940,7 +4943,7 @@ gulp-transform@^2.0.0:
     gulp-util "^3.0.8"
     lodash "^4.17.4"
 
-gulp-util@*, gulp-util@^3.0, gulp-util@^3.0.0, gulp-util@^3.0.7, gulp-util@^3.0.8:
+gulp-util@*, gulp-util@^3.0.0, gulp-util@^3.0.7, gulp-util@^3.0.8:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f"
   integrity sha1-AFTh50RQLifATBh8PsxQXdVLu08=
@@ -7677,7 +7680,32 @@ node-releases@^1.0.5:
   dependencies:
     semver "^5.3.0"
 
-node-sass@^4.8.3, node-sass@^4.9.0, node-sass@^4.9.3:
+node-sass@^4.11.0:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.11.0.tgz#183faec398e9cbe93ba43362e2768ca988a6369a"
+  integrity sha512-bHUdHTphgQJZaF1LASx0kAviPH7sGlcyNhWade4eVIpFp6tsn7SV8xNMTbsQFpEV9VXpnwTTnNYlfsZXgGgmkA==
+  dependencies:
+    async-foreach "^0.1.3"
+    chalk "^1.1.1"
+    cross-spawn "^3.0.0"
+    gaze "^1.0.0"
+    get-stdin "^4.0.1"
+    glob "^7.0.3"
+    in-publish "^2.0.0"
+    lodash.assign "^4.2.0"
+    lodash.clonedeep "^4.3.2"
+    lodash.mergewith "^4.6.0"
+    meow "^3.7.0"
+    mkdirp "^0.5.1"
+    nan "^2.10.0"
+    node-gyp "^3.8.0"
+    npmlog "^4.0.0"
+    request "^2.88.0"
+    sass-graph "^2.2.4"
+    stdout-stream "^1.4.0"
+    "true-case-path" "^1.0.2"
+
+node-sass@^4.8.3, node-sass@^4.9.0:
   version "4.10.0"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.10.0.tgz#dcc2b364c0913630945ccbf7a2bbf1f926effca4"
   integrity sha512-fDQJfXszw6vek63Fe/ldkYXmRYK/QS6NbvM3i5oEo9ntPDy4XX7BcKZyTKv+/kSSxRtXXc7l+MSwEmYc0CSy6Q==
@@ -8452,7 +8480,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/pkginfo/-/pkginfo-0.4.1.tgz#b5418ef0439de5425fc4995042dced14fb2a84ff"
   integrity sha1-tUGO8EOd5UJfxJlQQtztFPsqhP8=
 
-[email protected]:
+[email protected], plugin-error@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-1.0.1.tgz#77016bd8919d0ac377fdcdd0322328953ca5781c"
   integrity sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==
@@ -9195,7 +9223,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-0.0.1.tgz#29bbd92078a739f0bcce2b4ee41e837953522924"
   integrity sha1-KbvZIHinOfC8zitO5B6DeVNSKSQ=
 
-[email protected]:
+[email protected], replace-ext@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
   integrity sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=