From 6324ec2116f93c60f758251f6bb71a8e37be365d Mon Sep 17 00:00:00 2001 From: Karsten Hassel Date: Wed, 28 Jan 2026 10:50:25 +0100 Subject: [PATCH] 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 | 2 +- .gitignore | 10 ++-------- {css => config}/custom.css.sample | 0 js/app.js | 13 ++++++++++++- js/defaults.js | 2 +- js/loader.js | 8 ++++---- package.json | 4 ++-- tests/e2e/helpers/global-setup.js | 2 +- 8 files changed, 23 insertions(+), 18 deletions(-) rename {css => config}/custom.css.sample (100%) diff --git a/.github/workflows/automated-tests.yaml b/.github/workflows/automated-tests.yaml index 5685ff33..086c8bf4 100644 --- a/.github/workflows/automated-tests.yaml +++ b/.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 diff --git a/.gitignore b/.gitignore index 027400d3..e1365c2f 100644 --- a/.gitignore +++ b/.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 diff --git a/css/custom.css.sample b/config/custom.css.sample similarity index 100% rename from css/custom.css.sample rename to config/custom.css.sample diff --git a/js/app.js b/js/app.js index a67bf1b8..3d7e35d1 100644 --- a/js/app.js +++ b/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(); diff --git a/js/defaults.js b/js/defaults.js index 88a706d7..58e930a3 100644 --- a/js/defaults.js +++ b/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, diff --git a/js/loader.js b/js/loader.js index dac0b5f5..b6db8386 100644 --- a/js/loader.js +++ b/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]}`); } diff --git a/package.json b/package.json index e383d986..2510ea87 100644 --- a/package.json +++ b/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", diff --git a/tests/e2e/helpers/global-setup.js b/tests/e2e/helpers/global-setup.js index ee1a3818..8bbb810b 100644 --- a/tests/e2e/helpers/global-setup.js +++ b/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;",