perf: extract css

Signed-off-by: Richard Steinmetz <[email protected]>

.gitignore

@@ -14,6 +14,7 @@ tests/clover*.xml
 node_modules/
 
 /js
+/css
 
 # packaged app
 build/artifacts

package.json

@@ -126,6 +126,7 @@
     "jest-serializer-vue": "^3.1.0",
     "jest-transform-stub": "^2.0.0",
     "jest-watch-typeahead": "^2.2.2",
+    "mini-css-extract-plugin": "^2.8.0",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "postcss": "^8.4.31",
     "postcss-loader": "^4.3.0",

src/html-response.js

@@ -21,7 +21,7 @@
  */
 
 // injected styles
-import '../css/html-response.css'
+import './css/html-response.css'
 
 // iframe-resizer client script
 import 'iframe-resizer/js/iframeResizer.contentWindow.js'

src/views/Home.vue

@@ -17,8 +17,8 @@
 import { NcContent } from '@nextcloud/vue'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
 
-import '../../css/mail.scss'
-import '../../css/mobile.scss'
+import '../css/mail.scss'
+import '../css/mobile.scss'
 
 import { testAccountConnection } from '../service/AccountService.js'
 import logger from '../logger.js'

templates/index.php

@@ -24,6 +24,7 @@
  *
  */
 script('mail', 'mail');
+style('mail', 'mail');
 ?>
 
 <input type="hidden" id="attachment-size-limit" value="<?php p($_['attachment-size-limit']); ?>">

templates/oauth_done.php

@@ -24,6 +24,7 @@
  */
 
 script(\OCA\Mail\AppInfo\Application::APP_ID, 'oauthpopup');
+style('mail', 'oauthpopup');
 
 ?>
 

templates/settings-admin.php

@@ -22,6 +22,7 @@
  */
 
 script(\OCA\Mail\AppInfo\Application::APP_ID, 'settings');
+style('mail', 'settings');
 
 ?>
 <div id="mail-admin-settings">

webpack.common.js

@@ -1,9 +1,30 @@
 const path = require('path')
+const fs = require('fs/promises')
+const { existsSync } = require('fs')
 const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin')
 const { styles } = require('@ckeditor/ckeditor5-dev-utils')
 const { VueLoaderPlugin } = require('vue-loader')
 const BabelLoaderExcludeNodeModulesExcept = require('babel-loader-exclude-node-modules-except')
 const { ProvidePlugin } = require('webpack')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+const CleanCssPlugin = {
+	apply(compiler) {
+		compiler.hooks.emit.tapAsync('CleanCss', async (compilation, callback) => {
+			const directory = path.join(__dirname, 'css')
+			if (!existsSync(directory)) {
+				callback()
+				return
+			}
+
+			for (const file of await fs.readdir(directory)) {
+				await fs.unlink(path.join(directory, file))
+			}
+
+			callback()
+		})
+	},
+}
 
 function getPostCssConfig(ckEditorOpts) {
 	// CKEditor is not compatbile with postcss@8 and postcss-loader@4 despite stating so.
@@ -13,6 +34,10 @@ function getPostCssConfig(ckEditorOpts) {
 };
 
 const plugins = [
+	new MiniCssExtractPlugin({
+		filename: '../css/[name].css',
+		chunkFilename: '../css/mail.[name].[contenthash].css',
+	}),
 	// CKEditor needs its own plugin to be built using webpack.
 	new CKEditorWebpackPlugin({
 		// See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
@@ -25,6 +50,7 @@ const plugins = [
 		// Thanks to https://stackoverflow.com/a/65018686/14239942
 		process: 'process/browser.js',
 	}),
+	CleanCssPlugin,
 ]
 
 module.exports = {
@@ -45,11 +71,11 @@ module.exports = {
 		rules: [
 			{
 				test: /\.css$/,
-				use: ['style-loader', 'css-loader'],
+				use: [MiniCssExtractPlugin.loader, 'css-loader'],
 			},
 			{
 				test: /\.scss$/,
-				use: ['style-loader', 'css-loader', 'sass-loader'],
+				use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
 			},
 			{
 				test: /\.vue$/,