Use relative-url-loader to remove font copy hack (#713)

* Use relative-url-loader to remove font copy hack

* So very confused by this linting error, but fixed

* Update packages, hide bourbon log spam

analytics_dashboard/static/apps/components/generic-list/common/collections/collection.js

@@ -154,7 +154,7 @@ define(function(require) {
         /*
          * Returns current number of results after filters and search applied. Works in
          * client and server mode.
-         **/
+         */
         getResultCount: function() {
             var count = 0;
             if (this.fullCollection) {

analytics_dashboard/static/sass/_config-variables.scss

@@ -279,6 +279,12 @@ $description-border-color: $gray-l2;
 $description-border: 1px solid $description-border-color;
 
 // FontAwesome font directory
-$fa-font-path: "/static/node_modules/font-awesome/fonts";
+$fa-font-path: "~font-awesome/fonts";
+
+// Pattern-library OpenSans font directory
+$open-sans-font-path: '~edx-pattern-library/pattern-library/fonts/OpenSans';
 
 $navbar-padding: 30px;
+
+// Ignore Bourbon deprecation warnings spamming our logs
+$output-bourbon-deprecation-warnings: false !default;

analytics_dashboard/static/sass/style-application.scss

@@ -20,7 +20,7 @@
 
 @import "bootstrap-components";
 @import "~bootstrap-accessibility-plugin/plugins/css/bootstrap-accessibility";
-@import "~font-awesome/scss/font-awesome-compiled";
+@import "~font-awesome/scss/font-awesome";
 @import "~datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css";
 @import "~nvd3/build/nv.d3.scss";
 

npm-post-install.sh

@@ -38,27 +38,3 @@ if [ ! -f ${PATTERN_LIBRARY_SASS_PATH}/edx-pattern-library-ltr-compiled.scss ];
 else
   echo "edX pattern library already compiled."
 fi
-
-# pre-compile the font-awesome sass because that's the only way I could get fonts working in webpack...
-if [ ! -f ${NPM_PATH}/font-awesome/scss/font-awesome-compiled.scss ]; then
-  echo "Pre-compiling font-awesome..."
-  ${NPM_BIN}/node-sass ${NPM_PATH}/font-awesome/scss/font-awesome.scss ${NPM_PATH}/font-awesome/scss/font-awesome-compiled.scss
-  echo "Done compiling."
-else
-  echo "font-awesome already compiled."
-fi
-# copy font files to insights static files (they are not included in the compiled sass)
-DJANGO_STATIC_PATH=analytics_dashboard/static
-STATIC_FONTS_PATH=analytics_dashboard/static/fonts
-PATTERN_LIBRARY_FONTS_PATH="${NPM_PATH}/edx-pattern-library/pattern-library/fonts"
-FONT_AWESOME_FONTS_PATH="${NPM_PATH}/font-awesome/fonts"
-if [ ! -f ${STATIC_FONTS_PATH}/OpenSans ]; then
-  echo "Copying font files to Django static fonts directory..."
-  mkdir -p ${STATIC_FONTS_PATH}
-  mkdir -p ${STATIC_FONTS_PATH}/OpenSans
-  cp -rf ${PATTERN_LIBRARY_FONTS_PATH}/OpenSans/* ${STATIC_FONTS_PATH}/OpenSans/
-  cp -rf ${FONT_AWESOME_FONTS_PATH}/* ${STATIC_FONTS_PATH}/
-  echo "Done copying."
-else
-  echo "Font files already copied."
-fi

package.json

@@ -6,13 +6,13 @@
   },
   "dependencies": {
     "babel-core": "^6.25.0",
-    "babel-loader": "^7.0.0",
+    "babel-loader": "^7.1.1",
     "babel-plugin-dynamic-import-node": "^1.0.2",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.5.2",
+    "babel-preset-env": "^1.6.0",
     "babel-preset-es2015": "^6.24.1",
-    "babel-runtime": "^6.23.0",
+    "babel-runtime": "^6.25.0",
     "backbone": "^1.2.3",
     "backbone.marionette": "~2.4.4",
     "backgrid": "^0.3.5",
@@ -23,36 +23,36 @@
     "bootstrap-sass": "~3.3.7",
     "cldr-data": "31.0.2",
     "cldrjs": "0.4.8",
-    "css-loader": "^0.26.1",
+    "css-loader": "^0.28.4",
     "d3": "~3.5.3",
     "datamaps": "~0.5.8",
     "datatables": "~1.10.2",
     "datatables-bootstrap3-plugin": "^0.5.0",
     "edx-pattern-library": "0.16.6",
     "edx-ui-toolkit": "git://github.com/edx/edx-ui-toolkit#29759050aff2f4f3cb6921432855ad057bd69bb1",
-    "extract-text-webpack-plugin": "^2.0.0-rc.2",
-    "file-loader": "^0.10.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^0.11.2",
     "font-awesome": "~4.6.3",
     "globalize": "1.1.1",
     "install": "^0.8.8",
     "jquery": "~1.11.1",
     "js-natural-sort": "~0.8.1",
-    "json-loader": "^0.5.4",
     "moment": "~2.8.3",
     "node-bourbon": "^4.2.8",
-    "node-sass": "^4.4.0",
+    "node-sass": "^4.5.3",
     "npm": "^5.0.3",
     "nprogress": "^0.2.0",
     "nvd3": "~1.8.4",
     "raw-loader": "^0.5.1",
-    "sass-loader": "^4.1.1",
-    "style-loader": "^0.13.1",
+    "resolve-url-loader": "^2.1.0",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.18.2",
     "topojson": "~1.4.3",
     "underscore": "~1.8.2",
     "urijs": "1.17",
-    "url-loader": "^0.5.7",
-    "webpack": "^2.2.1",
-    "webpack-bundle-analyzer": "^2.8.1",
+    "url-loader": "^0.5.9",
+    "webpack": "^3.4.1",
+    "webpack-bundle-analyzer": "^2.8.3",
     "webpack-bundle-tracker": "^0.2.0",
     "webpack-merge": "^4.1.0"
   },
@@ -85,11 +85,11 @@
     "prettier-eslint": "^6.4.2",
     "prettier-eslint-cli": "^4.1.1",
     "sinon": "1.17.7",
-    "webpack-dev-server": "^2.4.5"
+    "webpack-dev-server": "^2.6.1"
   },
   "scripts": {
     "postinstall": "./npm-post-install.sh",
-    "start": "node_modules/.bin/webpack-dev-server --hot --inline",
+    "start": "node_modules/.bin/webpack-dev-server --hot --inline --progress --colors",
     "build": "node_modules/.bin/webpack --config webpack.prod.config.js",
     "lint": "node_modules/.bin/eslint analytics_dashboard/static/",
     "format": "node_modules/.bin/prettier-eslint --write analytics_dashboard/static/apps/course-list/app/*.js analytics_dashboard/static/apps/course-list/app/**/*.js"

webpack.common.config.js

@@ -45,7 +45,7 @@ module.exports = {
             marionette: 'backbone.marionette',
             // Internal Globalize.js code seems to expect 'cldr' to refer to this file in cldrjs.
             cldr: 'cldrjs/dist/cldr',
-            
+
             // Aliases used in tests
             uitk: 'edx-ui-toolkit/src/js',
             URI: 'urijs/src/URI',

webpack.config.js

@@ -57,6 +57,11 @@ module.exports = Merge.smart(commonConfig, {
                             sourceMap: true
                         }
                     },
+                    // converts relative font url paths in the pre-compiled pattern-library sass to webpack-friendly
+                    // paths by locating fonts from the source in node_modules.
+                    {
+                        loader: 'resolve-url-loader'
+                    },
                     // fast-sass-loader might be slightly faster, but lacks useful source-map generation
                     {
                         loader: 'sass-loader', // compiles Sass to CSS.
@@ -70,7 +75,7 @@ module.exports = Merge.smart(commonConfig, {
             // Not all of our dependencies use Sass. We need an additional rule for requiring or including CSS files.
             {
                 test: /\.css$/,
-                use: ['style-loader', 'css-loader'],
+                use: ['style-loader', 'css-loader', 'resolve-url-loader'],
                 include: [path.join(__dirname, 'analytics_dashboard/static'), path.join(__dirname, 'node_modules')]
             }
         ]
@@ -94,4 +99,5 @@ module.exports = Merge.smart(commonConfig, {
     // Source-map generation method. 'eval' is the fastest, but shouldn't be used in production (it increases file sizes
     // a lot). If source-maps are desired in production, 'source-map' should be used (slowest, but highest quality).
     devtool: 'eval'
+    // devtool: 'cheap-module-source-map' // use this instead for better (but slightly slower) source-maps
 });

webpack.prod.config.js

@@ -53,6 +53,11 @@ module.exports = Merge.smart(commonConfig, {
                                 sourceMap: true
                             }
                         },
+                        // converts relative font url paths in the pre-compiled pattern-library sass to webpack-friendly
+                        // paths by locating fonts from the source in node_modules.
+                        {
+                            loader: 'resolve-url-loader'
+                        },
                         // fast-sass-loader might be slightly faster, but lacks useful source-map generation
                         {
                             loader: 'sass-loader', // compiles Sass to CSS.
@@ -70,13 +75,18 @@ module.exports = Merge.smart(commonConfig, {
                 test: /\.css$/,
                 use: extractCSS.extract({
                     fallback: 'style-loader',
-                    use: {
-                        loader: 'css-loader',
-                        options: {
-                            minimize: true,
-                            sourceMap: true
+                    use: [
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                minimize: true,
+                                sourceMap: true
+                            }
+                        },
+                        {
+                            loader: 'resolve-url-loader'
                         }
-                    }
+                    ]
                 }),
                 include: [path.join(__dirname, 'analytics_dashboard/static'), path.join(__dirname, 'node_modules')]
             }