Merge pull request Sofie-Automation#1593 from rjmunro/rjmunro/fix-scss-warinings

Fix some SCSS warinings

Author: rjmunro

packages/webui/src/client/ui/PreviewPopUp/PreviewPopUp.scss

@@ -1,4 +1,4 @@
-@import '../../styles/itemTypeColors';
+@use '../../styles/itemTypeColors';
 
 .preview-popUp {
 	border: 1px solid var(--sofie-segment-layer-hover-popup-border);
@@ -7,26 +7,8 @@
 	border-radius: 5px;
 	overflow: hidden;
 	pointer-events: none;
-
 	z-index: 9999;
-
-	&--large {
-		width: 482px;
-		padding-bottom: 10px;
-		--preview-max-dimension: 480;
-	}
-
-	&--small {
-		width: 322px;
-		--preview-max-dimension: 320;
-	}
-
-	&--hidden {
-		visibility: none;
-	}
-
 	font-family: Roboto Flex;
-
 	font-style: normal;
 	font-weight: 500;
 	font-size: 16px;
@@ -50,6 +32,17 @@
 		'YTFI' 738,
 		'YTLC' 548,
 		'YTUC' 712;
+
+	&--large {
+		width: 482px;
+		padding-bottom: 10px;
+		--preview-max-dimension: 480;
+	}
+
+	&--small {
+		width: 322px;
+		--preview-max-dimension: 320;
+	}
 }
 
 .preview-popUp__preview {
@@ -115,7 +108,7 @@
 			margin-left: 2%;
 			margin-top: 7px;
 			flex-shrink: 0;
-			@include item-type-colors();
+			@include itemTypeColors.item-type-colors;
 		}
 
 		.preview-popUp__element-with-time-info__text {
@@ -404,7 +397,7 @@
 		}
 
 		& > * {
-			@include item-type-colors();
+			@include itemTypeColors.item-type-colors;
 		}
 
 		.video-preview__label {

packages/webui/src/client/ui/PreviewPopUp/PreviewPopUp.tsx

@@ -12,13 +12,12 @@ export const PreviewPopUp = React.forwardRef<
 		padding: Padding
 		placement: Placement
 		size: 'small' | 'large'
-		hidden?: boolean
 		preview?: React.ReactNode
 		initialOffsetX?: number
 		trackMouse?: boolean
 	}>
 >(function PreviewPopUp(
-	{ anchor, padding, placement, hidden, size, children, initialOffsetX, trackMouse },
+	{ anchor, padding, placement, size, children, initialOffsetX, trackMouse },
 	ref
 ): React.JSX.Element {
 	const [popperEl, setPopperEl] = useState<HTMLDivElement | null>(null)
@@ -110,7 +109,6 @@ export const PreviewPopUp = React.forwardRef<
 			className={classNames('preview-popUp', {
 				'preview-popUp--large': size === 'large',
 				'preview-popUp--small': size === 'small',
-				'preview-popUp--hidden': hidden,
 			})}
 			style={styles.popper}
 			{...attributes.popper}

packages/webui/vite.config.mts

@@ -59,6 +59,17 @@ export default defineConfig(({ command }) => ({
 		},
 	},
 
+	css: {
+		preprocessorOptions: {
+			scss: {
+				// Silence deprecation warnings from Bootstrap and other dependencies
+				// This hides warnings from dependencies but still shows warnings from our own code
+				// Bootstrap 5.x not yet fully supporting Dart Sass 2.x causes many warnings
+				quietDeps: true,
+			},
+		},
+	},
+
 	define: {
 		__APP_VERSION__: JSON.stringify(process.env.npm_package_version),
 	},