fix(vite): plyr scss syntax

Signed-off-by: John Molakvoæ (skjnldsv) <[email protected]>

css/viewer-init.css

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

src/mixins/Plyr.scss

@@ -10,6 +10,12 @@
 	--plyr-audio-controls-background: var(--color-main-background);
 	--plyr-audio-control-color: var(--color-main-text);
 
+	// Override server font style
+	--plyr-button-size: 44px;
+
+	// Progress
+	--plyr-range-fill-background: var(--color-primary-element);
+
 	// Reactive content
 	.plyr__controls {
 		flex-wrap: wrap;
@@ -24,8 +30,6 @@
 		}
 	}
 
-	// Override server font style
-	--plyr-button-size: 44px;
 	button {
 		width: var(--plyr-button-size);
 		height: var(--plyr-button-size);
@@ -43,13 +47,12 @@
 		}
 
 		&.plyr__control--overlaid {
+			--plyr-button-size: 50px;
 			width: var(--plyr-button-size);
 			height: var(--plyr-button-size);
 			color: var(--color-primary-element-text);
 			background-color: var(--color-primary-element);
 
-			--plyr-button-size: 50px;
-
 			&:hover,
 			&:focus {
 				background-color: var(--color-primary-element-hover);
@@ -83,8 +86,6 @@
 		}
 	}
 
-	// Progress
-	--plyr-range-fill-background: var(--color-primary-element);
 	.plyr__progress__buffer {
 		width: calc(100% + var(--plyr-range-thumb-height, 13px));
 		height: var(--plyr-range-track-height, 5px);

vite.config.ts

@@ -0,0 +1,28 @@
+import { createAppConfig } from '@nextcloud/vite-config'
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+const isProduction = process.env.NODE_ENV === 'production'
+const plyrIcons = readFileSync(
+	join(__dirname, 'node_modules', 'plyr', 'dist', 'plyr.svg'),
+	{ encoding: 'utf8' },
+)
+
+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'],
+		},
+	},
+)