Convert sass to plain css

Change-type: patch
Changelog-entry: Convert sass to plain css
Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>

Makefile

@@ -25,7 +25,6 @@ $(BUILD_TEMPORARY_DIRECTORY): | $(BUILD_DIRECTORY)
 
 # See https://stackoverflow.com/a/13468229/1641422
 SHELL := /bin/bash
-PATH := $(shell pwd)/node_modules/.bin:$(PATH)
 
 # ---------------------------------------------------------------------
 # Operating system and architecture detection
@@ -125,7 +124,7 @@ TARGETS = \
 	info \
 	lint \
 	lint-ts \
-	lint-sass \
+	lint-css \
 	lint-cpp \
 	lint-spell \
 	test-spectron \
@@ -140,15 +139,15 @@ TARGETS = \
 	electron-build
 
 webpack:
-	./node_modules/.bin/webpack
+	npx webpack
 
 .PHONY: $(TARGETS)
 
 lint-ts:
-	balena-lint --fix --typescript typings lib tests scripts/clean-shrinkwrap.ts webpack.config.ts
+	npx balena-lint --fix --typescript typings lib tests scripts/clean-shrinkwrap.ts webpack.config.ts
 
-lint-sass:
+lint-css:
-	sass-lint -v lib/gui/app/scss/**/*.scss lib/gui/app/scss/*.scss
+	npx prettier --write lib/**/*.css
 
 lint-cpp:
 	cpplint --recursive src
@@ -160,18 +159,18 @@ lint-spell:
 		--skip *.svg *.gz,*.bz2,*.xz,*.zip,*.img,*.dmg,*.iso,*.rpi-sdcard,*.wic,.DS_Store,*.dtb,*.dtbo,*.dat,*.elf,*.bin,*.foo,xz-without-extension \
 		lib tests docs Makefile *.md LICENSE
 
-lint: lint-ts lint-sass lint-cpp lint-spell
+lint: lint-ts lint-css lint-cpp lint-spell
 
 MOCHA_OPTIONS=--recursive --reporter spec --require ts-node/register --require-main "tests/gui/allow-renderer-process-reuse.ts"
 
 test-spectron:
-	mocha $(MOCHA_OPTIONS) tests/spectron/runner.spec.ts
+	npx mocha $(MOCHA_OPTIONS) tests/spectron/runner.spec.ts
 
 test-gui:
-	electron-mocha $(MOCHA_OPTIONS) --full-trace --no-sandbox --renderer tests/gui/**/*.ts
+	npx electron-mocha $(MOCHA_OPTIONS) --full-trace --no-sandbox --renderer tests/gui/**/*.ts
 
 test-sdk:
-	electron-mocha $(MOCHA_OPTIONS) --full-trace --no-sandbox tests/shared/**/*.ts
+	npx electron-mocha $(MOCHA_OPTIONS) --full-trace --no-sandbox tests/shared/**/*.ts
 
 test: test-gui test-sdk test-spectron
 

lib/gui/app/css/main.css

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-$disabled-opacity: 0.2;
-
 @font-face {
   font-family: "SourceSansPro";
   src: url("./fonts/SourceSansPro-Regular.ttf") format("truetype");
@@ -37,26 +35,26 @@ body {
   margin: 0;
   overflow: hidden;
 
-  // Prevent white flash when running application
+  /* Prevent white flash when running application */
   background-color: #4d5057;
 
-  // Prevent WebView bounce effect in OS X
+  /* Prevent WebView bounce effect in OS X */
   height: 100%;
   width: 100%;
 }
 
-// Prevent text selection
+/* Prevent text selection */
 body {
   -webkit-user-select: none;
   -webkit-overflow-scrolling: touch;
 }
 
-// Allow window to be dragged from header
+/* Allow window to be dragged from header */
 #app-header {
   -webkit-app-region: drag;
 }
 
-// Prevent blue outline
+/* Prevent blue outline */
 a:focus,
 input:focus,
 button:focus,
@@ -65,5 +63,5 @@ button:focus,
 }
 
 .disabled {
-  opacity: $disabled-opacity;
+  opacity: 0.2;
 }

package.json

@@ -34,6 +34,9 @@
   "lint-staged": {
     "./**/*.{ts,tsx}": [
       "make lint-ts"
+    ],
+    "./**/*.css": [
+      "make lint-css"
     ]
   },
   "author": "Balena Inc. <hello@etcher.io>",
@@ -99,9 +102,6 @@
     "rendition": "^15.2.1",
     "request": "^2.81.0",
     "resin-corvus": "^2.0.5",
-    "sass": "^1.26.5",
-    "sass-lint": "^1.12.1",
-    "sass-loader": "^8.0.2",
     "semver": "^7.3.2",
     "simple-progress-webpack-plugin": "^1.1.2",
     "sinon": "^9.0.2",

webpack.config.ts

@@ -309,22 +309,7 @@ const cssConfig = {
 		rules: [
 			{
 				test: /\.css$/i,
-				use: 'css-loader',
+				use: [MiniCssExtractPlugin.loader, 'css-loader'],
-			},
-			{
-				test: /\.s[ac]ss$/i,
-				use: [
-					MiniCssExtractPlugin.loader,
-					'css-loader',
-					{
-						loader: 'sass-loader',
-						options: {
-							sassOptions: {
-								fiber: false,
-							},
-						},
-					},
-				],
 			},
 			{
 				test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
@@ -345,7 +330,7 @@ const cssConfig = {
 		}),
 	],
 	entry: {
-		index: path.join(__dirname, 'lib', 'gui', 'app', 'scss', 'main.scss'),
+		index: path.join(__dirname, 'lib', 'gui', 'app', 'css', 'main.css'),
 	},
 	output: {
 		path: path.join(__dirname, 'generated'),