Simplify the hover replacement function

eoghanmurray · Jul 16, 2024 · 6e33e1f · 6e33e1f
1 parent 40bbc25
commit 6e33e1f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 52 deletions.
diff --git a/.changeset/simplifify-hover-replacement.md b/.changeset/simplifify-hover-replacement.md
@@ -0,0 +1,6 @@
+---
+"rrweb-snapshot": patch
+"rrweb": patch
+---
+
+Slight simplification to how we replace :hover after #1458
diff --git a/packages/rrweb-snapshot/src/css.ts b/packages/rrweb-snapshot/src/css.ts
@@ -17,7 +17,7 @@ const mediaSelectorPlugin: AcceptedPlugin = {
   },
 };
 
-// Adapted from https://github.com/giuseppeg/postcss-pseudo-classes/blob/master/index.js
+// Simplified from https://github.com/giuseppeg/postcss-pseudo-classes/blob/master/index.js
 const pseudoClassPlugin: AcceptedPlugin = {
   postcssPlugin: 'postcss-hover-classes',
   prepare: function () {
@@ -28,58 +28,9 @@ const pseudoClassPlugin: AcceptedPlugin = {
           return;
         }
         fixed.push(rule);
-
         rule.selectors.forEach(function (selector) {
-          if (!selector.includes(':')) {
-            return;
-          }
-
-          const selectorParts = selector.replace(/\n/g, ' ').split(' ');
-          const pseudoedSelectorParts: string[] = [];
-
-          selectorParts.forEach(function (selectorPart) {
-            const pseudos = selectorPart.match(/::?([^:]+)/g);
-
-            if (!pseudos) {
-              pseudoedSelectorParts.push(selectorPart);
-              return;
-            }
-
-            const baseSelector = selectorPart.substr(
-              0,
-              selectorPart.length - pseudos.join('').length,
-            );
-
-            const classPseudos = pseudos.map(function (pseudo) {
-              const pseudoToCheck = pseudo.replace(/\(.*/g, '');
-              if (pseudoToCheck !== ':hover') {
-                return pseudo;
-              }
-
-              // Ignore pseudo-elements!
-              if (pseudo.match(/^::/)) {
-                return pseudo;
-              }
-
-              // Kill the colon
-              pseudo = pseudo.substr(1);
-
-              // Replace left and right parens
-              pseudo = pseudo.replace(/\(/g, '\\(');
-              pseudo = pseudo.replace(/\)/g, '\\)');
-
-              return '.' + '\\:' + pseudo;
-            });
-
-            pseudoedSelectorParts.push(baseSelector + classPseudos.join(''));
-          });
-
-          addSelector(pseudoedSelectorParts.join(' '));
-
-          function addSelector(newSelector: string) {
-            if (newSelector && newSelector !== selector) {
-              rule.selector += ',\n' + newSelector;
-            }
+          if (selector.includes(':hover')) {
+            rule.selector += ',\n' + selector.replace(/:hover/g, '.\\:hover');
           }
         });
       },