Update name of function to reflect that 'addHoverClass' does more tha…

…n just :hover. I believe this function is only exported for the purposes of use in the tests
eoghanmurray · Mar 21, 2024 · 343ea19 · 343ea19
1 parent 2fb1f37
commit 343ea19
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 20 deletions.
diff --git 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
@@ -66,7 +66,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;
 
@@ -224,7 +224,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') {
           node.appendChild(doc.createTextNode(value));
@@ -369,7 +369,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
@@ -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));