Include sass in webpack configs

Change-type: patch
Changelog-entry: Include sass in webpack configs
Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzoa@balena.io>

Makefile

@@ -146,10 +146,6 @@ 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
 
@@ -196,7 +192,6 @@ 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,6 +46,8 @@ 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,7 +4,6 @@
     <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 "../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
+@import "~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 "../../../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fontawesome";
+@import "~@fortawesome/fontawesome-free-webfonts/scss/fontawesome";
-@import "../../../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-solid";
+@import "~@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,6 +90,7 @@
     "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",
@@ -102,19 +103,23 @@
     "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.7.2",
+    "node-sass": "^4.12.0",
     "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",
-    "webpack": "^4.27.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.31.0",
     "webpack-cli": "^3.1.2",
     "webpack-node-externals": "^1.7.2"
   }

scripts/ci/ensure-staged-sass.sh

@@ -1,31 +0,0 @@
-#!/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,15 +19,69 @@
 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
   },
-  target: 'electron-main',
+  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()
+    }
+  ],
   module: {
     rules: [
       {
@@ -51,66 +105,42 @@ const 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')
   },
-  output: {
+  plugins: [
-    path: path.join(__dirname, 'generated'),
+    new MiniCssExtractPlugin({
-    filename: '[name].js'
+      filename: '[name].css',
-  }
+      chunkFilename: '[id].css'
-}, commonConfig)
+    })
+  ]
+})
 
-const etcherConfig = _.assign({
+const etcherConfig = _.assign({}, commonConfig, {
   node: {
     __dirname: false,
     __filename: true
   },
+  target: 'electron-main',
   externals: [
     nodeExternals(),
     (context, request, callback) => {
@@ -141,12 +171,8 @@ const etcherConfig = _.assign({
   ],
   entry: {
     etcher: path.join(__dirname, 'lib', 'gui', 'etcher.js')
-  },
-  output: {
-    path: path.join(__dirname, 'generated'),
-    filename: '[name].js'
   }
-}, commonConfig)
+})
 
 module.exports = [
   guiConfig,