generate-custom-icon-webfont: Replace with webpack webfonts-loader.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>

docs/development/setup-advanced.md

@@ -163,7 +163,6 @@ sudo mkdir /srv/zulip-emoji-cache
 sudo chown -R `whoami`:`whoami` /srv/zulip-emoji-cache
 ./tools/setup/emoji/build_emoji
 ./tools/inline-email-css
-./tools/setup/generate-custom-icon-webfont
 ./tools/setup/build_pygments_data
 ./tools/setup/generate_zulip_bots_static_files.py
 ./scripts/setup/generate_secrets.py --development

docs/subsystems/front-end-build-process.md

@@ -54,9 +54,8 @@ first add it to the appropriate place under `static/`.
 - Portico JavaScript ("portico" means for logged-out pages) lives under
   `static/js/portico`.
 - Custom SVG graphics living under `static/assets/icons` are compiled into
-  custom icon webfonts that live under `static/generated/icons/fonts` by
+  custom icon webfonts by webfont-loader according to the
-  `tools/setup/generate-custom-icon-webfont` according to the
+  `static/assets/icons/template.hbs` template.
-  `static/icons/fonts/template.hbs` template.
 
 For your asset to be included in a development/production bundle, it
 needs to be accessible from one of the entry points defined in

package.json

@@ -51,7 +51,7 @@
     "ts-node": "7.0.1",
     "typescript": "3.5.1",
     "underscore": "1.9.1",
-    "webfonts-generator": "0.4.0",
+    "webfonts-loader": "^4.4.0",
     "webpack": "4.33.0",
     "webpack-bundle-tracker": "0.3.0",
     "webpack-cli": "3.3.2",

static/.gitignore

@@ -11,8 +11,6 @@
 /generated/pygments_data.js
 # From `tools/update-authors-json`
 /generated/github-contributors.json
-# From tools/setup/generate-custom-icon-webfont
-/generated/icons/
 
 # Legacy emoji data directory
 /third/emoji-data

static/assets/icons/template.hbs

@@ -1,4 +1,4 @@
-/* Custom Zulip icons generated with ./tools/setup/generate-custom-icon-webfont */
+/* Custom Zulip icons generated with webfont-loader */
 
 @font-face {
     font-family: '{{fontName}}';
@@ -23,7 +23,7 @@ i{{baseSelector}} {
 }
 
 {{baseSelector}}::before {
-    font-family: 'zulip-icons' !important;
+    font-family: '{{fontName}}' !important;
     font-style: normal;
     font-weight: normal !important;
     vertical-align: top;

static/assets/icons/zulip-icons.font.js

@@ -0,0 +1,7 @@
+module.exports = {
+    files: ['./*.svg'],
+    fontName: 'zulip-icons',
+    classPrefix: '',
+    baseSelector: '.zulip-icon',
+    cssTemplate: './template.hbs',
+};

static/js/bundles/common.js

@@ -16,6 +16,6 @@ import "../../third/bootstrap/css/bootstrap-btn.css";
 import "../../third/bootstrap/css/bootstrap-responsive.css";
 import "simplebar/dist/simplebar.css";
 import "font-awesome/css/font-awesome.css";
-import "../../generated/icons/style.css";
+import "../../assets/icons/zulip-icons.font.js";
 import "source-sans-pro/source-sans-pro.css";
 import "../../styles/pygments.scss";

tools/check-templates

@@ -19,7 +19,7 @@ EXCLUDED_FILES = [
     # Our parser doesn't handle the way its conditionals are layered
     'templates/zerver/emails/missed_message.source.html',
     # Previously unchecked and our parser doesn't like its indentation
-    'static/icons/fonts/template.hbs',
+    'static/assets/icons/template.hbs',
 ]
 
 def check_our_files(modified_only, all_dups, targets):

tools/lib/provision.py

@@ -488,13 +488,6 @@ def main(options):
     # copy over static files from the zulip_bots package
     generate_zulip_bots_static_files()
 
-    webfont_paths = ["tools/setup/generate-custom-icon-webfont", "static/icons/fonts/template.hbs"]
-    webfont_paths += glob.glob('static/assets/icons/*')
-    if file_or_package_hash_updated(webfont_paths, "webfont_files_hash", options.is_force):
-        run(["tools/setup/generate-custom-icon-webfont"])
-    else:
-        print("No need to run `tools/setup/generate-custom-icon-webfont`.")
-
     build_pygments_data_paths = ["tools/setup/build_pygments_data", "tools/setup/lang.json"]
     from pygments import __version__ as pygments_version
     if file_or_package_hash_updated(build_pygments_data_paths, "build_pygments_data_hash", options.is_force,

tools/linter_lib/custom_check.py

@@ -166,8 +166,7 @@ js_rules = RuleList(
                          'frontend_tests/zjsunit',
                          'frontend_tests/casper_lib/common.js',
                          'frontend_tests/node_tests',
-                         'static/js/debug.js',
+                         'static/js/debug.js']),
-                         'tools/setup/generate-custom-icon-webfont']),
          'description': 'console.log and similar should not be used in webapp'},
         {'pattern': r'''[.]text\(["'][a-zA-Z]''',
          'description': 'Strings passed to $().text should be wrapped in i18n.t() for internationalization',

tools/setup/generate-custom-icon-webfont

@@ -1,39 +0,0 @@
-#!/usr/bin/env node
-
-const fs = require('fs');
-const webfontsGenerator = require('webfonts-generator');
-
-fs.readdir('./static/assets/icons', function (err, files) {
-    if (err) {
-        console.error(err);
-        process.exit(1);
-    }
-
-    // Filter out any non-SVG files and join by absolute path
-    const svg = files.filter(function (file) {
-        return file.slice(-4) === '.svg';
-    }).map(function (file) {
-        return './static/assets/icons/' + file;
-    });
-
-    // Generate webfonts
-    const options = {
-        files: svg,
-        dest: './static/generated/icons/fonts',
-        fontName: 'zulip-icons',
-        cssDest: './static/generated/icons/style.css',
-        cssFontsUrl: 'fonts/',
-        templateOptions: {
-            classPrefix: '',
-            baseSelector: '.zulip-icon',
-        },
-        cssTemplate: './static/icons/fonts/template.hbs',
-    };
-    webfontsGenerator(options, function (err) {
-        if (err) {
-            console.error(err);
-            process.exit(1);
-        }
-        console.log('SUCCESS! Webfonts generated in ./static/generated/icons/fonts.');
-    });
-});

tools/update-prod-static

@@ -46,9 +46,6 @@ run(['./tools/inline-email-css'], stdout=fp, stderr=fp)
 # Copy over static files from the zulip_bots package
 run(['./tools/setup/generate_zulip_bots_static_files.py'], stdout=fp, stderr=fp)
 
-# Generate custom icon webfont
-run(['./tools/setup/generate-custom-icon-webfont'], stdout=fp, stderr=fp)
-
 # Build pygment data
 run(['./tools/setup/build_pygments_data'], stdout=fp, stderr=fp)
 

tools/webpack.config.ts

@@ -11,12 +11,28 @@ const assets = require('./webpack.assets.json');
 
 export default (env?: string): webpack.Configuration[] => {
     const production: boolean = env === "production";
+    const publicPath = production ? '/static/webpack-bundles/' : '/webpack/';
     const config: webpack.Configuration = {
         mode: production ? "production" : "development",
         context: resolve(__dirname, "../"),
         entry: assets,
         module: {
             rules: [
+                // Generate webfont
+                {
+                    test: /\.font\.js$/,
+                    use: [
+                        MiniCssExtractPlugin.loader,
+                        'css-loader',
+                        {
+                            loader: 'webfonts-loader',
+                            options: {
+                                fileName: production ? 'files/[fontname].[chunkhash].[ext]' : 'files/[fontname].[ext]',
+                                publicPath,
+                            },
+                        },
+                    ],
+                },
                 // Run the typescript compilier on .ts files before webpack
                 {
                     test: /\.tsx?$/,
@@ -105,7 +121,7 @@ export default (env?: string): webpack.Configuration[] => {
         },
         output: {
             path: resolve(__dirname, '../static/webpack-bundles'),
-            publicPath: '/static/webpack-bundles/',
+            publicPath,
             filename: production ? '[name].[chunkhash].js' : '[name].js',
         },
         resolve: {
@@ -163,7 +179,6 @@ export default (env?: string): webpack.Configuration[] => {
         // Out JS debugging tools
         config.entry['common'].push('./static/js/debug.js');  // eslint-disable-line dot-notation
 
-        config.output.publicPath = '/webpack/';
         config.plugins = [
             new BundleTracker({filename: 'var/webpack-stats-dev.json'}),
             // Better logging from console for hot reload

version.py

@@ -21,4 +21,4 @@ LATEST_RELEASE_ANNOUNCEMENT = "https://blog.zulip.org/2019/03/01/zulip-2-0-relea
 # Typically, adding a dependency only requires a minor version bump, and
 # removing a dependency requires a major version bump.
 
-PROVISION_VERSION = '37.7'
+PROVISION_VERSION = '38.0'

yarn.lock

@@ -2019,7 +2019,7 @@ commander@2, commander@^2.15.1, commander@^2.7.1, commander@^2.9.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
   integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
 
-commander@^2.19.0, commander@~2.20.0:
+commander@2.x.x, commander@^2.19.0, commander@~2.20.0:
   version "2.20.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
   integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
@@ -4482,6 +4482,14 @@ gl-vec4@^1.0.0, gl-vec4@^1.0.1:
   resolved "https://registry.yarnpkg.com/gl-vec4/-/gl-vec4-1.0.1.tgz#97d96878281b14b532cbce101785dfd1cb340964"
   integrity sha1-l9loeCgbFLUyy84QF4Xf0cs0CWQ=
 
+glob-all@^3.0.3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/glob-all/-/glob-all-3.1.0.tgz#8913ddfb5ee1ac7812656241b03d5217c64b02ab"
+  integrity sha1-iRPd+17hrHgSZWJBsD1SF8ZLAqs=
+  dependencies:
+    glob "^7.0.5"
+    yargs "~1.2.6"
+
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
@@ -4518,6 +4526,18 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.2, glob@~7.1.1, glob@~7.1.2:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^7.1.1:
+  version "7.1.4"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255"
+  integrity sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 glob@^7.1.3:
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
@@ -4956,6 +4976,17 @@ hash-base@^3.0.0:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+hash-files@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/hash-files/-/hash-files-1.1.1.tgz#5f89c64ef21ece69c8261254b7659bd40e91d8de"
+  integrity sha1-X4nGTvIezmnIJhJUt2Wb1A6R2N4=
+  dependencies:
+    async "^1.5.2"
+    glob-all "^3.0.3"
+    opter "^1.1.0"
+    read-files "^0.1.0"
+    underscore "^1.8.3"
+
 hash.js@^1.0.0, hash.js@^1.0.3:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.5.tgz#e38ab4b85dfb1e0c40fe9265c0e9b54854c23812"
@@ -5808,18 +5839,18 @@ js-tokens@^4.0.0:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-js-yaml@^3.10.0:
+js-yaml@3.x.x, js-yaml@^3.12.1, js-yaml@^3.13.0, js-yaml@^3.13.1:
-  version "3.12.0"
+  version "3.13.1"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
-  integrity sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==
+  integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
   dependencies:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-js-yaml@^3.12.1, js-yaml@^3.13.0, js-yaml@^3.13.1:
+js-yaml@^3.10.0:
-  version "3.13.1"
+  version "3.12.0"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1"
-  integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
+  integrity sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==
   dependencies:
     argparse "^1.0.7"
     esprima "^4.0.0"
@@ -6667,6 +6698,11 @@ minimist@1.2.0, minimist@^1.1.3, minimist@^1.2.0, minimist@~1.2.0:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
   integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
 
+minimist@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.1.0.tgz#99df657a52574c21c9057497df742790b2b4c0de"
+  integrity sha1-md9lelJXTCHJBXSX33QnkLK0wN4=
+
 minimist@~0.0.1:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
@@ -7341,6 +7377,11 @@ object-keys@~0.4.0:
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-0.4.0.tgz#28a6aae7428dd2c3a92f3d95f21335dd204e0336"
   integrity sha1-KKaq50KN0sOpLz2V8hM13SBOAzY=
 
+object-path@0.x.x:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.11.4.tgz#370ae752fbf37de3ea70a861c23bba8915691949"
+  integrity sha1-NwrnUvvzfePqcKhhwju6iRVpGUk=
+
 object-visit@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
@@ -7434,6 +7475,18 @@ opn@^5.5.0:
   dependencies:
     is-wsl "^1.1.0"
 
+opter@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/opter/-/opter-1.1.0.tgz#2598aebb60b3f1a7322af1097086f4e798c84a76"
+  integrity sha1-JZiuu2Cz8acyKvEJcIb055jISnY=
+  dependencies:
+    commander "2.x.x"
+    js-yaml "3.x.x"
+    object-path "0.x.x"
+    underscore "1.x.x"
+    z-schema "^3.0.1"
+    z-schema-errors "0.0.1"
+
 optical-properties@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/optical-properties/-/optical-properties-1.0.0.tgz#c3a694bbab7cc4587070886c47f43c8c3a6cceae"
@@ -8449,6 +8502,11 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+read-files@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/read-files/-/read-files-0.1.0.tgz#606bb7a0177952d6a2f983d598096094314d321e"
+  integrity sha1-YGu3oBd5Utai+YPVmAlglDFNMh4=
+
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@@ -10834,7 +10892,7 @@ uglify-to-browserify@~1.0.0:
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
   integrity sha1-bgkk1r2mta/jSeOabWMoUKD4grc=
 
-underscore@1.9.1:
+underscore@1.9.1, underscore@1.x.x, underscore@^1.8.3:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.9.1.tgz#06dce34a0e68a7babc29b365b8e74b8925203961"
   integrity sha512-5/4etnCkd9c8gwgowi5/om/mYO5ajCaOgdzj/oW+0eQV9WxKBDZw5+ycmKmeaTXjInS/W0BzpGLo2xR2aBwZdg==
@@ -11320,7 +11378,7 @@ weakmap-shim@^1.1.0:
   resolved "https://registry.yarnpkg.com/weakmap-shim/-/weakmap-shim-1.1.1.tgz#d65afd784109b2166e00ff571c33150ec2a40b49"
   integrity sha1-1lr9eEEJshZuAP9XHDMVDsKkC0k=
 
-webfonts-generator@0.4.0:
+webfonts-generator@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/webfonts-generator/-/webfonts-generator-0.4.0.tgz#5f89fc81c7160e6e0cbbc9b7387e42a5851fda46"
   integrity sha1-X4n8gccWDm4Mu8m3OH5CpYUf2kY=
@@ -11336,6 +11394,16 @@ webfonts-generator@0.4.0:
     underscore "^1.7.0"
     url-join "^1.1.0"
 
+webfonts-loader@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/webfonts-loader/-/webfonts-loader-4.4.0.tgz#3fd7e3e82356b63ce5a32b4868c805cad3638baf"
+  integrity sha512-X/PhagUv0IFVH+/Riz6BAKk7XK4D/0h00rVdYzbgCHwdS7zErOyRR9ZG+O5ffNPXja1md1uKwK/zHVQEO03Kmg==
+  dependencies:
+    glob "^7.1.1"
+    hash-files "^1.1.1"
+    loader-utils "^1.0.2"
+    webfonts-generator "^0.4.0"
+
 webgl-context@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/webgl-context/-/webgl-context-2.2.0.tgz#8f37d7257cf6df1cd0a49e6a7b1b721b94cc86a0"
@@ -11792,6 +11860,13 @@ yargs@^7.0.0:
     y18n "^3.2.1"
     yargs-parser "^5.0.0"
 
+yargs@~1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-1.2.6.tgz#9c7b4a82fd5d595b2bf17ab6dcc43135432fe34b"
+  integrity sha1-nHtKgv1dWVsr8Xq23MQxNUMv40s=
+  dependencies:
+    minimist "^0.1.0"
+
 yargs@~3.10.0:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
@@ -11814,7 +11889,14 @@ yn@^2.0.0:
   resolved "https://registry.yarnpkg.com/yn/-/yn-2.0.0.tgz#e5adabc8acf408f6385fc76495684c88e6af689a"
   integrity sha1-5a2ryKz0CPY4X8dklWhMiOavaJo=
 
-z-schema@^3.24.2:
+z-schema-errors@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/z-schema-errors/-/z-schema-errors-0.0.1.tgz#e06270a4ca43925729f25764789ca9f46bff0f7d"
+  integrity sha1-4GJwpMpDklcp8ldkeJyp9Gv/D30=
+  dependencies:
+    xtend "^4.0.0"
+
+z-schema@^3.0.1, z-schema@^3.24.2:
   version "3.25.1"
   resolved "https://registry.yarnpkg.com/z-schema/-/z-schema-3.25.1.tgz#7e14663be2b96003d938a56f644fb8561643fb7e"
   integrity sha512-7tDlwhrBG+oYFdXNOjILSurpfQyuVgkRe3hB2q8TEssamDHB7BbLWYkYO98nTn0FibfdFroFKDjndbgufAgS/Q==