add rollup postcss plugin and import style from rrweb

package.json

@@ -9,6 +9,7 @@
     "rollup": "^0.66.2",
     "rollup-plugin-commonjs": "^9.1.8",
     "rollup-plugin-node-resolve": "^3.4.0",
+    "rollup-plugin-postcss": "^1.6.3",
     "rollup-plugin-svelte": "^4.3.1",
     "rollup-plugin-terser": "^3.0.0",
     "sirv-cli": "^0.2.2",

rollup.config.js

@@ -2,6 +2,7 @@ import svelte from 'rollup-plugin-svelte';
 import resolve from 'rollup-plugin-node-resolve';
 import commonjs from 'rollup-plugin-commonjs';
 import { terser } from 'rollup-plugin-terser';
+import postcss from 'rollup-plugin-postcss';
 import pkg from './package.json';
 
 const production = !process.env.ROLLUP_WATCH;
@@ -38,6 +39,8 @@ export default [
     resolve(),
     commonjs(),
 
+    postcss(),
+
     // If we're building for production (npm run build
     // instead of npm run dev), minify
     production && terser(),

src/Player.html

@@ -7,6 +7,7 @@
 
 <script>
   import { Replayer } from 'rrweb';
+  import 'rrweb/dist/rrweb.min.css';
   import { inlineCss } from './utils.js';
 
   export default {
@@ -94,26 +95,4 @@
   :global(.replayer-wrapper > iframe) {
     border: none;
   }
-
-  /* get from rrweb */
-  :global(.replayer-wrapper) {
-    position: relative;
-  }
-
-  :global(.replayer-mouse) {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-  }
-
-  :global(.replayer-mouse::after) {
-    content: '';
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    border-radius: 10px;
-    background: thistle;
-    transform: translate(-10px, -10px);
-    opacity: 0.5;
-  }
 </style>