Merge pull request #2486 from nextcloud/fix/load-viewer-init

fix: Make loading the viewer an init script

composer.json

@@ -4,7 +4,7 @@
 		"optimize-autoloader": true,
 		"classmap-authoritative": true,
 		"platform": {
-			"php": "8.0"
+			"php": "8.1"
 		}
 	},
 	"scripts": {
@@ -17,9 +17,9 @@
 		"psalm:fix": "psalm --alter --issues=InvalidReturnType,InvalidNullableReturnType,MissingParamType,InvalidFalsableReturnType"
 	},
 	"require-dev": {
-		"nextcloud/coding-standard": "^1.0.0",
+		"nextcloud/coding-standard": "^1.2.0",
 		"phpunit/phpunit": "^9",
-		"vimeo/psalm": "^5.15.0",
+		"vimeo/psalm": "^5.25.0",
 		"nextcloud/ocp": "dev-master"
 	}
 }

css/NcActionButton-1r3w9zkv.chunk.css

@@ -0,0 +1 @@
+.material-design-icon[data-v-dba65098]{display:flex;align-self:center;justify-self:center;align-items:center;justify-content:center}li.action.active[data-v-dba65098]{background-color:var(--color-background-hover);border-radius:6px;padding:0}.action--disabled[data-v-dba65098]{pointer-events:none;opacity:.5}.action--disabled[data-v-dba65098]:hover,.action--disabled[data-v-dba65098]:focus{cursor:default;opacity:.5}.action--disabled *[data-v-dba65098]{opacity:1!important}.action-button[data-v-dba65098]{display:flex;align-items:flex-start;width:100%;height:auto;margin:0;padding:0;padding-right:calc((var(--default-clickable-area) - 16px) / 2);box-sizing:border-box;cursor:pointer;white-space:nowrap;color:var(--color-main-text);border:0;border-radius:0;background-color:transparent;box-shadow:none;font-weight:400;font-size:var(--default-font-size);line-height:var(--default-clickable-area)}.action-button>span[data-v-dba65098]{cursor:pointer;white-space:nowrap}.action-button__icon[data-v-dba65098]{width:var(--default-clickable-area);height:var(--default-clickable-area);opacity:1;background-position:calc((var(--default-clickable-area) - 16px) / 2) center;background-size:16px;background-repeat:no-repeat}.action-button[data-v-dba65098] .material-design-icon{width:var(--default-clickable-area);height:var(--default-clickable-area);opacity:1}.action-button[data-v-dba65098] .material-design-icon .material-design-icon__svg{vertical-align:middle}.action-button__longtext-wrapper[data-v-dba65098],.action-button__longtext[data-v-dba65098]{max-width:220px;line-height:1.6em;padding:calc((var(--default-clickable-area) - 1.6em) / 2) 0;cursor:pointer;text-align:left;overflow:hidden;text-overflow:ellipsis}.action-button__longtext[data-v-dba65098]{cursor:pointer;white-space:pre-wrap!important}.action-button__name[data-v-dba65098]{font-weight:700;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:100%;display:inline-block}.action-button__menu-icon[data-v-dba65098],.action-button__pressed-icon[data-v-dba65098]{margin-left:auto;margin-right:calc((var(--default-clickable-area) - 16px) / 2 * -1)}

css/NcActionLink-CRpLQTQ1.chunk.css

@@ -0,0 +1 @@
+.material-design-icon[data-v-30c015f0]{display:flex;align-self:center;justify-self:center;align-items:center;justify-content:center}li.action.active[data-v-30c015f0]{background-color:var(--color-background-hover);border-radius:6px;padding:0}.action-link[data-v-30c015f0]{display:flex;align-items:flex-start;width:100%;height:auto;margin:0;padding:0;padding-right:calc((var(--default-clickable-area) - 16px) / 2);box-sizing:border-box;cursor:pointer;white-space:nowrap;color:var(--color-main-text);border:0;border-radius:0;background-color:transparent;box-shadow:none;font-weight:400;font-size:var(--default-font-size);line-height:var(--default-clickable-area)}.action-link>span[data-v-30c015f0]{cursor:pointer;white-space:nowrap}.action-link__icon[data-v-30c015f0]{width:var(--default-clickable-area);height:var(--default-clickable-area);opacity:1;background-position:calc((var(--default-clickable-area) - 16px) / 2) center;background-size:16px;background-repeat:no-repeat}.action-link[data-v-30c015f0] .material-design-icon{width:var(--default-clickable-area);height:var(--default-clickable-area);opacity:1}.action-link[data-v-30c015f0] .material-design-icon .material-design-icon__svg{vertical-align:middle}.action-link__longtext-wrapper[data-v-30c015f0],.action-link__longtext[data-v-30c015f0]{max-width:220px;line-height:1.6em;padding:calc((var(--default-clickable-area) - 1.6em) / 2) 0;cursor:pointer;text-align:left;overflow:hidden;text-overflow:ellipsis}.action-link__longtext[data-v-30c015f0]{cursor:pointer;white-space:pre-wrap!important}.action-link__name[data-v-30c015f0]{font-weight:700;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:100%;display:inline-block}.action-link__menu-icon[data-v-30c015f0]{margin-left:auto;margin-right:calc((var(--default-clickable-area) - 16px) / 2 * -1)}

css/viewer-init.css

@@ -0,0 +1,5 @@
+/* extracted by css-entry-points-plugin */
+@import './init-DVBqS-jx.chunk.css';
+@import './logger-B0wUvUiR.chunk.css';
+@import './NcActionButton-1r3w9zkv.chunk.css';
+@import './NcActionLink-CRpLQTQ1.chunk.css';

css/viewer-main.css

@@ -1,2 +1,3 @@
 /* extracted by css-entry-points-plugin */
-@import './main-DXSti9TM.chunk.css';
+@import './main-D7IKD3sM.chunk.css';
+@import './logger-B0wUvUiR.chunk.css';

js/NcActionButton-CERbxSls.chunk.mjs

@@ -0,0 +1,2 @@
+/*! third party licenses: js/vendor.LICENSE.txt */
+import{B as i,bf as a}from"./logger-BoDbe_I6.chunk.mjs";import{A as n}from"./actionText-fFcUPi2g-1UIVDoW6.chunk.mjs";const o={name:"CheckIcon",emits:["click"],props:{title:{type:String},fillColor:{type:String,default:"currentColor"},size:{type:Number,default:24}}};var l=function(){var t=this,e=t._self._c;return e("span",t._b({staticClass:"material-design-icon check-icon",attrs:{"aria-hidden":t.title?null:!0,"aria-label":t.title,role:"img"},on:{click:function(s){return t.$emit("click",s)}}},"span",t.$attrs,!1),[e("svg",{staticClass:"material-design-icon__svg",attrs:{fill:t.fillColor,width:t.size,height:t.size,viewBox:"0 0 24 24"}},[e("path",{attrs:{d:"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"}},[t.title?e("title",[t._v(t._s(t.title))]):t._e()])])])},c=[],u=i(o,l,c,!1,null,null);const r=u.exports,d={name:"NcActionButton",components:{CheckIcon:r,ChevronRightIcon:a},mixins:[n],inject:{isInSemanticMenu:{from:"NcActions:isSemanticMenu",default:!1}},props:{ariaHidden:{type:Boolean,default:null},disabled:{type:Boolean,default:!1},isMenu:{type:Boolean,default:!1},type:{type:String,default:"button",validator:t=>["button","checkbox","radio","reset","submit"].includes(t)},modelValue:{type:[Boolean,String],default:null},value:{type:String,default:null}},computed:{isFocusable(){return!this.disabled},isChecked(){return this.type==="radio"&&typeof this.modelValue!="boolean"?this.modelValue===this.value:this.modelValue},nativeType(){return this.type==="submit"||this.type==="reset"?this.type:"button"},buttonAttributes(){const t={};return this.isInSemanticMenu?(t.role="menuitem",this.type==="radio"?(t.role="menuitemradio",t["aria-checked"]=this.isChecked?"true":"false"):(this.type==="checkbox"||this.nativeType==="button"&&this.modelValue!==null)&&(t.role="menuitemcheckbox",t["aria-checked"]=this.modelValue===null?"mixed":this.modelValue?"true":"false")):this.modelValue!==null&&this.nativeType==="button"&&(t["aria-pressed"]=this.modelValue?"true":"false"),t}},methods:{handleClick(t){this.onClick(t),(this.modelValue!==null||this.type!=="button")&&(this.type==="radio"?typeof this.modelValue!="boolean"?this.isChecked||this.$emit("update:modelValue",this.value):this.$emit("update:modelValue",!this.isChecked):this.$emit("update:modelValue",!this.isChecked))}}};var h=function(){var t=this,e=t._self._c;return e("li",{staticClass:"action",class:{"action--disabled":t.disabled},attrs:{role:t.isInSemanticMenu&&"presentation"}},[e("button",t._b({class:["action-button button-vue",{"action-button--active":t.isChecked,focusable:t.isFocusable}],attrs:{"aria-label":t.ariaLabel,disabled:t.disabled,title:t.title,type:t.nativeType},on:{click:t.handleClick}},"button",t.buttonAttributes,!1),[t._t("icon",function(){return[e("span",{staticClass:"action-button__icon",class:[t.isIconUrl?"action-button__icon--url":t.icon],style:{backgroundImage:t.isIconUrl?"url(".concat(t.icon,")"):null},attrs:{"aria-hidden":"true"}})]}),t.name?e("span",{staticClass:"action-button__longtext-wrapper"},[e("strong",{staticClass:"action-button__name"},[t._v(" "+t._s(t.name)+" ")]),e("br"),e("span",{staticClass:"action-button__longtext",domProps:{textContent:t._s(t.text)}})]):t.isLongText?e("span",{staticClass:"action-button__longtext",domProps:{textContent:t._s(t.text)}}):e("span",{staticClass:"action-button__text"},[t._v(t._s(t.text))]),t.isMenu?e("ChevronRightIcon",{staticClass:"action-button__menu-icon",attrs:{size:20}}):t.isChecked===!0?e("CheckIcon",{staticClass:"action-button__pressed-icon",attrs:{size:20}}):t.isChecked===!1?e("span",{staticClass:"action-button__pressed-icon material-design-icon"}):t._e(),t._e()],2)])},p=[],m=i(d,h,p,!1,null,"dba65098");const b=m.exports,f=Object.freeze(Object.defineProperty({__proto__:null,default:b},Symbol.toStringTag,{value:"Module"}));export{r as C,b as N,f as a};

js/NcActionLink-CCIg7RmX.chunk.mjs

@@ -0,0 +1,2 @@
+/*! third party licenses: js/vendor.LICENSE.txt */
+import{A as a}from"./actionText-fFcUPi2g-1UIVDoW6.chunk.mjs";import{B as e}from"./logger-BoDbe_I6.chunk.mjs";const i={name:"NcActionLink",mixins:[a],inject:{isInSemanticMenu:{from:"NcActions:isSemanticMenu",default:!1}},props:{href:{type:String,default:"#",required:!0,validator:t=>{try{return new URL(t)}catch{return t.startsWith("#")||t.startsWith("/")}}},download:{type:String,default:null},target:{type:String,default:"_self",validator:t=>t&&(!t.startsWith("_")||["_blank","_self","_parent","_top"].indexOf(t)>-1)},title:{type:String,default:null},ariaHidden:{type:Boolean,default:null}}};var s=function(){var t=this,n=t._self._c;return n("li",{staticClass:"action",attrs:{role:t.isInSemanticMenu&&"presentation"}},[n("a",{staticClass:"action-link focusable",attrs:{download:t.download,href:t.href,"aria-label":t.ariaLabel,target:t.target,title:t.title,rel:"nofollow noreferrer noopener",role:t.isInSemanticMenu&&"menuitem"},on:{click:t.onClick}},[t._t("icon",function(){return[n("span",{staticClass:"action-link__icon",class:[t.isIconUrl?"action-link__icon--url":t.icon],style:{backgroundImage:t.isIconUrl?"url(".concat(t.icon,")"):null},attrs:{"aria-hidden":"true"}})]}),t.name?n("span",{staticClass:"action-link__longtext-wrapper"},[n("strong",{staticClass:"action-link__name"},[t._v(" "+t._s(t.name)+" ")]),n("br"),n("span",{staticClass:"action-link__longtext",domProps:{textContent:t._s(t.text)}})]):t.isLongText?n("span",{staticClass:"action-link__longtext",domProps:{textContent:t._s(t.text)}}):n("span",{staticClass:"action-link__text"},[t._v(t._s(t.text))]),t._e()],2)])},l=[],o=e(i,s,l,!1,null,"30c015f0");const _=o.exports;export{_ as default};

js/actionText-fFcUPi2g-1UIVDoW6.chunk.mjs

@@ -0,0 +1,2 @@
+/*! third party licenses: js/vendor.LICENSE.txt */
+const n={beforeUpdate(){this.text=this.getText()},data(){return{text:this.getText()}},computed:{isLongText(){return this.text&&this.text.trim().length>20}},methods:{getText(){return this.$slots.default?this.$slots.default[0].text.trim():""}}},o=function(i,t){let e=i.$parent;for(;e;){if(e.$options.name===t)return e;e=e.$parent}},s={mixins:[n],props:{icon:{type:String,default:""},name:{type:String,default:""},title:{type:String,default:""},closeAfterClick:{type:Boolean,default:!1},ariaLabel:{type:String,default:null},ariaHidden:{type:Boolean,default:null}},emits:["click"],computed:{isIconUrl(){try{return!!new URL(this.icon,this.icon.startsWith("/")?window.location.origin:void 0)}catch{return!1}}},methods:{onClick(i){if(this.$emit("click",i),this.closeAfterClick){const t=o(this,"NcActions");t&&t.closeMenu&&t.closeMenu(!1)}}}};export{s as A,n as a};

js/actionText-fFcUPi2g-1UIVDoW6.chunk.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"actionText-fFcUPi2g-1UIVDoW6.chunk.mjs","sources":["../node_modules/@nextcloud/vue/dist/chunks/actionGlobal-DqVa7c7G.mjs","../node_modules/@nextcloud/vue/dist/chunks/actionText-fFcUPi2g.mjs"],"sourcesContent":["const ActionGlobalMixin = {\n  beforeUpdate() {\n    this.text = this.getText();\n  },\n  data() {\n    return {\n      // $slots are not reactive.\n      // We need to update  the content manually\n      text: this.getText()\n    };\n  },\n  computed: {\n    isLongText() {\n      return this.text && this.text.trim().length > 20;\n    }\n  },\n  methods: {\n    getText() {\n      return this.$slots.default ? this.$slots.default[0].text.trim() : \"\";\n    }\n  }\n};\nexport {\n  ActionGlobalMixin as A\n};\n","import { A as ActionGlobalMixin } from \"./actionGlobal-DqVa7c7G.mjs\";\nconst GetParent = function(context, name) {\n  let parent = context.$parent;\n  while (parent) {\n    if (parent.$options.name === name) {\n      return parent;\n    }\n    parent = parent.$parent;\n  }\n};\nconst ActionTextMixin = {\n  mixins: [ActionGlobalMixin],\n  props: {\n    /**\n     * Icon to show with the action, can be either a CSS class or an URL\n     */\n    icon: {\n      type: String,\n      default: \"\"\n    },\n    /**\n     * The main text content of the entry.\n     */\n    name: {\n      type: String,\n      default: \"\"\n    },\n    /**\n     * The title attribute of the element.\n     */\n    title: {\n      type: String,\n      default: \"\"\n    },\n    /**\n     * Whether we close the Actions menu after the click\n     */\n    closeAfterClick: {\n      type: Boolean,\n      default: false\n    },\n    /**\n     * Aria label for the button. Not needed if the button has text.\n     */\n    ariaLabel: {\n      type: String,\n      default: null\n    },\n    /**\n     * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.\n     * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,\n     * otherwise root element will inherit incorrect aria-hidden.\n     */\n    ariaHidden: {\n      type: Boolean,\n      default: null\n    }\n  },\n  emits: [\n    \"click\"\n  ],\n  computed: {\n    /**\n     * Check if icon prop is an URL\n     * @return {boolean} Whether the icon prop is an URL\n     */\n    isIconUrl() {\n      try {\n        return !!new URL(this.icon, this.icon.startsWith(\"/\") ? window.location.origin : void 0);\n      } catch (error) {\n        return false;\n      }\n    }\n  },\n  methods: {\n    onClick(event) {\n      this.$emit(\"click\", event);\n      if (this.closeAfterClick) {\n        const parent = GetParent(this, \"NcActions\");\n        if (parent && parent.closeMenu) {\n          parent.closeMenu(false);\n        }\n      }\n    }\n  }\n};\nexport {\n  ActionTextMixin as A\n};\n"],"names":["ActionGlobalMixin","GetParent","context","name","parent","ActionTextMixin","event"],"mappings":";MAAMA,EAAoB,CACxB,cAAe,CACb,KAAK,KAAO,KAAK,SAClB,EACD,MAAO,CACL,MAAO,CAGL,KAAM,KAAK,QAAS,CAC1B,CACG,EACD,SAAU,CACR,YAAa,CACX,OAAO,KAAK,MAAQ,KAAK,KAAK,KAAM,EAAC,OAAS,EAC/C,CACF,EACD,QAAS,CACP,SAAU,CACR,OAAO,KAAK,OAAO,QAAU,KAAK,OAAO,QAAQ,CAAC,EAAE,KAAK,KAAI,EAAK,EACnE,CACF,CACH,ECpBMC,EAAY,SAASC,EAASC,EAAM,CACxC,IAAIC,EAASF,EAAQ,QACrB,KAAOE,GAAQ,CACb,GAAIA,EAAO,SAAS,OAASD,EAC3B,OAAOC,EAETA,EAASA,EAAO,OACjB,CACH,EACMC,EAAkB,CACtB,OAAQ,CAACL,CAAiB,EAC1B,MAAO,CAIL,KAAM,CACJ,KAAM,OACN,QAAS,EACV,EAID,KAAM,CACJ,KAAM,OACN,QAAS,EACV,EAID,MAAO,CACL,KAAM,OACN,QAAS,EACV,EAID,gBAAiB,CACf,KAAM,QACN,QAAS,EACV,EAID,UAAW,CACT,KAAM,OACN,QAAS,IACV,EAMD,WAAY,CACV,KAAM,QACN,QAAS,IACV,CACF,EACD,MAAO,CACL,OACD,EACD,SAAU,CAKR,WAAY,CACV,GAAI,CACF,MAAO,CAAC,CAAC,IAAI,IAAI,KAAK,KAAM,KAAK,KAAK,WAAW,GAAG,EAAI,OAAO,SAAS,OAAS,MAAM,CACxF,MAAe,CACd,MAAO,EACR,CACF,CACF,EACD,QAAS,CACP,QAAQM,EAAO,CAEb,GADA,KAAK,MAAM,QAASA,CAAK,EACrB,KAAK,gBAAiB,CACxB,MAAMF,EAASH,EAAU,KAAM,WAAW,EACtCG,GAAUA,EAAO,WACnBA,EAAO,UAAU,EAAK,CAEzB,CACF,CACF,CACH","x_google_ignoreList":[0,1]}

lib/Listener/LoadViewerScript.php

@@ -54,7 +54,9 @@ class LoadViewerScript implements IEventListener {
 			return;
 		}
 
+		Util::addStyle(Application::APP_ID, 'viewer-init');
 		Util::addStyle(Application::APP_ID, 'viewer-main');
+		Util::addInitScript(Application::APP_ID, 'viewer-init');
 		Util::addScript(Application::APP_ID, 'viewer-main', 'files');
 		$this->initialStateService->provideInitialState('enabled_preview_providers', array_keys($this->previewManager->getProviders()));
 	}

src/global.d.ts

@@ -13,6 +13,8 @@ declare global {
 		}
 		OCP: Nextcloud.v29.OCP
 	}
+
+	const appVersion: string
 }
 
 export {}

src/init.ts

@@ -0,0 +1,14 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { registerViewerAction } from './files_actions/viewerAction'
+import ViewerService from './services/Viewer.js'
+
+// Register the files action
+registerViewerAction()
+
+// Init Viewer Service
+window.OCA = window.OCA ?? {}
+window.OCA.Viewer = new ViewerService()
+window.OCA.Viewer.version = appVersion

src/main.js

@@ -23,7 +23,6 @@ import { translate as t } from '@nextcloud/l10n'
 import Vue from 'vue'
 
 import ViewerComponent from './views/Viewer.vue'
-import ViewerService from './services/Viewer.js'
 
 Vue.mixin({
 	methods: {
@@ -34,12 +33,6 @@ Vue.mixin({
 Vue.prototype.OC = window.OC
 Vue.prototype.OCA = window.OCA
 
-// Init Viewer Service
-if (window.OCA) {
-	Object.assign(window.OCA, { Viewer: new ViewerService() })
-	window.OCA.Viewer.version = appVersion
-}
-
 // Create document root
 const ViewerRoot = document.createElement('div')
 ViewerRoot.id = 'viewer'

src/services/Viewer.js

@@ -23,6 +23,7 @@
 import Images from '../models/images.js'
 import Videos from '../models/videos.js'
 import Audios from '../models/audios.js'
+import logger from './logger.js'
 
 /**
  * Handler type definition
@@ -78,7 +79,7 @@ export default class Viewer {
 		this.registerHandler(Videos)
 		this.registerHandler(Audios)
 
-		console.debug('OCA.Viewer initialized')
+		logger.debug('OCA.Viewer initialized')
 	}
 
 	/**
@@ -99,9 +100,9 @@ export default class Viewer {
 	 * @param {Handler} handler a new unregistered handler
 	 */
 	registerHandler(handler) {
-		const err = this.validateHandler(handler)
-		if (err) {
-			console.error(err, handler)
+		const error = this.validateHandler(handler)
+		if (error) {
+			logger.error('Could not register handler', { error, handler })
 			return
 		}
 

src/views/Viewer.vue

@@ -202,7 +202,6 @@ import isFullscreen from '@nextcloud/vue/dist/Mixins/isFullscreen.js'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
 
 import { extractFilePaths, sortCompare } from '../utils/fileUtils.ts'
-import { registerViewerAction } from '../files_actions/viewerAction.ts'
 import getSortingConfig from '../services/FileSortingConfig.ts'
 import canDownload from '../utils/canDownload.js'
 import cancelableRequest from '../utils/CancelableRequest.js'
@@ -285,8 +284,7 @@ export default {
 			isSidebarShown: false,
 			isFullscreenMode: false,
 			canSwipe: true,
-			// TODO: remove OCA?.Files?.fileActions when public Files is Vue
-			isStandalone: OCP?.Files === undefined && OCA?.Files?.fileActions === undefined,
+			isStandalone: false,
 			theme: null,
 			root: davRemoteURL,
 			handlerId: '',
@@ -519,6 +517,11 @@ export default {
 	},
 
 	beforeMount() {
+		this.isStandalone = window.OCP?.Files === undefined
+		if (this.isStandalone) {
+			logger.info('No OCP.Files app found, viewer is now in standalone mode')
+		}
+
 		// register on load
 		document.addEventListener('DOMContentLoaded', () => {
 			// register all primary components mimes
@@ -538,16 +541,10 @@ export default {
 				this.Sidebar = OCA.Files.Sidebar.state
 			}
 
-			this.registerFileActions()
-
 			logger.info(`${this.handlers.length} viewer handlers registered`, { handlers: this.handlers })
 		})
 
 		window.addEventListener('resize', this.onResize)
-
-		if (this.isStandalone) {
-			logger.info('No OCP.Files app found, viewer is now in standalone mode')
-		}
 	},
 
 	mounted() {
@@ -906,12 +903,6 @@ export default {
 			}
 		},
 
-		registerFileActions() {
-			if (!this.isStandalone) {
-				registerViewerAction()
-			}
-		},
-
 		/**
 		 * Close the viewer
 		 */

vite.config.js

@@ -7,9 +7,16 @@ const plyrIcons = readFileSync(join(__dirname, 'node_modules', 'plyr', 'dist', '
 
 export default createAppConfig({
 	main: 'src/main.js',
+	init: 'src/init.ts',
 }, {
 	replace: {
 		PLYR_ICONS: JSON.stringify(plyrIcons),
 	},
 	minify: isProduction,
+	// ensure that every JS entry point has a matching CSS file
+	createEmptyCSSEntryPoints: true,
+	// Make sure we also clear the CSS directory
+	emptyOutputDirectory: {
+		additionalDirectories: ['css'],
+	},
 })