From 8e0d43abdf481161ad3c4a10192ba3edfb788432 Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Wed, 20 Mar 2024 18:44:38 +0000 Subject: [PATCH 01/12] We weren't recursing into media queries (or @supports etc.) to rewrite hover pseudoclasses --- packages/rrweb-snapshot/src/rebuild.ts | 8 ++++++-- packages/rrweb-snapshot/test/rebuild.test.ts | 7 +++++++ 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts index 5cf52ebd38..1f320e78bf 100644 --- a/packages/rrweb-snapshot/src/rebuild.ts +++ b/packages/rrweb-snapshot/src/rebuild.ts @@ -78,7 +78,7 @@ export function addHoverClass(cssText: string, cache: BuildCache): string { } const selectors: string[] = []; - ast.stylesheet.rules.forEach((rule) => { + function getSelectors(rule: any) { if ('selectors' in rule) { (rule.selectors || []).forEach((selector: string) => { if (HOVER_SELECTOR.test(selector)) { @@ -86,7 +86,11 @@ export function addHoverClass(cssText: string, cache: BuildCache): string { } }); } - }); + if ('rules' in rule) { + (rule.rules || []).forEach(getSelectors); + } + } + getSelectors(ast.stylesheet); if (selectors.length === 0) { return cssText; diff --git a/packages/rrweb-snapshot/test/rebuild.test.ts b/packages/rrweb-snapshot/test/rebuild.test.ts index 357cd2fb3c..b2a2dce76c 100644 --- a/packages/rrweb-snapshot/test/rebuild.test.ts +++ b/packages/rrweb-snapshot/test/rebuild.test.ts @@ -91,6 +91,13 @@ describe('rebuild', function () { ); }); + it('can add hover class within media query', () => { + const cssText = '@media screen { .m:hover { color: white } }'; + expect(addHoverClass(cssText, cache)).toEqual( + '@media screen { .m:hover, .m.\\:hover { color: white } }', + ); + }); + it('can add hover class when there is multi selector', () => { const cssText = '.a, .b:hover, .c { color: white }'; expect(addHoverClass(cssText, cache)).toEqual( From 3c3cd016d4beb0286637b0babf0af10946201d4b Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Thu, 21 Mar 2024 10:50:01 +0000 Subject: [PATCH 02/12] The early return meant that the stylesWithHoverClass cache wasn't being populated if there were no hover selectors on the stylesheet - not committing the test, but modifying the existing 'add a hover class to a previously processed css string' as follows shows the problem: --- a/packages/rrweb-snapshot/test/rebuild.test.ts +++ b/packages/rrweb-snapshot/test/rebuild.test.ts @@ -151,6 +185,7 @@ describe('rebuild', function () { path.resolve(__dirname, './css/benchmark.css'), 'utf8', ); + cssText = cssText.replace(/:hover/g, ''); const start = process.hrtime(); addHoverClass(cssText, cache); --- packages/rrweb-snapshot/src/rebuild.ts | 37 +++++++++++++------------- 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts index 1f320e78bf..206589e6cb 100644 --- a/packages/rrweb-snapshot/src/rebuild.ts +++ b/packages/rrweb-snapshot/src/rebuild.ts @@ -92,25 +92,26 @@ export function addHoverClass(cssText: string, cache: BuildCache): string { } getSelectors(ast.stylesheet); - if (selectors.length === 0) { - return cssText; + let result = cssText; + if (selectors.length > 0) { + const selectorMatcher = new RegExp( + selectors + .filter((selector, index) => selectors.indexOf(selector) === index) + .sort((a, b) => b.length - a.length) + .map((selector) => { + return escapeRegExp(selector); + }) + .join('|'), + 'g', + ); + result = result.replace(selectorMatcher, (selector) => { + const newSelector = selector.replace( + HOVER_SELECTOR_GLOBAL, + '$1.\\:hover', + ); + return `${selector}, ${newSelector}`; + }); } - - const selectorMatcher = new RegExp( - selectors - .filter((selector, index) => selectors.indexOf(selector) === index) - .sort((a, b) => b.length - a.length) - .map((selector) => { - return escapeRegExp(selector); - }) - .join('|'), - 'g', - ); - - const result = cssText.replace(selectorMatcher, (selector) => { - const newSelector = selector.replace(HOVER_SELECTOR_GLOBAL, '$1.\\:hover'); - return `${selector}, ${newSelector}`; - }); cache?.stylesWithHoverClass.set(cssText, result); return result; } From 22378f5a9190f2075dfe8d9c095180ca7bb38c51 Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Thu, 21 Mar 2024 11:03:23 +0000 Subject: [PATCH 03/12] Replace `min-device-width` and similar with `min-width` as the former looks out at the browser viewport whereas we need it to look at the replayer iframe viewport --- packages/rrweb-snapshot/src/rebuild.ts | 23 ++++++++++++++++++++ packages/rrweb-snapshot/test/rebuild.test.ts | 8 +++++++ 2 files changed, 31 insertions(+) diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts index 206589e6cb..f823e270ef 100644 --- a/packages/rrweb-snapshot/src/rebuild.ts +++ b/packages/rrweb-snapshot/src/rebuild.ts @@ -63,6 +63,8 @@ function escapeRegExp(str: string) { return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string } +const MEDIA_SELECTOR = /(max|min)-device-(width|height)/; +const MEDIA_SELECTOR_GLOBAL = new RegExp(MEDIA_SELECTOR.source, 'g'); const HOVER_SELECTOR = /([^\\]):hover/; const HOVER_SELECTOR_GLOBAL = new RegExp(HOVER_SELECTOR.source, 'g'); export function addHoverClass(cssText: string, cache: BuildCache): string { @@ -78,6 +80,7 @@ export function addHoverClass(cssText: string, cache: BuildCache): string { } const selectors: string[] = []; + const medias: string[] = []; function getSelectors(rule: any) { if ('selectors' in rule) { (rule.selectors || []).forEach((selector: string) => { @@ -86,6 +89,9 @@ export function addHoverClass(cssText: string, cache: BuildCache): string { } }); } + if ('media' in rule && MEDIA_SELECTOR.test(rule.media)) { + medias.push(rule.media); + } if ('rules' in rule) { (rule.rules || []).forEach(getSelectors); } @@ -112,6 +118,23 @@ export function addHoverClass(cssText: string, cache: BuildCache): string { return `${selector}, ${newSelector}`; }); } + if (medias.length > 0) { + const mediaMatcher = new RegExp( + medias + .filter((media, index) => medias.indexOf(media) === index) + .sort((a, b) => b.length - a.length) + .map((media) => { + return escapeRegExp(media); + }) + .join('|'), + 'g', + ); + result = result.replace(mediaMatcher, (media) => { + // not attempting to maintain min-device-width along with min-width + // (it's non standard) + return media.replace(MEDIA_SELECTOR_GLOBAL, '$1-$2'); + }); + } cache?.stylesWithHoverClass.set(cssText, result); return result; } diff --git a/packages/rrweb-snapshot/test/rebuild.test.ts b/packages/rrweb-snapshot/test/rebuild.test.ts index b2a2dce76c..29b0619466 100644 --- a/packages/rrweb-snapshot/test/rebuild.test.ts +++ b/packages/rrweb-snapshot/test/rebuild.test.ts @@ -131,6 +131,14 @@ describe('rebuild', function () { expect(addHoverClass(cssText, cache)).toEqual(cssText); }); + it('can adapt media rules to replay context', () => { + const cssText = + '@media only screen and (min-device-width : 1200px) { .a { width: 10px; }}'; + expect(addHoverClass(cssText, cache)).toEqual( + '@media only screen and (min-width : 1200px) { .a { width: 10px; }}', + ); + }); + // this benchmark is unreliable when run in parallel with other tests it.skip('benchmark', () => { const cssText = fs.readFileSync( From 3af0ac917453dc6aa3c3b8add192d5d9fef38d7d Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Thu, 21 Mar 2024 11:06:52 +0000 Subject: [PATCH 04/12] Add some tests to show how the hover replacement works against selector lists. I believe these were failing in a previous version of rrweb as I had some local patches that no longer seem to be needed to handle these cases --- packages/rrweb-snapshot/test/rebuild.test.ts | 28 ++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/packages/rrweb-snapshot/test/rebuild.test.ts b/packages/rrweb-snapshot/test/rebuild.test.ts index 29b0619466..22e69cd08a 100644 --- a/packages/rrweb-snapshot/test/rebuild.test.ts +++ b/packages/rrweb-snapshot/test/rebuild.test.ts @@ -91,6 +91,34 @@ describe('rebuild', function () { ); }); + it('can correctly add hover when in middle of selector', () => { + const cssText = 'ul li a:hover img { color: white }'; + expect(addHoverClass(cssText, cache)).toEqual( + 'ul li a:hover img, ul li a.\\:hover img { color: white }', + ); + }); + + it('can correctly add hover on multiline selector', () => { + const cssText = `ul li.specified a:hover img, +ul li.multiline +b:hover +img, +ul li.specified c:hover img { + color: white +}`; + expect(addHoverClass(cssText, cache)).toEqual( + `ul li.specified a:hover img, ul li.specified a.\\:hover img, +ul li.multiline +b:hover +img, ul li.multiline +b.\\:hover +img, +ul li.specified c:hover img, ul li.specified c.\\:hover img { + color: white +}`, + ); + }); + it('can add hover class within media query', () => { const cssText = '@media screen { .m:hover { color: white } }'; expect(addHoverClass(cssText, cache)).toEqual( From 89b3c17e69ca52abb3e2be1f47a87d49b212372c Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Thu, 21 Mar 2024 11:18:32 +0000 Subject: [PATCH 05/12] Update name of function to reflect that 'addHoverClass' does more than just :hover. I believe this function is only exported for the purposes of use in the tests --- packages/rrweb-snapshot/src/index.ts | 4 +-- packages/rrweb-snapshot/src/rebuild.ts | 6 ++-- packages/rrweb-snapshot/test/rebuild.test.ts | 30 ++++++++++---------- 3 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/rrweb-snapshot/src/index.ts b/packages/rrweb-snapshot/src/index.ts index ef9d1b19fa..c9f91a9100 100644 --- a/packages/rrweb-snapshot/src/index.ts +++ b/packages/rrweb-snapshot/src/index.ts @@ -11,7 +11,7 @@ import snapshot, { } from './snapshot'; import rebuild, { buildNodeWithSN, - addHoverClass, + adaptCssForReplay, createCache, } from './rebuild'; export * from './types'; @@ -22,7 +22,7 @@ export { serializeNodeWithId, rebuild, buildNodeWithSN, - addHoverClass, + adaptCssForReplay, createCache, transformAttribute, ignoreAttribute, diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts index f823e270ef..ac9624ae8a 100644 --- a/packages/rrweb-snapshot/src/rebuild.ts +++ b/packages/rrweb-snapshot/src/rebuild.ts @@ -67,7 +67,7 @@ const MEDIA_SELECTOR = /(max|min)-device-(width|height)/; const MEDIA_SELECTOR_GLOBAL = new RegExp(MEDIA_SELECTOR.source, 'g'); const HOVER_SELECTOR = /([^\\]):hover/; const HOVER_SELECTOR_GLOBAL = new RegExp(HOVER_SELECTOR.source, 'g'); -export function addHoverClass(cssText: string, cache: BuildCache): string { +export function adaptCssForReplay(cssText: string, cache: BuildCache): string { const cachedStyle = cache?.stylesWithHoverClass.get(cssText); if (cachedStyle) return cachedStyle; @@ -213,7 +213,7 @@ function buildNode( const isTextarea = tagName === 'textarea' && name === 'value'; const isRemoteOrDynamicCss = tagName === 'style' && name === '_cssText'; if (isRemoteOrDynamicCss && hackCss && typeof value === 'string') { - value = addHoverClass(value, cache); + value = adaptCssForReplay(value, cache); } if ((isTextarea || isRemoteOrDynamicCss) && typeof value === 'string') { const child = doc.createTextNode(value); @@ -363,7 +363,7 @@ function buildNode( case NodeType.Text: return doc.createTextNode( n.isStyle && hackCss - ? addHoverClass(n.textContent, cache) + ? adaptCssForReplay(n.textContent, cache) : n.textContent, ); case NodeType.CDATA: diff --git a/packages/rrweb-snapshot/test/rebuild.test.ts b/packages/rrweb-snapshot/test/rebuild.test.ts index 22e69cd08a..766217da70 100644 --- a/packages/rrweb-snapshot/test/rebuild.test.ts +++ b/packages/rrweb-snapshot/test/rebuild.test.ts @@ -3,7 +3,7 @@ */ import * as fs from 'fs'; import * as path from 'path'; -import { addHoverClass, buildNodeWithSN, createCache } from '../src/rebuild'; +import { adaptCssForReplay, buildNodeWithSN, createCache } from '../src/rebuild'; import { NodeType } from '../src/types'; import { createMirror, Mirror } from '../src/utils'; @@ -81,19 +81,19 @@ describe('rebuild', function () { describe('add hover class to hover selector related rules', function () { it('will do nothing to css text without :hover', () => { const cssText = 'body { color: white }'; - expect(addHoverClass(cssText, cache)).toEqual(cssText); + expect(adaptCssForReplay(cssText, cache)).toEqual(cssText); }); it('can add hover class to css text', () => { const cssText = '.a:hover { color: white }'; - expect(addHoverClass(cssText, cache)).toEqual( + expect(adaptCssForReplay(cssText, cache)).toEqual( '.a:hover, .a.\\:hover { color: white }', ); }); it('can correctly add hover when in middle of selector', () => { const cssText = 'ul li a:hover img { color: white }'; - expect(addHoverClass(cssText, cache)).toEqual( + expect(adaptCssForReplay(cssText, cache)).toEqual( 'ul li a:hover img, ul li a.\\:hover img { color: white }', ); }); @@ -106,7 +106,7 @@ img, ul li.specified c:hover img { color: white }`; - expect(addHoverClass(cssText, cache)).toEqual( + expect(adaptCssForReplay(cssText, cache)).toEqual( `ul li.specified a:hover img, ul li.specified a.\\:hover img, ul li.multiline b:hover @@ -121,48 +121,48 @@ ul li.specified c:hover img, ul li.specified c.\\:hover img { it('can add hover class within media query', () => { const cssText = '@media screen { .m:hover { color: white } }'; - expect(addHoverClass(cssText, cache)).toEqual( + expect(adaptCssForReplay(cssText, cache)).toEqual( '@media screen { .m:hover, .m.\\:hover { color: white } }', ); }); it('can add hover class when there is multi selector', () => { const cssText = '.a, .b:hover, .c { color: white }'; - expect(addHoverClass(cssText, cache)).toEqual( + expect(adaptCssForReplay(cssText, cache)).toEqual( '.a, .b:hover, .b.\\:hover, .c { color: white }', ); }); it('can add hover class when there is a multi selector with the same prefix', () => { const cssText = '.a:hover, .a:hover::after { color: white }'; - expect(addHoverClass(cssText, cache)).toEqual( + expect(adaptCssForReplay(cssText, cache)).toEqual( '.a:hover, .a.\\:hover, .a:hover::after, .a.\\:hover::after { color: white }', ); }); it('can add hover class when :hover is not the end of selector', () => { const cssText = 'div:hover::after { color: white }'; - expect(addHoverClass(cssText, cache)).toEqual( + expect(adaptCssForReplay(cssText, cache)).toEqual( 'div:hover::after, div.\\:hover::after { color: white }', ); }); it('can add hover class when the selector has multi :hover', () => { const cssText = 'a:hover b:hover { color: white }'; - expect(addHoverClass(cssText, cache)).toEqual( + expect(adaptCssForReplay(cssText, cache)).toEqual( 'a:hover b:hover, a.\\:hover b.\\:hover { color: white }', ); }); it('will ignore :hover in css value', () => { const cssText = '.a::after { content: ":hover" }'; - expect(addHoverClass(cssText, cache)).toEqual(cssText); + expect(adaptCssForReplay(cssText, cache)).toEqual(cssText); }); it('can adapt media rules to replay context', () => { const cssText = '@media only screen and (min-device-width : 1200px) { .a { width: 10px; }}'; - expect(addHoverClass(cssText, cache)).toEqual( + expect(adaptCssForReplay(cssText, cache)).toEqual( '@media only screen and (min-width : 1200px) { .a { width: 10px; }}', ); }); @@ -174,7 +174,7 @@ ul li.specified c:hover img, ul li.specified c.\\:hover img { 'utf8', ); const start = process.hrtime(); - addHoverClass(cssText, cache); + adaptCssForReplay(cssText, cache); const end = process.hrtime(start); const duration = getDuration(end); expect(duration).toBeLessThan(100); @@ -189,11 +189,11 @@ ul li.specified c:hover img, ul li.specified c.\\:hover img { ); const start = process.hrtime(); - addHoverClass(cssText, cache); + adaptCssForReplay(cssText, cache); const end = process.hrtime(start); const cachedStart = process.hrtime(); - addHoverClass(cssText, cache); + adaptCssForReplay(cssText, cache); const cachedEnd = process.hrtime(cachedStart); expect(getDuration(cachedEnd) * factor).toBeLessThan(getDuration(end)); From bdb47dd3a9c52fbb9f6298228032f69ec3cc16d2 Mon Sep 17 00:00:00 2001 From: eoghanmurray Date: Thu, 21 Mar 2024 11:25:15 +0000 Subject: [PATCH 06/12] Apply formatting changes --- packages/rrweb-snapshot/test/rebuild.test.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/rrweb-snapshot/test/rebuild.test.ts b/packages/rrweb-snapshot/test/rebuild.test.ts index 766217da70..097ff0989a 100644 --- a/packages/rrweb-snapshot/test/rebuild.test.ts +++ b/packages/rrweb-snapshot/test/rebuild.test.ts @@ -3,7 +3,11 @@ */ import * as fs from 'fs'; import * as path from 'path'; -import { adaptCssForReplay, buildNodeWithSN, createCache } from '../src/rebuild'; +import { + adaptCssForReplay, + buildNodeWithSN, + createCache, +} from '../src/rebuild'; import { NodeType } from '../src/types'; import { createMirror, Mirror } from '../src/utils'; From c7dfd538c59dce2e4c3db4085beb2e2cec9168bf Mon Sep 17 00:00:00 2001 From: Eoghan Murray Date: Thu, 21 Mar 2024 11:27:29 +0000 Subject: [PATCH 07/12] Create rotten-spies-enjoy.md --- .changeset/rotten-spies-enjoy.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/rotten-spies-enjoy.md diff --git a/.changeset/rotten-spies-enjoy.md b/.changeset/rotten-spies-enjoy.md new file mode 100644 index 0000000000..724e37fa3d --- /dev/null +++ b/.changeset/rotten-spies-enjoy.md @@ -0,0 +1,7 @@ +--- +"rrweb-snapshot": patch +"rrweb": patch +--- + +Ensure :hover works on replayer, even if a rule is behind a media query +Respect the intent behind max-device-width and min-device-width media queries so that their effects are apparent in the replayer context From 8143ee153501ecf238c514a12404481a6cb37e0d Mon Sep 17 00:00:00 2001 From: eoghanmurray Date: Thu, 21 Mar 2024 11:28:33 +0000 Subject: [PATCH 08/12] Apply formatting changes --- .changeset/rotten-spies-enjoy.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/rotten-spies-enjoy.md b/.changeset/rotten-spies-enjoy.md index 724e37fa3d..5f5954fcac 100644 --- a/.changeset/rotten-spies-enjoy.md +++ b/.changeset/rotten-spies-enjoy.md @@ -1,6 +1,6 @@ --- -"rrweb-snapshot": patch -"rrweb": patch +'rrweb-snapshot': patch +'rrweb': patch --- Ensure :hover works on replayer, even if a rule is behind a media query From d677cecdbf5185f929a1a20cee7bd910a635be21 Mon Sep 17 00:00:00 2001 From: Justin Halsall Date: Mon, 25 Mar 2024 14:25:52 +0100 Subject: [PATCH 09/12] Add correct typing on `getSelectors` --- packages/rrweb-snapshot/src/css.ts | 4 ++-- packages/rrweb-snapshot/src/rebuild.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/rrweb-snapshot/src/css.ts b/packages/rrweb-snapshot/src/css.ts index 82b4c41f96..d218bf635d 100644 --- a/packages/rrweb-snapshot/src/css.ts +++ b/packages/rrweb-snapshot/src/css.ts @@ -224,7 +224,7 @@ export interface Stylesheet extends Node { // https://github.com/visionmedia/css-parse/pull/49#issuecomment-30088027 const commentre = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//g; -export function parse(css: string, options: ParserOptions = {}) { +export function parse(css: string, options: ParserOptions = {}): Stylesheet { /** * Positional. */ @@ -932,7 +932,7 @@ function trim(str: string) { * Adds non-enumerable parent node reference to each node. */ -function addParent(obj: Stylesheet, parent?: Stylesheet) { +function addParent(obj: Stylesheet, parent?: Stylesheet): Stylesheet { const isNode = obj && typeof obj.type === 'string'; const childParent = isNode ? obj : parent; diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts index ac9624ae8a..3478a5dc32 100644 --- a/packages/rrweb-snapshot/src/rebuild.ts +++ b/packages/rrweb-snapshot/src/rebuild.ts @@ -1,4 +1,4 @@ -import { parse } from './css'; +import { StyleRules, Rule, Media, parse } from './css'; import { serializedNodeWithId, NodeType, @@ -81,7 +81,7 @@ export function adaptCssForReplay(cssText: string, cache: BuildCache): string { const selectors: string[] = []; const medias: string[] = []; - function getSelectors(rule: any) { + function getSelectors(rule: StyleRules | Rule | Media) { if ('selectors' in rule) { (rule.selectors || []).forEach((selector: string) => { if (HOVER_SELECTOR.test(selector)) { @@ -89,7 +89,7 @@ export function adaptCssForReplay(cssText: string, cache: BuildCache): string { } }); } - if ('media' in rule && MEDIA_SELECTOR.test(rule.media)) { + if ('media' in rule && rule.media && MEDIA_SELECTOR.test(rule.media)) { medias.push(rule.media); } if ('rules' in rule) { From a5343b5b9b102a8dad81853acd545664b149f725 Mon Sep 17 00:00:00 2001 From: Justin Halsall Date: Mon, 25 Mar 2024 15:04:54 +0100 Subject: [PATCH 10/12] Refactor CSS interfaces to include optional rules --- packages/rrweb-snapshot/src/css.ts | 22 +++++++++------------- packages/rrweb-snapshot/src/rebuild.ts | 14 ++++++++------ 2 files changed, 17 insertions(+), 19 deletions(-) diff --git a/packages/rrweb-snapshot/src/css.ts b/packages/rrweb-snapshot/src/css.ts index d218bf635d..edeb3470b5 100644 --- a/packages/rrweb-snapshot/src/css.ts +++ b/packages/rrweb-snapshot/src/css.ts @@ -56,6 +56,11 @@ export interface Node { }; } +export interface NodeWithOptionalRules extends Node { + /** Array of nodes with the types rule, comment and any of the at-rule types. */ + rules?: Array; +} + export interface Rule extends Node { /** The list of selectors of the rule, split on commas. Each selector is trimmed from whitespace and comments. */ selectors?: string[]; @@ -98,13 +103,11 @@ export interface CustomMedia extends Node { /** * The @document at-rule. */ -export interface Document extends Node { +export interface Document extends NodeWithOptionalRules { /** The part following @document. */ document?: string; /** The vendor prefix in @document, or undefined if there is none. */ vendor?: string; - /** Array of nodes with the types rule, comment and any of the at-rule types. */ - rules?: Array; } /** @@ -118,10 +121,7 @@ export interface FontFace extends Node { /** * The @host at-rule. */ -export interface Host extends Node { - /** Array of nodes with the types rule, comment and any of the at-rule types. */ - rules?: Array; -} +export type Host = NodeWithOptionalRules; /** * The @import at-rule. @@ -153,11 +153,9 @@ export interface KeyFrame extends Node { /** * The @media at-rule. */ -export interface Media extends Node { +export interface Media extends NodeWithOptionalRules { /** The part following @media. */ media?: string; - /** Array of nodes with the types rule, comment and any of the at-rule types. */ - rules?: Array; } /** @@ -181,11 +179,9 @@ export interface Page extends Node { /** * The @supports at-rule. */ -export interface Supports extends Node { +export interface Supports extends NodeWithOptionalRules { /** The part following @supports. */ supports?: string; - /** Array of nodes with the types rule, comment and any of the at-rule types. */ - rules?: Array; } /** All at-rules. */ diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts index 3478a5dc32..9ccce1d8f9 100644 --- a/packages/rrweb-snapshot/src/rebuild.ts +++ b/packages/rrweb-snapshot/src/rebuild.ts @@ -1,4 +1,4 @@ -import { StyleRules, Rule, Media, parse } from './css'; +import { StyleRules, Rule, Media, NodeWithOptionalRules, parse } from './css'; import { serializedNodeWithId, NodeType, @@ -81,9 +81,11 @@ export function adaptCssForReplay(cssText: string, cache: BuildCache): string { const selectors: string[] = []; const medias: string[] = []; - function getSelectors(rule: StyleRules | Rule | Media) { - if ('selectors' in rule) { - (rule.selectors || []).forEach((selector: string) => { + function getSelectors( + rule: StyleRules | Rule | Media | NodeWithOptionalRules, + ) { + if ('selectors' in rule && rule.selectors) { + rule.selectors.forEach((selector: string) => { if (HOVER_SELECTOR.test(selector)) { selectors.push(selector); } @@ -92,8 +94,8 @@ export function adaptCssForReplay(cssText: string, cache: BuildCache): string { if ('media' in rule && rule.media && MEDIA_SELECTOR.test(rule.media)) { medias.push(rule.media); } - if ('rules' in rule) { - (rule.rules || []).forEach(getSelectors); + if ('rules' in rule && rule.rules) { + rule.rules.forEach(getSelectors); } } getSelectors(ast.stylesheet); From 60c8a1e642c93a3369026d0f4d44f9df45e9723f Mon Sep 17 00:00:00 2001 From: Justin Halsall Date: Mon, 25 Mar 2024 15:08:23 +0100 Subject: [PATCH 11/12] Change `rules` to be non optional --- packages/rrweb-snapshot/src/css.ts | 16 +++++++--------- packages/rrweb-snapshot/src/rebuild.ts | 6 ++---- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/packages/rrweb-snapshot/src/css.ts b/packages/rrweb-snapshot/src/css.ts index edeb3470b5..4645deae4f 100644 --- a/packages/rrweb-snapshot/src/css.ts +++ b/packages/rrweb-snapshot/src/css.ts @@ -56,9 +56,9 @@ export interface Node { }; } -export interface NodeWithOptionalRules extends Node { +export interface NodeWithRules extends Node { /** Array of nodes with the types rule, comment and any of the at-rule types. */ - rules?: Array; + rules: Array; } export interface Rule extends Node { @@ -103,7 +103,7 @@ export interface CustomMedia extends Node { /** * The @document at-rule. */ -export interface Document extends NodeWithOptionalRules { +export interface Document extends NodeWithRules { /** The part following @document. */ document?: string; /** The vendor prefix in @document, or undefined if there is none. */ @@ -121,7 +121,7 @@ export interface FontFace extends Node { /** * The @host at-rule. */ -export type Host = NodeWithOptionalRules; +export type Host = NodeWithRules; /** * The @import at-rule. @@ -153,7 +153,7 @@ export interface KeyFrame extends Node { /** * The @media at-rule. */ -export interface Media extends NodeWithOptionalRules { +export interface Media extends NodeWithRules { /** The part following @media. */ media?: string; } @@ -179,7 +179,7 @@ export interface Page extends Node { /** * The @supports at-rule. */ -export interface Supports extends NodeWithOptionalRules { +export interface Supports extends NodeWithRules { /** The part following @supports. */ supports?: string; } @@ -201,10 +201,8 @@ export type AtRule = /** * A collection of rules */ -export interface StyleRules { +export interface StyleRules extends NodeWithRules { source?: string; - /** Array of nodes with the types rule, comment and any of the at-rule types. */ - rules: Array; /** Array of Errors. Errors collected during parsing when option silent is true. */ parsingErrors?: ParserError[]; } diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts index 9ccce1d8f9..6531cfe339 100644 --- a/packages/rrweb-snapshot/src/rebuild.ts +++ b/packages/rrweb-snapshot/src/rebuild.ts @@ -1,4 +1,4 @@ -import { StyleRules, Rule, Media, NodeWithOptionalRules, parse } from './css'; +import { Rule, Media, NodeWithRules, parse } from './css'; import { serializedNodeWithId, NodeType, @@ -81,9 +81,7 @@ export function adaptCssForReplay(cssText: string, cache: BuildCache): string { const selectors: string[] = []; const medias: string[] = []; - function getSelectors( - rule: StyleRules | Rule | Media | NodeWithOptionalRules, - ) { + function getSelectors(rule: Rule | Media | NodeWithRules) { if ('selectors' in rule && rule.selectors) { rule.selectors.forEach((selector: string) => { if (HOVER_SELECTOR.test(selector)) { From 937a55239c288cbb86635ba3b6eb99c2b7967463 Mon Sep 17 00:00:00 2001 From: Jesse Wang Date: Fri, 21 Jun 2024 14:44:51 -0700 Subject: [PATCH 12/12] Modify changeset: rotten-spies-enjoy.md --- .changeset/rotten-spies-enjoy.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.changeset/rotten-spies-enjoy.md b/.changeset/rotten-spies-enjoy.md index 5f5954fcac..4f6126ebb7 100644 --- a/.changeset/rotten-spies-enjoy.md +++ b/.changeset/rotten-spies-enjoy.md @@ -1,6 +1,5 @@ --- -'rrweb-snapshot': patch -'rrweb': patch +'@amplitude/rrweb': patch --- Ensure :hover works on replayer, even if a rule is behind a media query