From de2363a128db61a118c8a30fd01fa570c0aa44ca Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Wed, 22 May 2024 11:01:46 +0100 Subject: [PATCH] Fix @import regex bit which was stopping consumption in the middle of a url - need to consume quotes. Thanks dave.kindel@pendo.io for reporting and isolating this case --- packages/rrweb-snapshot/src/css.ts | 12 +++++++++++- packages/rrweb-snapshot/test/rebuild.test.ts | 9 +++++++++ 2 files changed, 20 insertions(+), 1 deletion(-) 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*((?:' + + [ + '(? { 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, + ); + }); });