build: extract CSS

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

lib/Deck/DeckPluginLoader.php

@@ -36,7 +36,9 @@ class DeckPluginLoader implements IEventListener {
 
 		if (str_starts_with($this->request->getPathInfo(), '/apps/deck')) {
 			Util::addScript('spreed', 'talk-collections');
+
 			Util::addScript('spreed', 'talk-deck');
+			Util::addStyle('spreed', 'talk-deck');
 		}
 	}
 }

lib/Files/TemplateLoader.php

@@ -80,6 +80,7 @@ class TemplateLoader implements IEventListener {
 		Util::addStyle(Application::APP_ID, 'icons');
 		if (!str_starts_with($this->request->getPathInfo(), '/apps/maps')) {
 			Util::addScript(Application::APP_ID, 'talk-files-sidebar');
+			Util::addStyle(Application::APP_ID, 'talk-files-sidebar');
 		}
 
 		if ($user instanceof IUser) {

lib/Flow/RegisterOperationsListener.php

@@ -32,5 +32,6 @@ class RegisterOperationsListener implements IEventListener {
 
 		$event->registerOperation($this->operation);
 		Util::addScript('spreed', 'talk-flow');
+		Util::addStyle('spreed', 'talk-flow');
 	}
 }

lib/Maps/MapsPluginLoader.php

@@ -47,6 +47,7 @@ class MapsPluginLoader implements IEventListener {
 		if (str_starts_with($this->request->getPathInfo(), '/apps/maps')) {
 			Util::addScript('spreed', 'talk-collections');
 			Util::addScript('spreed', 'talk-maps');
+			Util::addStyle('spreed', 'talk-maps');
 		}
 	}
 }

lib/PublicShare/TemplateLoader.php

@@ -76,6 +76,7 @@ class TemplateLoader implements IEventListener {
 
 		Util::addStyle(Application::APP_ID, 'icons');
 		Util::addScript(Application::APP_ID, 'talk-public-share-sidebar');
+		Util::addStyle(Application::APP_ID, 'talk-public-share-sidebar');
 
 		$this->publishInitialStateForGuest();
 	}

lib/PublicShareAuth/TemplateLoader.php

@@ -72,6 +72,7 @@ class TemplateLoader implements IEventListener {
 		Util::addStyle(Application::APP_ID, 'icons');
 		Util::addStyle(Application::APP_ID, 'publicshareauth');
 		Util::addScript(Application::APP_ID, 'talk-public-share-auth-sidebar');
+		Util::addStyle(Application::APP_ID, 'talk-public-share-auth-sidebar');
 
 		$this->publishInitialStateForGuest();
 	}

lib/Search/UnifiedSearchCSSLoader.php

@@ -26,6 +26,7 @@ class UnifiedSearchCSSLoader implements IEventListener {
 
 		if ($event->isLoggedIn()) {
 			Util::addStyle(Application::APP_ID, 'unified-search');
+			Util::addStyle(Application::APP_ID, 'talk-search');
 		}
 	}
 }

lib/Settings/Admin/AdminSettings.php

@@ -66,6 +66,7 @@ class AdminSettings implements ISettings {
 
 		Util::addStyle('spreed', 'admin-settings');
 		Util::addScript('spreed', 'talk-admin-settings');
+		Util::addStyle('spreed', 'talk-admin-settings');
 
 		return new TemplateResponse('spreed', 'settings/admin-settings', [], '');
 	}

templates/index.php

@@ -7,4 +7,5 @@ declare(strict_types=1);
  */
 
 \OCP\Util::addScript('spreed', 'talk-main');
+\OCP\Util::addStyle('spreed', 'talk-main');
 style('spreed', 'icons');

templates/recording.php

@@ -7,4 +7,5 @@ declare(strict_types=1);
  */
 
 \OCP\Util::addScript('spreed', 'talk-recording');
+\OCP\Util::addStyle('spreed', 'talk-recording');
 style('spreed', 'icons');

webpack.common.config.js

@@ -1,10 +1,11 @@
-/**
+/*
  * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
 const nextcloudWebpackRules = require('@nextcloud/webpack-vue-config/rules')
 const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const { mergeWithRules } = require('webpack-merge')
 
 // Replace rules with the same modules
@@ -20,13 +21,21 @@ module.exports = mergeWithRules({
 })(
 	{
 		module: {
-		// Reuse @nextcloud/webpack-vue-config/rules
+			// Reuse @nextcloud/webpack-vue-config/rules
 			rules: Object.values(nextcloudWebpackRules),
 		},
 	},
 	{
 		module: {
 			rules: [
+				{
+					test: /\.css$/,
+					use: [MiniCssExtractPlugin.loader, 'css-loader'],
+				},
+				{
+					test: /\.scss$/,
+					use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+				},
 				{
 					test: /\.js$/,
 					loader: 'esbuild-loader',

webpack.config.js

@@ -1,9 +1,11 @@
-const nextcloudWebpackConfig = require('@nextcloud/webpack-vue-config')
+/*
-const { EsbuildPlugin } = require('esbuild-loader')
-/**
  * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
+
+const nextcloudWebpackConfig = require('@nextcloud/webpack-vue-config')
+const { EsbuildPlugin } = require('esbuild-loader')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const path = require('node:path')
 const webpack = require('webpack')
 const { mergeWithRules } = require('webpack-merge')
@@ -56,6 +58,11 @@ module.exports = mergeWithRules({
 
 	plugins: [
 		new webpack.DefinePlugin({ IS_DESKTOP: false }),
+		new MiniCssExtractPlugin({
+			filename: '../css/talk-[name].css',
+			chunkFilename: '../css/chunks/[id].chunk.css',
+			ignoreOrder: true,
+		}),
 	],
 
 	cache: true,