gm ass scss compile to build

.gitignore

@@ -1,5 +1,7 @@
 web_modules
 lib
+assets/css
+build
 
 # Created by https://www.toptal.com/developers/gitignore/api/node
 # Edit at https://www.toptal.com/developers/gitignore?templates=node

assets/scss/options.scss

@@ -0,0 +1,55 @@
+@use './variables';
+
+#options {
+  height: 16px;
+  position: absolute;
+  right: 1em;
+  top: 1em;
+  width: 16px;
+  z-index: 20;
+
+  a {
+    .toggler {
+      color: variables.$lgrey;
+      display: inline-block;
+      font-size: 16px;
+      position: absolute;
+      right: 1em;
+      top: 0;
+      z-index: 20;
+
+      :hover {
+        color: variables.$white;
+      }
+    }
+  }
+
+  .editor {
+    background-color: rgba(0, 0, 0, 0.85);
+    border-color: rgba(255, 255, 255, 0.25);
+    border-radius: 0.3em;
+    color: #eee;
+    display: none;
+    font-size: 24px;
+    height: 100%;
+    padding: 0.5em;
+    position: relative;
+    right: 2em;
+    top: 1em;
+    width: 100%;
+  }
+
+  .editor {
+    .error {
+      color: red;
+    }
+  }
+
+  .opened {
+    height: 50%;
+    width: 50%;
+    .editor {
+      display: flex;
+    }
+  }
+}

assets/scss/overlay.scss

@@ -0,0 +1,28 @@
+@use './variables';
+
+#overlay {
+  background-color: variables.$grey;
+  display: none;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  z-index: 100;
+
+  .error {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+    width: 100%;
+
+    #msg {
+      align-self: center;
+      color: variables.$white;
+    }
+
+    input {
+      align-self: center;
+      margin: 16px;
+    }
+  }
+}

assets/scss/styles.scss

@@ -0,0 +1,25 @@
+@use 'xterm/css/xterm.css';
+@use 'toastify-js/src/toastify.css';
+@use './variables';
+@use './overlay';
+@use './options';
+@use './terminal';
+
+html,
+body {
+  background-color: variables.$black;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+
+  .toastify {
+    border-radius: 0;
+    color: variables.$black;
+  }
+}
+
+.xterm {
+  .xterm-viewport {
+    overflow-y: hidden;
+  }
+}

assets/scss/terminal.scss

@@ -0,0 +1,6 @@
+#terminal {
+  display: flex;
+  height: 100%;
+  position: relative;
+  width: 100%;
+}

assets/scss/variables.scss

@@ -0,0 +1,4 @@
+$black: #000;
+$grey: rgba(0, 0, 0, 0.75);
+$white: #fff;
+$lgrey: #ccc;

package.json

@@ -8,17 +8,19 @@
   "main": "./lib/main.js",
   "module": "./lib/server.js",
   "files": [
-    "lib/"
+    "lib/",
+    "assets/css"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json",
+    "build": "snowpack build && tsc -p tsconfig.json",
     "contributor": "all-contributors",
-    "dev": "NODE_ENV=development concurrently --kill-others --success first \"tsc -p tsconfig.json \" \"nodemon .\"",
+    "dev": "NODE_ENV=development yarn build && concurrently --kill-others --success first \"tsc -p tsconfig.json \" \"snowpack dev\" \"nodemon .\"",
     "lint": "eslint --ext .ts,.js .",
     "prepublishOnly": "NODE_ENV=production yarn build",
     "start": "NODE_ENV=production node .",
     "test": "mocha -r babel-register-ts src/**/*.spec.ts",
-    "postinstall": "snowpack install"
+    "postinstall": "snowpack install",
+    "clean": "rm -rf assets/css build lib web_modules node_modules"
   },
   "repository": {
     "type": "git",
@@ -50,6 +52,7 @@
   },
   "nodemonConfig": {
     "ignore": [
+      "*.scss",
       "src/*",
       "*.json"
     ]
@@ -67,6 +70,15 @@
     ],
     "exclude": [
       "**"
+    ],
+    "plugins": [
+      [
+        "@snowpack/plugin-run-script",
+        {
+          "cmd": "sass assets/scss:assets/css --load-path=node_modules -s compressed --no-source-map",
+          "watch": "$1 --watch"
+        }
+      ]
     ]
   },
   "dependencies": {
@@ -81,6 +93,7 @@
     "lodash": "^4.17.19",
     "node-pty": "^0.9.0",
     "node-sass-middleware": "^0.11.0",
+    "sass": "^1.26.10",
     "serve-favicon": "^2.5.0",
     "socket.io": "^2.2.0",
     "socket.io-client": "^2.2.0",

src/client/styles.scss

@@ -1,114 +0,0 @@
-@import '~xterm/dist/xterm';
-@import '~toastify-js/src/toastify.css';
-
-$black: #000;
-$grey: rgba(0, 0, 0, 0.75);
-$white: #fff;
-$lgrey: #ccc;
-$red: red;
-
-html,
-body {
-  background-color: $black;
-  height: 100%;
-  margin: 0;
-  overflow: hidden;
-
-  #overlay {
-    background-color: $grey;
-    display: none;
-    height: 100%;
-    position: absolute;
-    width: 100%;
-    z-index: 100;
-
-    .error {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      justify-content: center;
-      width: 100%;
-
-      #msg {
-        align-self: center;
-        color: $white;
-      }
-
-      input {
-        align-self: center;
-        margin: 16px;
-      }
-    }
-  }
-
-  #terminal {
-    display: flex;
-    height: 100%;
-    position: relative;
-    width: 100%;
-  }
-
-  #options {
-    height: 16px;
-    position: absolute;
-    right: 1em;
-    top: 1em;
-    width: 16px;
-    z-index: 20;
-
-    a {
-      .toggler {
-        color: $lgrey;
-        display: inline-block;
-        font-size: 16px;
-        position: absolute;
-        right: 1em;
-        top: 0;
-        z-index: 20;
-
-        :hover {
-          color: $white;
-        }
-      }
-    }
-
-    .editor {
-      background-color: rgba(0, 0, 0, 0.85);
-      border-color: rgba(255, 255, 255, 0.25);
-      border-radius: 0.3em;
-      color: #eee;
-      display: none;
-      font-size: 24px;
-      height: 100%;
-      padding: 0.5em;
-      position: relative;
-      right: 2em;
-      top: 1em;
-      width: 100%;
-      .error {
-        color: $red;
-      }
-    }
-  }
-
-  #options {
-    .opened {
-      height: 50%;
-      width: 50%;
-      .editor {
-        display: flex;
-      }
-    }
-  }
-
-  .toastify {
-    border-radius: 0;
-    color: $black;
-  }
-}
-
-.xterm {
-  .xterm-viewport {
-    overflow-y: hidden;
-  }
-}

yarn.lock

@@ -1136,7 +1136,7 @@ check-error@^1.0.2:
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
   integrity sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=
 
-chokidar@^3.2.2, chokidar@^3.4.0:
+"chokidar@>=2.0.0 <4.0.0", chokidar@^3.2.2, chokidar@^3.4.0:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.1.tgz#e905bdecf10eaa0a0b1db0c664481cc4cbc22ba1"
   integrity sha512-TQTJyr2stihpC4Sya9hs2Xh+O2wf+igjL36Y75xx2WdHuiICcn/XJza46Jwt0eT5hVpQOzo3FpY3cj3RVYLX0g==
@@ -4922,6 +4922,13 @@ sass-graph@2.2.5:
     scss-tokenizer "^0.2.3"
     yargs "^13.3.2"
 
+sass@^1.26.10:
+  version "1.26.10"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.10.tgz#851d126021cdc93decbf201d1eca2a20ee434760"
+  integrity sha512-bzN0uvmzfsTvjz0qwccN1sPm2HxxpNI/Xa+7PlUEMS+nQvbyuEK7Y0qFqxlPHhiNHb1Ze8WQJtU31olMObkAMw==
+  dependencies:
+    chokidar ">=2.0.0 <4.0.0"
+
 saxes@^3.1.9:
   version "3.1.11"
   resolved "https://registry.yarnpkg.com/saxes/-/saxes-3.1.11.tgz#d59d1fd332ec92ad98a2e0b2ee644702384b1c5b"