From ba67e68c78a2348e5f9504bd5dac7a5bf8e16080 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6?=
 <14975046+skjnldsv@users.noreply.github.com>
Date: Thu, 8 Oct 2026 10:10:45 +0200
Subject: [PATCH] fix(build): have each chunk import its stylesheet
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Since #124 the styles are emitted as stylesheets, but nothing imports
them and the package does not export them, so an app bundling the library
gets a viewer with none of its styles: in the server the image editor is
zero pixels tall and the Video.js controls collapse. inlineCSS makes every
chunk import its own stylesheet, for the app's bundler to load with it.

The plugin puts that import at the top of the chunk, ahead of the image
editor's own stylesheet, so the app loads the editor's `.image-editor`
after the viewer's override of it and the override lost. It now wins on
specificity rather than on order.

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: John Molakvoæ <14975046+skjnldsv@users.noreply.github.com>
---
 lib/components/ImageEditor.vue | 6 ++++--
 vite.config.ts                 | 4 ++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/lib/components/ImageEditor.vue b/lib/components/ImageEditor.vue
index 6e76900..e0bf85d 100644
--- a/lib/components/ImageEditor.vue
+++ b/lib/components/ImageEditor.vue
@@ -113,8 +113,10 @@ function onError(error: Error) {
 
 <style scoped>
 /* Full-viewport overlay so the editor fills the screen regardless of the
-   (collapsing) handler container it replaces. */
-.viewer__image-editor {
+   (collapsing) handler container it replaces. Over the editor's own
+   `.image-editor` rule by specificity, as the app bundling the library may
+   load that stylesheet after this one. */
+.image-editor.viewer__image-editor {
 	position: fixed;
 	inset: 0;
 	z-index: 10102;
diff --git a/vite.config.ts b/vite.config.ts
index 570d6f1..4efcc0a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -66,6 +66,10 @@ export default defineConfig((env) => {
 	return createLibConfig({
 		index: 'lib/index.ts',
 	}, {
+		// Each chunk imports its own stylesheet, for the app bundling the
+		// library to load along with that chunk. Without it the styles are
+		// emitted but nothing loads them.
+		inlineCSS: true,
 		nodeExternalsOptions: {
 			// for subpath imports like '@nextcloud/l10n/gettext'
 			include: [/^@nextcloud\//],