Lookup themes dynamically

package-lock.json

@@ -102,6 +102,7 @@
         "eslint-plugin-react-hooks": "5.2.0",
         "eslint-plugin-sonarjs": "3.0.2",
         "expose-loader": "5.0.1",
+        "fast-glob": "3.3.3",
         "fork-ts-checker-webpack-plugin": "9.0.2",
         "globals": "16.0.0",
         "html-loader": "5.1.0",
@@ -11384,7 +11385,6 @@
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
       "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",

package.json

@@ -42,6 +42,7 @@
     "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-sonarjs": "3.0.2",
     "expose-loader": "5.0.1",
+    "fast-glob": "3.3.3",
     "fork-ts-checker-webpack-plugin": "9.0.2",
     "globals": "16.0.0",
     "html-loader": "5.1.0",

webpack.common.js

@@ -1,3 +1,4 @@
+const fg = require('fast-glob');
 const path = require('path');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
@@ -33,9 +34,19 @@ try {
 
 const NODE_MODULES_REGEX = /[\\/]node_modules[\\/]/;
 
+const THEMES = fg.globSync('themes/**/*.scss', { cwd: path.resolve(__dirname, 'src') });
+const THEMES_BY_ID = THEMES.reduce((acc, theme) => {
+    acc[theme.substring(0, theme.lastIndexOf('/'))] = `./${theme}`;
+    return acc;
+}, {});
+
 const config = {
     context: path.resolve(__dirname, 'src'),
     target: 'browserslist',
+    entry: {
+        'main.jellyfin': './index.jsx',
+        ...THEMES_BY_ID
+    },
     resolve: {
         extensions: ['.tsx', '.ts', '.js'],
         modules: [

webpack.dev.js

@@ -1,26 +1,11 @@
-const common = require('./webpack.common');
 const { merge } = require('webpack-merge');
 
-const THEMES = [
-    'appletv',
-    'blueradiance',
-    'dark',
-    'light',
-    'purplehaze',
-    'wmc'
-];
+const common = require('./webpack.common');
 
 module.exports = merge(common, {
     // In order for live reload to work we must use "web" as the target not "browserslist"
     target: process.env.WEBPACK_SERVE ? 'web' : 'browserslist',
     mode: 'development',
-    entry: {
-        'main.jellyfin': './index.jsx',
-        ...THEMES.reduce((acc, theme) => {
-            acc[`themes/${theme}`] = `./themes/${theme}/theme.scss`;
-            return acc;
-        }, {})
-    },
     devtool: 'eval-cheap-module-source-map',
     module: {
         rules: [

webpack.prod.js

@@ -1,23 +1,11 @@
-const common = require('./webpack.common');
 const { merge } = require('webpack-merge');
 
-const THEMES = [
-    'appletv',
-    'blueradiance',
-    'dark',
-    'light',
-    'purplehaze',
-    'wmc'
-];
+const common = require('./webpack.common');
 
 module.exports = merge(common, {
     mode: 'production',
     entry: {
-        'main.jellyfin': './index.jsx',
-        'serviceworker': './serviceworker.js',
-        ...THEMES.reduce((acc, theme) => {
-            acc[`themes/${theme}`] = `./themes/${theme}/theme.scss`;
-            return acc;
-        }, {})
+        ...common.entry,
+        'serviceworker': './serviceworker.js'
     }
 });