move custom.css from css to config (#4020)

This is another change to cleanup structure, already mentioned in
https://github.com/MagicMirrorOrg/MagicMirror/pull/4019#issuecomment-3792953018

After separating default and 3rd-party modules this PR moves the
`custom.css` from the mm-owned directory `css` into user owned directory
`config`.

It has a built-in function which moves the `css/custom.css` to the new
location `config/custom.css` (if the target not exists).

Let me know if there's a majority in favor of this change.

.github/workflows/automated-tests.yaml

@@ -69,7 +69,7 @@ jobs:
           sudo chmod 4755 ./node_modules/electron/dist/chrome-sandbox
           # Start labwc
           WLR_BACKENDS=headless WLR_LIBINPUT_NO_DEVICES=1 WLR_RENDERER=pixman labwc &
-          touch css/custom.css
+          touch config/custom.css
       - name: "Run tests"
         run: |
           export WAYLAND_DISPLAY=wayland-0

.gitignore

@@ -57,16 +57,10 @@ Temporary Items
 # Ignore all modules
 /modules/*
 
-# Ignore changes to the custom css files but keep the sample and main.
-/css/*
-!/css/custom.css.sample
-!/css/font-awesome.css
-!/css/main.css
-!/css/roboto.css
-
-# Ignore users config file but keep the sample.
+# Ignore users config file but keep the samples.
 config
 !config/config.js.sample
+!config/custom.css.sample
 
 # Vim
 ## swap

js/app.js

@@ -57,6 +57,7 @@ function App () {
 	let nodeHelpers = [];
 	let httpServer;
 	let defaultModules;
+	let env;
 
 	/**
 	 * Loads the config file. Combines it with the defaults and returns the config
@@ -181,7 +182,6 @@ function App () {
 	function loadModule (module) {
 		const elements = module.split("/");
 		const moduleName = elements[elements.length - 1];
-		const env = getEnvVarsAsObj();
 		let moduleFolder = path.resolve(`${global.root_path}/${env.modulesDir}`, module);
 
 		if (defaultModules.includes(moduleName)) {
@@ -296,6 +296,17 @@ function App () {
 
 		Log.setLogLevel(config.logLevel);
 
+		env = getEnvVarsAsObj();
+		// check for deprecated css/custom.css and move it to new location
+		if ((!fs.existsSync(`${global.root_path}/${env.customCss}`)) && (fs.existsSync(`${global.root_path}/css/custom.css`))) {
+			try {
+				fs.renameSync(`${global.root_path}/css/custom.css`, `${global.root_path}/${env.customCss}`);
+				Log.warn(`WARNING! Your custom css file was moved from ${global.root_path}/css/custom.css to ${global.root_path}/${env.customCss}`);
+			} catch (err) {
+				Log.warn("WARNING! Your custom css file is currently located in the css folder. Please move it to the config folder!");
+			}
+		}
+
 		// get the used module positions
 		Utils.getModulePositions();
 

js/defaults.js

@@ -18,7 +18,7 @@ const defaults = {
 	timeFormat: 24,
 	units: "metric",
 	zoom: 1,
-	customCss: "css/custom.css",
+	customCss: "config/custom.css",
 	foreignModulesDir: "modules",
 	defaultModulesDir: "defaultmodules",
 	// httpHeaders used by helmet, see https://helmetjs.github.io/. You can add other/more object values by overriding this in config.js,

js/loader.js

@@ -18,7 +18,7 @@ const Loader = (function () {
 		return {
 			modulesDir: config.foreignModulesDir || "modules",
 			defaultModulesDir: config.defaultModulesDir || "defaultmodules",
-			customCss: config.customCss || "css/custom.css"
+			customCss: config.customCss || "config/custom.css"
 		};
 	};
 
@@ -262,7 +262,7 @@ const Loader = (function () {
 
 		/**
 		 * Load a file (script or stylesheet).
-		 * Prevent double loading and search for files in the vendor folder.
+		 * Prevent double loading and search for files defined in js/vendor.js.
 		 * @param {string} fileName Path of the file we want to load.
 		 * @param {Module} module The module that calls the loadFile function.
 		 * @returns {Promise} resolved when the file is loaded
@@ -281,8 +281,8 @@ const Loader = (function () {
 			}
 
 			if (vendor[fileName] !== undefined) {
-				// This file is available in the vendor folder.
-				// Load it from this vendor folder.
+				// This file is defined in js/vendor.js.
+				// Load it from its location.
 				loadedFiles.push(fileName.toLowerCase());
 				return loadFile(`${vendor[fileName]}`);
 			}

package.json

@@ -43,7 +43,7 @@
 		"postinstall": "git clean -df fonts vendor modules/default",
 		"install-mm": "npm install --no-audit --no-fund --no-update-notifier --only=prod --omit=dev",
 		"install-mm:dev": "npm install --no-audit --no-fund --no-update-notifier && npx playwright install chromium",
-		"lint:css": "stylelint 'css/main.css' 'css/roboto.css' 'css/font-awesome.css' 'defaultmodules/**/*.css' --fix",
+		"lint:css": "stylelint 'css/**/*.css' 'defaultmodules/**/*.css' --fix",
 		"lint:js": "eslint --fix",
 		"lint:markdown": "markdownlint-cli2 . --fix",
 		"lint:prettier": "prettier . --write",
@@ -61,7 +61,7 @@
 		"test": "vitest run",
 		"test:calendar": "node ./defaultmodules/calendar/debug.js",
 		"test:coverage": "vitest run --coverage",
-		"test:css": "stylelint 'css/main.css' 'css/roboto.css' 'css/font-awesome.css' 'defaultmodules/**/*.css'",
+		"test:css": "stylelint 'css/**/*.css' 'defaultmodules/**/*.css'",
 		"test:e2e": "vitest run tests/e2e",
 		"test:electron": "vitest run tests/electron",
 		"test:js": "eslint",

tests/e2e/helpers/global-setup.js

@@ -7,7 +7,7 @@ const { chromium } = require("playwright");
 global.root_path = path.resolve(`${__dirname}/../../../`);
 
 const indexFile = `${global.root_path}/index.html`;
-const cssFile = `${global.root_path}/css/custom.css`;
+const cssFile = `${global.root_path}/config/custom.css`;
 const sampleCss = [
 	".region.row3 {",
 	" top: 0;",