Load JS-only styles via Webpack

This is a precursor for moving our CSS asset building onto
node based tooling by focusing first on our JavaScript CSS
assets.

The loadStyle global is no longer needed as we can load our
CSS via JS now. The code in the head is removed, and the
Makefile built js-all.css file is now no longer used, instead the contents
will be shipped inside the all.js file (Note the bundlesize increase - this
is the CSS being added to that JS file)

See: #1879
See: #1123

Makefile

@@ -29,7 +29,6 @@ css:
 	lessc -x static/css/page-plain.less $(BUILD)/page-plain.css
 	lessc -x static/css/page-subject.less $(BUILD)/page-subject.css
 	lessc -x static/css/page-user.less $(BUILD)/page-user.css
-	lessc -x static/css/js-all.less $(BUILD)/js-all.css
 	lessc -x static/css/page-book-widget.less $(BUILD)/page-book-widget.css
 	lessc -x static/css/page-design.less $(BUILD)/page-design.css
 	lessc -x static/css/page-dev.less $(BUILD)/page-dev.css

openlibrary/plugins/openlibrary/js/index.js

@@ -6,7 +6,6 @@ import { getAvailabilityV2,
     updateBookAvailability, updateWorkAvailability } from './availability';
 import bookReaderInit from './bookreader_direct';
 import Carousel from './carousels';
-import loadStyle from './loadStyle';
 import { ungettext, ugettext,  sprintf } from './i18n';
 import { addFadeInFunctionsTojQuery } from './jquery.others';
 import jQueryRepeat from './jquery.repeat';
@@ -25,6 +24,7 @@ import Template from './template.js';
 // Add $.fn.toggleText, $.fn.focusNextInputField, $.fn.ol_confirm_dialog, $.fn.tap, $.log
 import { closePopup, initShowPasswords, truncate, cond } from './utils';
 import initValidate from './validate';
+import '../../../../static/css/js-all.less';
 
 // Eventually we will export all these to a single global ol, but in the mean time
 // we add them to the window object for backwards compatibility.
@@ -39,7 +39,6 @@ window.getAvailabilityV2 = getAvailabilityV2;
 window.isScrolledIntoView = isScrolledIntoView;
 window.htmlquote = htmlquote;
 window.len = len;
-window.loadStyle = loadStyle;
 window.plot_tooltip_graph = plot_tooltip_graph;
 window.plot_minigraph = plot_minigraph;
 window.range = range;

openlibrary/templates/site/head.html

@@ -24,11 +24,6 @@
     <!-- Both v2 and v1 pages have a JavaScript execution queue that will
     be emptied at the bottom of the page -->
     <script type="text/javascript">window.q = [];</script>
-    $ styleJS = static_url('build/js-all.css');
-    $# Load CSS via JavaScript later to speed up first paint
-    <script>window.q.push(function () {
-        loadStyle("$styleJS");
-    });</script>
     $if "dev" in ctx.features:
         <link href="$static_url('build/page-dev.css')" rel="stylesheet" type="text/css"/>
 

package.json

@@ -20,7 +20,7 @@
     },
     {
       "path": "static/build/all.js",
-      "maxSize": "25.7KB"
+      "maxSize": "34.7KB"
     },
     {
       "path": "static/build/page-admin.css",
@@ -61,14 +61,17 @@
     "@babel/register": "7.0.0",
     "babel-loader": "8.0.5",
     "bundlesize": "^0.17.0",
+    "css-loader": "2.1.1",
     "detect-libc": "^1.0.3",
     "eslint": "^5.7.0",
     "jest": "^24.5.0",
     "less": "^3.8.1",
+    "less-loader": "4.1.0",
     "node-gyp": "^3.8.0",
     "prebuild-install": "^5.2.1",
     "stylelint": "^9.5.0",
     "stylelint-declaration-use-variable": "^1.7.0",
+    "style-loader": "0.23.1",
     "svgo": "1.1.1",
     "webpack": "4.27.1",
     "webpack-cli": "3.1.2"

webpack.config.js

@@ -44,6 +44,13 @@ module.exports = {
                     cacheDirectory: true
                 }
             }
+        }, {
+            test: /\.less$/,
+            loader: [
+                'style-loader',
+                'css-loader',
+                'less-loader' // compiles Less to CSS
+            ]
         } ]
     },
     optimization: {