Merge pull request #2806 from balena-io/rollback-update-webpack

Rollback update webpack

Makefile

@@ -146,6 +146,10 @@ webpack:
 
 .PHONY: $(TARGETS)
 
+sass:
+	npm rebuild node-sass
+	node-sass lib/gui/app/scss/main.scss > lib/gui/css/main.css
+
 lint-js:
 	eslint --ignore-pattern scripts/resin/**/*.js lib tests scripts bin webpack.config.js
 
@@ -192,6 +196,7 @@ info:
 	@echo "Target arch         : $(TARGET_ARCH)"
 
 sanity-checks:
+	./scripts/ci/ensure-staged-sass.sh
 	./scripts/ci/ensure-npm-dependencies-compatibility.sh
 	./scripts/ci/ensure-all-file-extensions-in-gitattributes.sh
 

lib/gui/app/app.js

@@ -46,8 +46,6 @@ const osDialog = require('./os/dialog')
 const exceptionReporter = require('./modules/exception-reporter')
 const updateLock = require('./modules/update-lock')
 
-require('./scss/main.scss')
-
 /* eslint-disable lodash/prefer-lodash-method,lodash/prefer-get */
 
 // Enable debug information from all modules that use `debug`

lib/gui/app/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title>Etcher</title>
     <link rel="stylesheet" type="text/css" href="../../../node_modules/flexboxgrid/dist/flexboxgrid.css">
+    <link rel="stylesheet" type="text/css" href="../css/main.css">
     <link rel="stylesheet" type="text/css" href="../css/desktop.css">
     <link rel="stylesheet" type="text/css" href="../css/angular.css">
     <script src="../../../generated/gui.js"></script>

lib/gui/app/scss/main.scss

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-$icon-font-path: "../../../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
+$icon-font-path: "../../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
 $font-size-base: 13px;
 $cursor-disabled: initial;
 $link-hover-decoration: none;
@@ -22,7 +22,7 @@ $btn-min-width: 170px;
 $link-color: #ddd;
 $disabled-opacity: 0.2;
 
-@import "~bootstrap-sass/assets/stylesheets/bootstrap";
+@import "../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
 @import "./modules/theme";
 @import "./modules/bootstrap";
 @import "./modules/space";
@@ -41,42 +41,42 @@ $disabled-opacity: 0.2;
 @import "../pages/settings/styles/settings";
 @import "../pages/finish/styles/finish";
 
-$fa-font-path: "../../../../node_modules/@fortawesome/fontawesome-free-webfonts/webfonts";
+$fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free-webfonts/webfonts";
 
-@import "~@fortawesome/fontawesome-free-webfonts/scss/fontawesome";
-@import "~@fortawesome/fontawesome-free-webfonts/scss/fa-solid";
+@import "../../../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fontawesome";
+@import "../../../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-solid";
 
 @font-face {
   font-family: Roboto;
-  src: url('../../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff');
+  src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff');
   font-weight: 100;
   font-style: normal;
 }
 
 @font-face {
   font-family: Roboto;
-  src: url('../../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff');
+  src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff');
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
   font-family: Roboto;
-  src: url('../../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff');
+  src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: Roboto;
-  src: url('../../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff');
+  src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff');
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
   font-family: Roboto;
-  src: url('../../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff');
+  src: url('../../../node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff');
   font-weight: 700;
   font-style: normal;
 }

package.json

@@ -90,7 +90,6 @@
     "angular-mocks": "1.7.6",
     "babel-loader": "^8.0.4",
     "chalk": "^1.1.3",
-    "css-loader": "^2.1.1",
     "electron": "3.1.9",
     "electron-builder": "^20.40.2",
     "electron-mocha": "^6.0.4",
@@ -103,23 +102,19 @@
     "eslint-plugin-promise": "^3.6.0",
     "eslint-plugin-react": "^7.11.1",
     "eslint-plugin-standard": "^3.0.1",
-    "file-loader": "^3.0.1",
     "html-angular-validate": "^0.2.3",
     "html-loader": "^0.5.1",
-    "mini-css-extract-plugin": "^0.6.0",
     "mocha": "^5.0.1",
     "mochainon": "^2.0.0",
     "nock": "^9.2.3",
     "node-gyp": "^3.8.0",
-    "node-sass": "^4.12.0",
+    "node-sass": "^4.7.2",
     "omit-deep-lodash": "1.1.4",
     "pkg": "^4.3.0",
     "sass-lint": "^1.12.1",
-    "sass-loader": "^7.1.0",
     "simple-progress-webpack-plugin": "^1.1.2",
     "spectron": "^5.0.0",
-    "style-loader": "^0.23.1",
-    "webpack": "^4.31.0",
+    "webpack": "^4.27.0",
     "webpack-cli": "^3.1.2",
     "webpack-node-externals": "^1.7.2"
   }

scripts/ci/ensure-staged-sass.sh

@@ -0,0 +1,31 @@
+#!/bin/bash
+
+###
+# Copyright 2017 resin.io
+#
+# 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.
+###
+
+set -e
+set -u
+
+make sass
+
+# From http://stackoverflow.com/a/9393642/1641422
+if [[ -n $(git status -s | grep "\\.css$" || true) ]]; then
+  echo "There are unstaged sass changes. Please commit the result of:" 1>&2
+  echo ""
+  echo "    make sass" 1>&2
+  echo ""
+  exit 1
+fi

webpack.config.js

@@ -19,69 +19,15 @@
 const _ = require('lodash')
 const path = require('path')
 const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const nodeExternals = require('webpack-node-externals')
 
 const commonConfig = {
   mode: 'production',
-  resolve: {
-    extensions: [ '.js', '.jsx', '.json' ]
-  },
-  plugins: [
-    new SimpleProgressWebpackPlugin({
-      format: process.env.WEBPACK_PROGRESS || 'verbose'
-    })
-  ],
-  output: {
-    path: path.join(__dirname, 'generated'),
-    filename: '[name].js'
-  }
-}
-
-const guiConfig = _.assign({}, commonConfig, {
-  node: {
-    __dirname: true,
-    __filename: true
-  },
-  target: 'electron-renderer',
   optimization: {
     // Minification breaks angular.
     minimize: false
   },
-  externals: [
-    nodeExternals({
-      whitelist: [ /fonts[/\\].*\.(woff|woff2|ttf|otf|eot|svg)([#?]|$)/ ]
-    }),
-    (context, request, callback) => {
-      const absoluteContext = path.resolve(context)
-      const absoluteNodeModules = path.resolve('node_modules')
-
-      // Keep node_modules font import path
-      if (/fonts[/\\].*\.(woff|woff2|ttf|otf|eot|svg)([#?]|$)/.test(request)) {
-        return callback(null, `root "${path.resolve(absoluteContext, request)}"`)
-      }
-
-      // We shouldn't rewrite any node_modules import paths
-      // eslint-disable-next-line lodash/prefer-lodash-method
-      if (!path.relative(absoluteNodeModules, absoluteContext).startsWith('..')) {
-        return callback()
-      }
-
-      // We want to keep the SDK code outside the GUI bundle.
-      // This piece of code allows us to run the GUI directly
-      // on the tree (for testing purposes) or inside a generated
-      // bundle (for production purposes), by translating
-      // relative require paths within the bundle.
-      if (/\/(sdk|shared)/i.test(request) || /package\.json$/.test(request)) {
-        const output = path.join(__dirname, 'generated')
-        const dirname = path.join(context, request)
-        const relative = path.relative(output, dirname)
-        return callback(null, `commonjs ${path.join('..', '..', relative)}`)
-      }
-
-      return callback()
-    }
-  ],
+  target: 'electron-main',
   module: {
     rules: [
       {
@@ -105,42 +51,66 @@ const guiConfig = _.assign({}, commonConfig, {
         use: {
           loader: 'html-loader'
         }
-      },
-      {
-        test: /\.s(a|c)ss$/,
-        use: [
-          // eslint-disable-next-line no-negated-condition
-          process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
-          'css-loader',
-          'sass-loader'
-        ]
-      },
-      {
-        test: /fonts[/\\].*\.(woff|woff2|ttf|otf|eot|svg)([#?]|$)/,
-        loader: 'file-loader',
-        options: {
-          name: 'fonts/[name].[ext]'
-        }
       }
     ]
   },
+  resolve: {
+    extensions: [ '.js', '.jsx', '.json' ]
+  },
+  plugins: [
+    new SimpleProgressWebpackPlugin({
+      format: process.env.WEBPACK_PROGRESS || 'verbose'
+    })
+  ]
+}
+
+const guiConfig = _.assign({
+  node: {
+    __dirname: true,
+    __filename: true
+  },
+  externals: [
+    nodeExternals(),
+    (context, request, callback) => {
+      // eslint-disable-next-line lodash/prefer-lodash-method
+      const absoluteContext = path.resolve(context)
+      const absoluteNodeModules = path.resolve('node_modules')
+
+      // We shouldn't rewrite any node_modules import paths
+      // eslint-disable-next-line lodash/prefer-lodash-method
+      if (!path.relative(absoluteNodeModules, absoluteContext).startsWith('..')) {
+        return callback()
+      }
+
+      // We want to keep the SDK code outside the GUI bundle.
+      // This piece of code allows us to run the GUI directly
+      // on the tree (for testing purposes) or inside a generated
+      // bundle (for production purposes), by translating
+      // relative require paths within the bundle.
+      if (/\/(sdk|shared)/i.test(request) || /package\.json$/.test(request)) {
+        const output = path.join(__dirname, 'generated')
+        const dirname = path.join(context, request)
+        const relative = path.relative(output, dirname)
+        return callback(null, `commonjs ${path.join('..', '..', relative)}`)
+      }
+
+      return callback()
+    }
+  ],
   entry: {
     gui: path.join(__dirname, 'lib', 'gui', 'app', 'app.js')
   },
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: '[name].css',
-      chunkFilename: '[id].css'
-    })
-  ]
-})
+  output: {
+    path: path.join(__dirname, 'generated'),
+    filename: '[name].js'
+  }
+}, commonConfig)
 
-const etcherConfig = _.assign({}, commonConfig, {
+const etcherConfig = _.assign({
   node: {
     __dirname: false,
     __filename: true
   },
-  target: 'electron-main',
   externals: [
     nodeExternals(),
     (context, request, callback) => {
@@ -171,8 +141,12 @@ const etcherConfig = _.assign({}, commonConfig, {
   ],
   entry: {
     etcher: path.join(__dirname, 'lib', 'gui', 'etcher.js')
+  },
+  output: {
+    path: path.join(__dirname, 'generated'),
+    filename: '[name].js'
   }
-})
+}, commonConfig)
 
 module.exports = [
   guiConfig,