Upgrade css-loader

  - Removed typings-for-css-modules-loader as this package is abandoned
  - Wrote a simple loader to replace typings-for-css-modules-loader that works with modern css-loader
    - The other typings packages suggested in Jimdo/typings-for-css-modules-loader#81
      didn't work well (either involved too much change, or didn't work at all with current css-loader@3)
    - Our simple loader maintains the same output as the original loader

Author: marques-work

server/webapp/WEB-INF/rails/package.json

@@ -42,7 +42,7 @@
     "shellwords-ts": "^2.0.4",
     "underscore.string": "^3.3.5",
     "url-parse": "^1.4.7",
-    "uuid": "^3.3.2"
+    "uuid": "^3.3.3"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -70,7 +70,7 @@
     "@types/jasmine-ajax": "^3.1.40",
     "@types/jasmine-jquery": "^1.5.33",
     "@types/license-checker": "^25.0.0",
-    "@types/lodash": "^4.14.136",
+    "@types/lodash": "^4.14.137",
     "@types/mini-css-extract-plugin": "^0.8.0",
     "@types/mithril": "2.0.0",
     "@types/node": "^12.7.2",
@@ -84,7 +84,7 @@
     "babel-eslint": "^10.0.2",
     "babel-loader": "^8.0.0",
     "cache-loader": "^4.1.0",
-    "css-loader": "^1.0.1",
+    "css-loader": "^3.2.0",
     "eslint": "^6.1.0",
     "eslint-loader": "^2.2.1",
     "eslint-plugin-es5": "^1.4.1",
@@ -108,7 +108,7 @@
     "karma-junit-reporter": "^1.2.0",
     "karma-safari-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "license-checker": "^24.0.1",
+    "license-checker": "^25.0.1",
     "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.12.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
@@ -126,12 +126,11 @@
     "ts-node": "^8.3.0",
     "tslint": "^5.18.0",
     "typescript": "^3.5.3",
-    "typings-for-css-modules-loader": "^1.7.0",
     "unused-files-webpack-plugin": "^3.4.0",
     "upath": "^1.1.2",
     "url-loader": "^2.1.0",
     "webpack": "^4.39.2",
-    "webpack-build-notifier": "^1.0.3",
+    "webpack-build-notifier": "^2.0.0-alpha.3",
     "webpack-cli": "^3.3.7"
   }
 }

server/webapp/WEB-INF/rails/webpack/config/loaders/css-loader.ts

@@ -28,15 +28,22 @@ export function getMiniCssExtractLoader(configOptions: ConfigOptions): webpack.R
         loader: configOptions.production ? MiniCssExtractPlugin.loader : "style-loader",
       },
       {
-        loader: "typings-for-css-modules-loader", // translates CSS into CommonJS
+        loader: path.resolve(__dirname, "type-declarations-for-css-modules.js"),
         options: {
-          modules: true,
+          banner: "// This file is automatically generated by typings-for-css-modules.\n// Please do not change this file!"
+        }
+      },
+      {
+        loader: "css-loader",
+        options: {
+          modules: {
+            mode: "local",
+            localIdentName: "[name]__[local]___[hash:base64:5]"
+          },
           sourceMap: true,
-          camelCase: true,
           importLoaders: 1,
-          localIdentName: "[name]__[local]___[hash:base64:5]",
-          namedExport: true,
-          banner: "// This file is automatically generated by typings-for-css-modules.\n// Please do not change this file!"
+          localsConvention: "camelCase",
+          onlyLocals: false
         }
       },
       {

server/webapp/WEB-INF/rails/webpack/config/loaders/type-declarations-for-css-modules.js

@@ -0,0 +1,110 @@
+/*
+ * Copyright 2019 ThoughtWorks, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const fs          = require("fs");
+const os          = require("os");
+const loaderUtils = require("loader-utils");
+const path        = require("path");
+
+// See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Reserved_keywords_as_of_ECMAScript_2015
+const RESERVED_WORDS = new Set([
+  "break",
+  "case",
+  "catch",
+  "class",
+  "const",
+  "continue",
+  "debugger",
+  "default",
+  "delete",
+  "do",
+  "else",
+  "export",
+  "extends",
+  "finally",
+  "for",
+  "function",
+  "if",
+  "import",
+  "in",
+  "instanceof",
+  "new",
+  "return",
+  "super",
+  "switch",
+  "this",
+  "throw",
+  "try",
+  "typeof",
+  "var",
+  "void",
+  "while",
+  "with",
+  "yield"
+]);
+
+const CSS_MODULE_KEY_RE  = /"([^\\"]+)":/g;
+const WORD_ONLY_CHARS_RE = /^\w+$/i;
+
+module.exports = function createTypeDeclarations(content, map, meta) {
+  this.cacheable();
+  const callback = this.async();
+
+  let typeDecls = "";
+  const options = loaderUtils.getOptions(this) || {};
+
+  if (options.banner && "string" === typeof options.banner) {
+    typeDecls += `${options.banner}\n`;
+  }
+
+  const cssClassnames = [];
+
+  let match;
+
+  // content includes a huge payload which introduces extra/unwanted keys in the *.scss..d.ts
+  // so we strip them out by focusing on the locals
+  const locals = content.split("// Exports\nexports.locals = ").pop() || "";
+
+  while (match = CSS_MODULE_KEY_RE.exec(locals), !!match) {
+    const key = match[1];
+
+    if (!cssClassnames.includes(key) && acceptName(key)) {
+      cssClassnames.push(key);
+    }
+  }
+
+  for (const key of cssClassnames) {
+    typeDecls += `export const ${key}: string;\n`;
+  }
+
+  if ("" !== typeDecls) {
+    fs.writeFile(typingsFilename(this.resourcePath), typeDecls.replace(/\n/g, os.EOL), { encoding: "utf-8", mode: 0o644 }, () => {
+      callback(null, content, map, meta);
+    });
+  } else {
+    callback(null, content, map, meta);
+  }
+};
+
+function acceptName(key) {
+  return !RESERVED_WORDS.has(key) && WORD_ONLY_CHARS_RE.test(key);
+}
+
+function typingsFilename(filename) {
+  const dir = path.dirname(filename);
+  const name = path.basename(filename);
+  return path.join(dir, `${name}.d.ts`);
+}

server/webapp/WEB-INF/rails/webpack/helpers/hack-font.scss

@@ -17,28 +17,28 @@
 @import "../views/global/common";
 
 @include font-face($font-family: "Hack",
-                   $file-path: "hack-font/build/web/fonts/hack-regular",
+                   $file-path: "~hack-font/build/web/fonts/hack-regular",
                    $file-formats: ("woff2", "woff")) {
   font-weight: 400;
   font-style:  normal;
 }
 
 @include font-face($font-family: "Hack",
-                   $file-path: "hack-font/build/web/fonts/hack-bold",
+                   $file-path: "~hack-font/build/web/fonts/hack-bold",
                    $file-formats: ("woff2", "woff")) {
   font-weight: 700;
   font-style:  normal;
 }
 
 @include font-face($font-family: "Hack",
-                   $file-path: "hack-font/build/web/fonts/hack-italic",
+                   $file-path: "~hack-font/build/web/fonts/hack-italic",
                    $file-formats: ("woff2", "woff")) {
   font-weight: 400;
   font-style:  italic;
 }
 
 @include font-face($font-family: "Hack",
-                   $file-path: "hack-font/build/web/fonts/hack-bolditalic",
+                   $file-path: "~hack-font/build/web/fonts/hack-bolditalic",
                    $file-formats: ("woff2", "woff")) {
   font-weight: 700;
   font-style:  italic;

server/webapp/WEB-INF/rails/webpack/helpers/spa_base.scss

@@ -33,7 +33,7 @@
 }
 
 @include font-face($font-family: 'FontAwesome',
-                   $file-path: 'font-awesome/fonts/fontawesome-webfont',
+                   $file-path: '~font-awesome/fonts/fontawesome-webfont',
                    $file-formats: ("woff2", "woff", "ttf", "svg", "eot")) {
   font-weight: normal;
   font-style:  normal;
@@ -85,7 +85,7 @@ $opensans-variants: (
 @each $variant-name in map-keys($opensans-variants) {
   $variant: map-get($opensans-variants, $variant-name);
   @include font-face($font-family: 'Open Sans',
-                     $file-path: 'opensans/OpenSans-#{$variant-name}-webfont',
+                     $file-path: '~opensans/OpenSans-#{$variant-name}-webfont',
                      $file-formats: ("eot", "woff", "ttf")
   ) {
     font-style:  map-get($variant, 'font-style');