fix: styling import for showcase

When importing stylesheets through the `<link>` tag, Vite optimizes multiple stylesheets and might
import them in a different order than declared. To avoid this problem, only one stylesheet is
imported per showcase, and the import is now done directly through SCSS import statements.

See vitejs/vite#4890

static/showcases/blocked-segment.html

@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Pillarbox Demo - Detect blocked segment</title>
   <link rel="icon" type="image/x-icon" href="../../img/favicon.ico">
-  <link rel="stylesheet" href="./static-showcase.scss"/>
   <link rel="stylesheet" href="./blocked-segment.scss"/>
 </head>
 

static/showcases/blocked-segment.scss

@@ -1,3 +1,5 @@
+@import './static-showcase';
+
 .pbw-blocked-segment-notification {
   position: absolute;
   right: var(--size-5);

static/showcases/chapters-showcase.scss

@@ -1,3 +1,5 @@
+@import './static-showcase';
+
 .pbw-current-chapter {
   position: absolute;
   top: calc(var(--size-8) * -1);

static/showcases/chapters.html

@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Pillarbox Demo - Display Current Chapter</title>
   <link rel="icon" type="image/x-icon" href="../../img/favicon.ico">
-  <link rel="stylesheet" href="./static-showcase.scss"/>
   <link rel="stylesheet" href="./chapters-showcase.scss"/>
 </head>
 

static/showcases/playlist-showcase.scss

@@ -1 +1,2 @@
+@import './static-showcase';
 @import '@srgssr/pillarbox-playlist/dist/pillarbox-playlist.min.css';

static/showcases/playlist.html

@@ -4,9 +4,8 @@
   <meta charset="UTF-8"/>
   <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Pillarbox Demo - Skip Credits</title>
+  <title>Pillarbox Demo - Playlist</title>
   <link rel="icon" type="image/x-icon" href="../../img/favicon.ico">
-  <link rel="stylesheet" href="./static-showcase.scss"/>
   <link rel="stylesheet" href="./playlist-showcase.scss"/>
 </head>
 

static/showcases/skip-credits.html

@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Pillarbox Demo - Skip Credits</title>
   <link rel="icon" type="image/x-icon" href="../../img/favicon.ico">
-  <link rel="stylesheet" href="./static-showcase.scss"/>
   <link rel="stylesheet" href="./skip-showcase.scss"/>
 </head>
 

static/showcases/skip-showcase.scss

@@ -1 +1,2 @@
+@import './static-showcase';
 @import '@srgssr/skip-button/dist/skip-button.min.css';