Using Webpack to generate our JavaScript loaded CSS (#2003)

* 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

* Creates lessc Makefile function to DRY up Less commands

Makefile

@@ -11,6 +11,11 @@ SOLR_VERSION=apache-solr-1.4.0
 ACCESS_LOG_FORMAT='%(h)s %(l)s %(u)s %(t)s "%(r)s" %(s)s %(b)s "%(f)s"'
 GITHUB_EDITOR_WIDTH=127
 
+define lessc
+	echo Compressing page-$(1).less; \
+	lessc -x static/css/$(1).less $(BUILD)/$(1).css
+endef
+
 # Use python from local env if it exists or else default to python in the path.
 PYTHON=$(if $(wildcard env),env/bin/python,python)
 
@@ -20,19 +25,9 @@ all: git css js i18n
 
 css:
 	mkdir -p $(BUILD)
-	lessc -x static/css/page-admin.less $(BUILD)/page-admin.css
-	lessc -x static/css/page-book.less $(BUILD)/page-book.css
-	lessc -x static/css/page-edit.less $(BUILD)/page-edit.css
-	lessc -x static/css/page-form.less $(BUILD)/page-form.css
-	lessc -x static/css/page-home.less $(BUILD)/page-home.css
-	lessc -x static/css/page-lists.less $(BUILD)/page-lists.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
+	for asset in admin book edit form home lists plain subject user book-widget design dev; do \
+		$(call lessc,page-$$asset); \
+	done
 
 js:
 	mkdir -p $(BUILD)

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: {