diff --git a/packages/rrweb-snapshot/src/css.ts b/packages/rrweb-snapshot/src/css.ts
index 8098509cfc..220e1a1fce 100644
--- a/packages/rrweb-snapshot/src/css.ts
+++ b/packages/rrweb-snapshot/src/css.ts
@@ -864,7 +864,17 @@ export function parse(css: string, options: ParserOptions = {}): Stylesheet {
    */
 
   function _compileAtrule(name: string) {
-    const re = new RegExp('^@' + name + '\\s*([^;]+);');
+    const re = new RegExp(
+      '^@' +
+        name +
+        '\\s*((?:' +
+        [
+          '(?<!\\\\)"(?:\\\\"|[^"])*"',
+          "(?<!\\\\)'(?:\\\\'|[^'])*'",
+          '[^;]',
+        ].join('|') +
+        ')+);',
+    );
     return () => {
       const pos = position();
       const m = match(re);
diff --git a/packages/rrweb-snapshot/test/rebuild.test.ts b/packages/rrweb-snapshot/test/rebuild.test.ts
index daf7d10db8..5d544ccfa7 100644
--- a/packages/rrweb-snapshot/test/rebuild.test.ts
+++ b/packages/rrweb-snapshot/test/rebuild.test.ts
@@ -213,4 +213,13 @@ ul li.specified c:hover img, ul li.specified c.\\:hover img {
       should_not_modify,
     );
   });
+
+  it('should not incorrectly interpret at rules', () => {
+    // the ':hover' in the below is a decoy which is not part of the selector,
+    const should_not_modify =
+      '@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,700;1,400&display=:hover");';
+    expect(adaptCssForReplay(should_not_modify, cache)).toEqual(
+      should_not_modify,
+    );
+  });
 });