Merge pull request #3209 from hypothesis/fix-katex-font-urls

Fix KaTeX font urls

gulpfile.js

@@ -15,6 +15,7 @@ var gulp = require('gulp');
 var gulpIf = require('gulp-if');
 var gulpUtil = require('gulp-util');
 var postcss = require('gulp-postcss');
+var postcssURL = require('postcss-url');
 var sass = require('gulp-sass');
 var sourcemaps = require('gulp-sourcemaps');
 var through = require('through2');
@@ -171,21 +172,36 @@ var styleFiles = [
 ];
 
 gulp.task('build-css', function () {
+  // Rewrite font URLs to look for fonts in 'build/fonts' instead of
+  // 'build/styles/fonts'
+  function rewriteCSSURL(url) {
+    return url.replace(/^fonts\//, '../fonts/');
+  }
+
   var sassOpts = {
     outputStyle: IS_PRODUCTION_BUILD ? 'compressed' : 'nested',
     includePaths: ['node_modules/compass-mixins/lib/'],
   };
 
+  var cssURLRewriter = postcssURL({
+    url: rewriteCSSURL,
+  });
+
   return gulp.src(styleFiles)
     .pipe(sourcemaps.init())
     .pipe(gulpIf(isSASSFile, sass(sassOpts).on('error', sass.logError)))
-    .pipe(postcss([require('autoprefixer')]))
+    .pipe(postcss([require('autoprefixer'), cssURLRewriter]))
     .pipe(sourcemaps.write('.'))
     .pipe(gulp.dest(STYLE_DIR));
 });
 
 gulp.task('watch-css', function () {
-  gulp.watch('./h/static/styles/**/*.scss', ['build-css']);
+  var vendorCSS = styleFiles.filter(function (path) {
+    return path.endsWith('.css');
+  });
+  var styleFileGlobs = vendorCSS.concat('./h/static/styles/**/*.scss');
+
+  gulp.watch(styleFileGlobs, ['build-css']);
 });
 
 var fontFiles = 'h/static/styles/vendor/fonts/*.woff';

package.json

@@ -51,6 +51,7 @@
     "ng-tags-input": "2.2.0",
     "node-uuid": "^1.4.3",
     "postcss": "^5.0.6",
+    "postcss-url": "^5.1.1",
     "query-string": "^3.0.1",
     "raf": "^3.1.0",
     "raven-js": "^2.0.2",