From 28c3d168b5fde3450e665ba836e3ff7effe47b0b Mon Sep 17 00:00:00 2001 From: Tyler Hallada Date: Fri, 28 Jul 2017 14:01:20 -0400 Subject: [PATCH] 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 --- .../common/collections/collection.js | 2 +- .../static/sass/_config-variables.scss | 8 ++++- .../static/sass/style-application.scss | 2 +- npm-post-install.sh | 24 --------------- package.json | 30 +++++++++---------- webpack.common.config.js | 2 +- webpack.config.js | 8 ++++- webpack.prod.config.js | 22 ++++++++++---- 8 files changed, 48 insertions(+), 50 deletions(-) diff --git a/analytics_dashboard/static/apps/components/generic-list/common/collections/collection.js b/analytics_dashboard/static/apps/components/generic-list/common/collections/collection.js index 526af89b4..9a6706609 100644 --- a/analytics_dashboard/static/apps/components/generic-list/common/collections/collection.js +++ b/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) { diff --git a/analytics_dashboard/static/sass/_config-variables.scss b/analytics_dashboard/static/sass/_config-variables.scss index 72cd35700..61298ff87 100644 --- a/analytics_dashboard/static/sass/_config-variables.scss +++ b/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; diff --git a/analytics_dashboard/static/sass/style-application.scss b/analytics_dashboard/static/sass/style-application.scss index b9e06f0cd..4e50d9046 100644 --- a/analytics_dashboard/static/sass/style-application.scss +++ b/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"; diff --git a/npm-post-install.sh b/npm-post-install.sh index bb5b82eaa..bbc5645eb 100755 --- a/npm-post-install.sh +++ b/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 diff --git a/package.json b/package.json index 166ef5332..af7ae6934 100644 --- a/package.json +++ b/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" diff --git a/webpack.common.config.js b/webpack.common.config.js index 4a73fd9d0..6a8d7f3a3 100644 --- a/webpack.common.config.js +++ b/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', diff --git a/webpack.config.js b/webpack.config.js index 28781aa80..9814bec82 100644 --- a/webpack.config.js +++ b/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 }); diff --git a/webpack.prod.config.js b/webpack.prod.config.js index d8877d70b..9563855a4 100644 --- a/webpack.prod.config.js +++ b/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')] }