Move from node-sass to sass and upgrade webpack

Author: Robert Long

admin/package-lock.json

@@ -56,16 +56,16 @@
     "html-webpack-plugin": "^3.1.0",
     "htmlhint": "^0.11.0",
     "mini-css-extract-plugin": "^0.8.0",
-    "node-sass": "^4.12.0",
     "prettier": "^1.7.0",
     "raw-loader": "^0.5.1",
     "rimraf": "^2.6.2",
-    "sass-loader": "^6.0.7",
+    "sass": "^1.26.10",
+    "sass-loader": "^9.0.2",
     "selfsigned": "^1.10.2",
     "shelljs": "^0.8.1",
     "style-loader": "^0.20.2",
     "url-loader": "^1.0.1",
-    "webpack": "^4.32.2",
+    "webpack": "^4.43.0",
     "webpack-cli": "^3.2.3",
     "webpack-dev-server": "^3.1.14",
     "worker-loader": "^2.0.0"

admin/package.json

@@ -22,9 +22,6 @@ do_build() {
 
   # main client
   npm ci --verbose --no-progress
-  npm rebuild node-sass # HACK sometimes node-sass build fails
-  npm rebuild node-sass # HACK sometimes node-sass build fails
-  npm rebuild node-sass # HACK sometimes node-sass build fails
 
   # We inject a random token into the build for the base assets path
   export BASE_ASSETS_PATH="$(echo "base_assets_path" | sha256sum | cut -d' ' -f1)/" # HACK need a trailing slash so webpack'ed semantics line up
@@ -35,9 +32,6 @@ do_build() {
   # admin
   cd admin
   npm ci --verbose --no-progress
-  npm rebuild node-sass # HACK sometimes node-sass build fails
-  npm rebuild node-sass # HACK sometimes node-sass build fails
-  npm rebuild node-sass # HACK sometimes node-sass build fails
 
   npm run build
   cp -R dist/* ../dist # it will get packaged with the rest of the stuff, below

habitat/plan.sh

@@ -147,15 +147,15 @@
     "mini-css-extract-plugin": "^0.8.0",
     "ncp": "^2.0.0",
     "node-fetch": "^2.6.0",
-    "node-sass": "^4.13.0",
     "ora": "^4.0.2",
     "phoenix-channels": "^1.0.0",
     "prettier": "^1.7.0",
     "protoo-client": "^4.0.4",
     "raw-loader": "^0.5.1",
     "request": "^2.88.2",
     "rimraf": "^2.6.2",
-    "sass-loader": "^6.0.7",
+    "sass": "^1.26.10",
+    "sass-loader": "^9.0.2",
     "selfsigned": "^1.10.2",
     "shelljs": "^0.8.1",
     "spritesheet-js": "github:mozillareality/spritesheet.js#hubs/master",
@@ -166,7 +166,7 @@
     "svg-inline-loader": "^0.8.0",
     "tar": "^5.0.5",
     "url-loader": "^1.0.1",
-    "webpack": "^4.32.2",
+    "webpack": "^4.43.0",
     "webpack-bundle-analyzer": "^3.3.2",
     "webpack-cli": "^3.2.3",
     "webpack-dev-server": "^3.1.14",

package-lock.json

@@ -47,9 +47,10 @@
   border-top-right-radius: 50%;
   border-bottom-right-radius: 50%;
   border-bottom-left-radius: 50%;
-  &__hidden {
-    background-color: transparent;
-  }
+}
+
+:local(.hidden) {
+  background-color: transparent;
 }
 
 :local(.mockJoystick.inner) {

package.json

@@ -1,6 +1,5 @@
 import nipplejs from "nipplejs";
 import styles from "./virtual-gamepad-controls.css";
-const HIDDEN_JOYSTICK_STYLE = `${styles.mockJoystick}__hidden`;
 
 /**
  * Instantiates 2D virtual gamepads and emits associated events.
@@ -44,14 +43,14 @@ AFRAME.registerComponent("virtual-gamepad-controls", {
     if (this.enableLeft) {
       this.createLeftStick();
     } else {
-      this.leftMock.classList.add(HIDDEN_JOYSTICK_STYLE);
-      this.leftMockSmall.classList.add(HIDDEN_JOYSTICK_STYLE);
+      this.leftMock.classList.add(styles.hidden);
+      this.leftMockSmall.classList.add(styles.hidden);
     }
     if (this.enableRight) {
       this.createRightStick();
     } else {
-      this.rightMock.classList.add(HIDDEN_JOYSTICK_STYLE);
-      this.rightMockSmall.classList.add(HIDDEN_JOYSTICK_STYLE);
+      this.rightMock.classList.add(styles.hidden);
+      this.rightMockSmall.classList.add(styles.hidden);
     }
     this.onPreferenceChange = this.onPreferenceChange.bind(this);
     window.APP.store.addEventListener("statechanged", this.onPreferenceChange);