Update webpack config to build sass themes

webpack.common.js

@@ -60,13 +60,14 @@ const config = {
             filename: 'index.html',
             template: 'index.html',
             // Append file hashes to bundle urls for cache busting
-            hash: true
+            hash: true,
+            chunks: [
+                'main.jellyfin',
+                'serviceworker'
+            ]
         }),
         new CopyPlugin({
             patterns: [
-                {
-                    from: 'themes/**/*.{css,jpg}'
-                },
                 {
                     from: 'assets/**',
                     globOptions: {
@@ -107,6 +108,15 @@ const config = {
             typescript: {
                 configFile: path.resolve(__dirname, 'tsconfig.json')
             }
+        }),
+        new MiniCssExtractPlugin({
+            filename: pathData => {
+                if (pathData.chunk?.name?.startsWith('themes/')) {
+                    return '[name]/theme.css';
+                }
+                return '[name].[contenthash].css';
+            },
+            chunkFilename: '[name].[contenthash].css'
         })
     ],
     output: {
@@ -288,33 +298,41 @@ const config = {
                 }]
             },
             {
-                test: /\.s[ac]ss$/i,
+                test: /\.(sa|sc|c)ss$/i,
-                use: [
+                oneOf: [
-                    DEV_MODE ? 'style-loader' : MiniCssExtractPlugin.loader,
-                    'css-loader',
                     {
-                        loader: 'postcss-loader',
+                        // Themes always need to use the MiniCssExtractPlugin since they are loaded directly
-                        options: {
+                        include: [
-                            postcssOptions: {
+                            path.resolve(__dirname, 'src/themes/')
-                                config: path.resolve(__dirname, 'postcss.config.js')
+                        ],
-                            }
+                        use: [
-                        }
+                            MiniCssExtractPlugin.loader,
+                            'css-loader',
+                            {
+                                loader: 'postcss-loader',
+                                options: {
+                                    postcssOptions: {
+                                        config: path.resolve(__dirname, 'postcss.config.js')
+                                    }
+                                }
+                            },
+                            'sass-loader'
+                        ]
                     },
-                    'sass-loader'
-                ]
-            },
-            {
-                test: /\.css$/i,
-                use: [
-                    DEV_MODE ? 'style-loader' : MiniCssExtractPlugin.loader,
-                    'css-loader',
                     {
-                        loader: 'postcss-loader',
+                        use: [
-                        options: {
+                            DEV_MODE ? 'style-loader' : MiniCssExtractPlugin.loader,
-                            postcssOptions: {
+                            'css-loader',
-                                config: path.resolve(__dirname, 'postcss.config.js')
+                            {
-                            }
+                                loader: 'postcss-loader',
-                        }
+                                options: {
+                                    postcssOptions: {
+                                        config: path.resolve(__dirname, 'postcss.config.js')
+                                    }
+                                }
+                            },
+                            'sass-loader'
+                        ]
                     }
                 ]
             },
@@ -341,10 +359,4 @@ const config = {
     }
 };
 
-if (!DEV_MODE) {
-    config.plugins.push(new MiniCssExtractPlugin({
-        filename: '[name].[contenthash].css'
-    }));
-}
-
 module.exports = config;

webpack.dev.js

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