From 6c0b1b96bcb42b5db4b40aff358e9e3e23b402be Mon Sep 17 00:00:00 2001
From: Yanzhen Yu <yanzhen@smartx.com>
Date: Wed, 1 Apr 2026 12:00:00 +0800
Subject: [PATCH] add rollup postcss plugin and import style from rrweb

---
 package.json     |  1 +
 rollup.config.js |  3 +++
 src/Player.html  | 23 +----------------------
 3 files changed, 5 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index cdf5d8cc..a20bf023 100644
--- a/package.json
+++ b/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",
diff --git a/rollup.config.js b/rollup.config.js
index 85fe0bfe..b664fcb7 100644
--- a/rollup.config.js
+++ b/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(),
diff --git a/src/Player.html b/src/Player.html
index 8a191986..0252a9ff 100644
--- a/src/Player.html
+++ b/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>
\ No newline at end of file