scss

css.js

@@ -1,12 +1,16 @@
-var fs = require('fs');
-var cssscss = require('css-scss');
+/* ------------- CSS to SCSS Converter ------------- */
+// This will convert userChrome and userContent to SCSS files, which was somewhat helpful when working with the Dark Matter CSS
 
-var src = fs.readFileSync('./userChrome.css', 'utf8');
-var scss = cssscss(src);
+// WARNING: if working with firefox variables, first you will need to remove them from the file as they will be horribly scrambled by this,
+var fs = require("fs");
+var cssScss = require("css-scss");
 
-fs.writeFileSync('./src/higgsBosonChrome.scss', scss);
+// var src = fs.readFileSync('./userChrome.css', 'utf8');
+// var scss = cssScss(src);
 
-var src = fs.readFileSync('./userContent.css', 'utf8');
-var scss = cssscss(src);
+// fs.writeFileSync('./userChrome.scss', scss);
 
-fs.writeFileSync('./src/higgsBosonContent.scss', scss);
+var src = fs.readFileSync("./userContent.css", "utf8");
+var scss = cssScss(src);
+
+fs.writeFileSync("./userContent.scss", scss);

package.json

@@ -25,5 +25,8 @@
     "prettier": "^2.6.1",
     "sass": "^1.49.0",
     "sass-true": "^6.1.0"
+  },
+  "dependencies": {
+    "css-scss": "^0.1.1"
   }
 }

resources/in-content/custom-content.scss

@@ -0,0 +1,8 @@
+/* a stylesheet for custom user rules. this way you can customize the theme,
+and when you update you can preserve your modifications by just updating everything except this file. */
+
+/* add a dummy rule so this will be loaded by the style editor on any page. */
+
+:root {
+  --uc-dummy-custom-property:initial;
+}