build sass using dart-sass, bypassing css extractor

Makefile

@@ -35,6 +35,15 @@ frontend: env ## Build frontend
 	@-rm -rf $(BUNDLE)
 	@-mkdir $(BUNDLE)
 	yarn build
+	@yarn run dart-sass -s \
+		compressed templates/main.scss  \
+		./static/cache/bundle/css/main.css
+	@yarn run dart-sass -s \
+		compressed templates/mobile.scss  \
+		./static/cache/bundle/css/mobile.css
+	@yarn run dart-sass -s \
+		compressed templates/widget/main.scss  \
+		./static/cache/bundle/css/widget.css
 	@./scripts/librejs.sh
 	@./scripts/cachebust.sh
 

src/main.rs

@@ -63,14 +63,14 @@ lazy_static! {
     pub static ref JS: &'static str =
         FILES.get("./static/cache/bundle/bundle.js").unwrap();
     pub static ref CSS: &'static str =
-        FILES.get("./static/cache/bundle/bundle.css").unwrap();
+        FILES.get("./static/cache/bundle/css/main.css").unwrap();
     pub static ref MOBILE_CSS: &'static str =
-        FILES.get("./static/cache/bundle/mobile.css").unwrap();
+        FILES.get("./static/cache/bundle/css/mobile.css").unwrap();
 
     pub static ref VERIFICATIN_WIDGET_JS: &'static str =
         FILES.get("./static/cache/bundle/verificationWidget.js").unwrap();
     pub static ref VERIFICATIN_WIDGET_CSS: &'static str =
-        FILES.get("./static/cache/bundle/verificationWidget.css").unwrap();
+        FILES.get("./static/cache/bundle/css/widget.css").unwrap();
 
     /// points to source files matching build commit
     pub static ref SOURCE_FILES_OF_INSTANCE: String = {

src/static_assets/filemap.rs

@@ -39,8 +39,8 @@ mod tests {
     #[test]
     fn filemap_works() {
         let files = super::FileMap::new();
-        let css = files.get("./static/cache/bundle/bundle.css").unwrap();
+        let css = files.get("./static/cache/bundle/css/main.css").unwrap();
         println!("{}", css);
-        assert!(css.contains("/assets/bundle/bundle"));
+        assert!(css.contains("/assets/bundle/css"));
     }
 }

templates/index.ts

@@ -23,7 +23,7 @@ import * as panel from "./panel/ts/index";
 import settings from "./panel/settings/";
 import * as deleteAccount from "./panel/settings/account/delete";
 import * as updateSecret from "./panel/settings/secret/update";
-import * as addSiteKey from "./panel/sitekey/add/ts";
+import * as addSiteKey from "./panel/sitekey/add/advance/ts";
 import * as editSitekey from "./panel/sitekey/edit/";
 import * as deleteSitekey from "./panel/sitekey/delete/";
 import * as listSitekeys from "./panel/sitekey/list/ts";
@@ -33,22 +33,6 @@ import log from "./logger";
 
 import VIEWS from "./views/v1/routes";
 
-import "./main.scss";
-import "./auth/css/main.scss";
-import "./components/details-footer/main.scss";
-import "./components/error/main.scss";
-import "./components/showPassword/main.scss";
-import "./panel/css/main.scss";
-import "./panel/navbar/main.scss";
-import "./panel/settings/main.scss";
-import "./panel/notifications/main.scss";
-import "./panel/header/taskbar/main.scss";
-import "./panel/help-banner/main.scss";
-import "./panel/sitekey/add/css/main.scss";
-import "./panel/sitekey/list/css/main.scss";
-
-import "./errors/main.scss";
-
 log.setMode(MODE.production);
 
 const router = new Router();

templates/main.scss

@@ -15,11 +15,25 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+@import "./auth/css/main.scss";
+@import "./components/details-footer/main.scss";
+@import "./components/error/main.scss";
+@import "./components/showPassword/main.scss";
+@import "./panel/css/main.scss";
+@import "./panel/navbar/main.scss";
+@import "./panel/settings/main.scss";
+@import "./panel/notifications/main.scss";
+@import "./panel/header/taskbar/main.scss";
+@import "./panel/help-banner/main.scss";
+@import "./panel/sitekey/add/advance/css/main.scss";
+@import "./panel/sitekey/list/css/main.scss";
+@import "./errors/main.scss";
+
 // creadits: https://codepen.io/rachelandrew/pen/MmOvPr/?editors=1100
 .layout {
 	display: grid;
 	grid-template-columns: minmax(250px, auto) 1fr;
-  grid-template-areas: 'navbar mainContent';
+	grid-template-areas: "navbar mainContent";
 }
 
 /* no grid support? check this out later */

templates/mobile.scss

@@ -14,6 +14,15 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
+@import "./auth/css/mobile.scss";
+@import "./components/details-footer/mobile.scss";
+@import "./panel/css/mobile.scss";
+@import "./panel/settings/mobile.scss";
+@import "./panel/header/taskbar/mobile.scss";
+@import "./panel/navbar/mobile.scss";
+@import "./panel/help-banner/mobile.scss";
+@import "./panel/sitekey/add/advance//css/mobile.scss";
+@import "./panel/sitekey/list/css/mobile.scss";
 
 html {
 	overflow-x: hidden;

templates/mobile.ts

@@ -1,27 +0,0 @@
-/*
- * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-import "./mobile.scss";
-import "./auth/css/mobile.scss";
-import "./components/details-footer/mobile.scss";
-import "./panel/css/mobile.scss";
-import "./panel/settings/mobile.scss";
-import "./panel/header/taskbar/mobile.scss";
-import "./panel/navbar/mobile.scss";
-import "./panel/help-banner/mobile.scss";
-import "./panel/sitekey/add/css/mobile.scss";
-import "./panel/sitekey/list/css/mobile.scss";

webpack.config.js

@@ -10,7 +10,6 @@ module.exports = {
   mode: "production",
   entry: {
     bundle: "./templates/index.ts",
-    mobile: "./templates/mobile.ts",
     verificationWidget: "./templates/widget/index.ts",
     bench: "./templates/widget/service-worker.ts",
   },