Benchmark: rrweb-snapshot addHoverClass

Script Preparation code:

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

var NodeType;

(function (NodeType) {
  NodeType[NodeType["Document"] = 0] = "Document";
  NodeType[NodeType["DocumentType"] = 1] = "DocumentType";
  NodeType[NodeType["Element"] = 2] = "Element";
  NodeType[NodeType["Text"] = 3] = "Text";
  NodeType[NodeType["CDATA"] = 4] = "CDATA";
  NodeType[NodeType["Comment"] = 5] = "Comment";
})(NodeType || (NodeType = {}));

var _id = 1;
var tagNameRegex = RegExp('[^a-z1-6-_]');
var IGNORED_NODE = -2;

function genId() {
  return _id++;
}

function getValidTagName(element) {
  if (element instanceof HTMLFormElement) {
    return 'form';
  }

  var processedTagName = element.tagName.toLowerCase().trim();

  if (tagNameRegex.test(processedTagName)) {
    return 'div';
  }

  return processedTagName;
}

function getCssRulesString(s) {
  try {
    var rules = s.rules || s.cssRules;
    return rules ? Array.from(rules).map(getCssRuleString).join('') : null;
  } catch (error) {
    return null;
  }
}

function getCssRuleString(rule) {
  return isCSSImportRule(rule) ? getCssRulesString(rule.styleSheet) || '' : rule.cssText;
}

function isCSSImportRule(rule) {
  return 'styleSheet' in rule;
}

function extractOrigin(url) {
  var origin;

  if (url.indexOf('//') > -1) {
    origin = url.split('/').slice(0, 3).join('/');
  } else {
    origin = url.split('/')[0];
  }

  origin = origin.split('?')[0];
  return origin;
}

var URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")([^"]*)"|([^)]*))\)/gm;
var RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/|#).*/;
var DATA_URI = /^(data:)([^,]*),(.*)/i;

function absoluteToStylesheet(cssText, href) {
  return (cssText || '').replace(URL_IN_CSS_REF, function (origin, quote1, path1, quote2, path2, path3) {
    var filePath = path1 || path2 || path3;
    var maybeQuote = quote1 || quote2 || '';

    if (!filePath) {
      return origin;
    }

    if (!RELATIVE_PATH.test(filePath)) {
      return "url(" + maybeQuote + filePath + maybeQuote + ")";
    }

    if (DATA_URI.test(filePath)) {
      return "url(" + maybeQuote + filePath + maybeQuote + ")";
    }

    if (filePath[0] === '/') {
      return "url(" + maybeQuote + (extractOrigin(href) + filePath) + maybeQuote + ")";
    }

    var stack = href.split('/');
    var parts = filePath.split('/');
    stack.pop();

    for (var _i = 0, parts_1 = parts; _i < parts_1.length; _i++) {
      var part = parts_1[_i];

      if (part === '.') {
        continue;
      } else if (part === '..') {
        stack.pop();
      } else {
        stack.push(part);
      }
    }

    return "url(" + maybeQuote + stack.join('/') + maybeQuote + ")";
  });
}

function getAbsoluteSrcsetString(doc, attributeValue) {
  if (attributeValue.trim() === '') {
    return attributeValue;
  }

  var srcsetValues = attributeValue.split(',');
  var resultingSrcsetString = srcsetValues.map(function (srcItem) {
    var trimmedSrcItem = srcItem.trimLeft().trimRight();
    var urlAndSize = trimmedSrcItem.split(' ');

    if (urlAndSize.length === 2) {
      var absUrl = absoluteToDoc(doc, urlAndSize[0]);
      return absUrl + " " + urlAndSize[1];
    } else if (urlAndSize.length === 1) {
      var absUrl = absoluteToDoc(doc, urlAndSize[0]);
      return "" + absUrl;
    }

    return '';
  }).join(', ');
  return resultingSrcsetString;
}

function absoluteToDoc(doc, attributeValue) {
  if (!attributeValue || attributeValue.trim() === '') {
    return attributeValue;
  }

  var a = doc.createElement('a');
  a.href = attributeValue;
  return a.href;
}

function isSVGElement(el) {
  return el.tagName === 'svg' || el instanceof SVGElement;
}

function transformAttribute(doc, name, value) {
  if (name === 'src' || (name === 'href' || name === 'xlink:href') && value) {
    return absoluteToDoc(doc, value);
  } else if (name === 'srcset' && value) {
    return getAbsoluteSrcsetString(doc, value);
  } else if (name === 'style' && value) {
    return absoluteToStylesheet(value, location.href);
  } else {
    return value;
  }
}

function _isBlockedElement(element, blockClass, blockSelector) {
  if (typeof blockClass === 'string') {
    if (element.classList.contains(blockClass)) {
      return true;
    }
  } else {
    element.classList.forEach(function (className) {
      if (blockClass.test(className)) {
        return true;
      }
    });
  }

  if (blockSelector) {
    return element.matches(blockSelector);
  }

  return false;
}

function serializeNode(n, options) {
  var doc = options.doc,
      blockClass = options.blockClass,
      blockSelector = options.blockSelector,
      inlineStylesheet = options.inlineStylesheet,
      _a = options.maskInputOptions,
      maskInputOptions = _a === void 0 ? {} : _a,
      recordCanvas = options.recordCanvas;

  switch (n.nodeType) {
    case n.DOCUMENT_NODE:
      return {
        type: NodeType.Document,
        childNodes: []
      };

    case n.DOCUMENT_TYPE_NODE:
      return {
        type: NodeType.DocumentType,
        name: n.name,
        publicId: n.publicId,
        systemId: n.systemId
      };

    case n.ELEMENT_NODE:
      var needBlock = _isBlockedElement(n, blockClass, blockSelector);

      var tagName = getValidTagName(n);
      var attributes_1 = {};

      for (var _i = 0, _b = Array.from(n.attributes); _i < _b.length; _i++) {
        var _c = _b[_i],
            name = _c.name,
            value = _c.value;
        attributes_1[name] = transformAttribute(doc, name, value);
      }

      if (tagName === 'link' && inlineStylesheet) {
        var stylesheet = Array.from(doc.styleSheets).find(function (s) {
          return s.href === n.href;
        });
        var cssText = getCssRulesString(stylesheet);

        if (cssText) {
          delete attributes_1.rel;
          delete attributes_1.href;
          attributes_1._cssText = absoluteToStylesheet(cssText, stylesheet.href);
        }
      }

      if (tagName === 'style' && n.sheet && !(n.innerText || n.textContent || '').trim().length) {
        var cssText = getCssRulesString(n.sheet);

        if (cssText) {
          attributes_1._cssText = absoluteToStylesheet(cssText, location.href);
        }
      }

      if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
        var value = n.value;

        if (attributes_1.type !== 'radio' && attributes_1.type !== 'checkbox' && attributes_1.type !== 'submit' && attributes_1.type !== 'button' && value) {
          attributes_1.value = maskInputOptions[attributes_1.type] || maskInputOptions[tagName] ? '*'.repeat(value.length) : value;
        } else if (n.checked) {
          attributes_1.checked = n.checked;
        }
      }

      if (tagName === 'option') {
        var selectValue = n.parentElement;

        if (attributes_1.value === selectValue.value) {
          attributes_1.selected = n.selected;
        }
      }

      if (tagName === 'canvas' && recordCanvas) {
        attributes_1.rr_dataURL = n.toDataURL();
      }

      if (tagName === 'audio' || tagName === 'video') {
        attributes_1.rr_mediaState = n.paused ? 'paused' : 'played';
      }

      if (n.scrollLeft) {
        attributes_1.rr_scrollLeft = n.scrollLeft;
      }

      if (n.scrollTop) {
        attributes_1.rr_scrollTop = n.scrollTop;
      }

      if (needBlock) {
        var _d = n.getBoundingClientRect(),
            width = _d.width,
            height = _d.height;

        attributes_1 = {
          class: attributes_1.class,
          rr_width: width + "px",
          rr_height: height + "px"
        };
      }

      return {
        type: NodeType.Element,
        tagName: tagName,
        attributes: attributes_1,
        childNodes: [],
        isSVG: isSVGElement(n) || undefined,
        needBlock: needBlock
      };

    case n.TEXT_NODE:
      var parentTagName = n.parentNode && n.parentNode.tagName;
      var textContent = n.textContent;
      var isStyle = parentTagName === 'STYLE' ? true : undefined;

      if (isStyle && textContent) {
        textContent = absoluteToStylesheet(textContent, location.href);
      }

      if (parentTagName === 'SCRIPT') {
        textContent = 'SCRIPT_PLACEHOLDER';
      }

      return {
        type: NodeType.Text,
        textContent: textContent || '',
        isStyle: isStyle
      };

    case n.CDATA_SECTION_NODE:
      return {
        type: NodeType.CDATA,
        textContent: ''
      };

    case n.COMMENT_NODE:
      return {
        type: NodeType.Comment,
        textContent: n.textContent || ''
      };

    default:
      return false;
  }
}

function lowerIfExists(maybeAttr) {
  if (maybeAttr === undefined) {
    return '';
  } else {
    return maybeAttr.toLowerCase();
  }
}

function slimDOMExcluded(sn, slimDOMOptions) {
  if (slimDOMOptions.comment && sn.type === NodeType.Comment) {
    return true;
  } else if (sn.type === NodeType.Element) {
    if (slimDOMOptions.script && (sn.tagName === 'script' || sn.tagName === 'link' && sn.attributes.rel === 'preload' && sn.attributes.as === 'script')) {
      return true;
    } else if (slimDOMOptions.headFavicon && (sn.tagName === 'link' && sn.attributes.rel === 'shortcut icon' || sn.tagName === 'meta' && (lowerIfExists(sn.attributes.name).match(/^msapplication-tile(image|color)$/) || lowerIfExists(sn.attributes.name) === 'application-name' || lowerIfExists(sn.attributes.rel) === 'icon' || lowerIfExists(sn.attributes.rel) === 'apple-touch-icon' || lowerIfExists(sn.attributes.rel) === 'shortcut icon'))) {
      return true;
    } else if (sn.tagName === 'meta') {
      if (slimDOMOptions.headMetaDescKeywords && lowerIfExists(sn.attributes.name).match(/^description|keywords$/)) {
        return true;
      } else if (slimDOMOptions.headMetaSocial && (lowerIfExists(sn.attributes.property).match(/^(og|twitter|fb):/) || lowerIfExists(sn.attributes.name).match(/^(og|twitter):/) || lowerIfExists(sn.attributes.name) === 'pinterest')) {
        return true;
      } else if (slimDOMOptions.headMetaRobots && (lowerIfExists(sn.attributes.name) === 'robots' || lowerIfExists(sn.attributes.name) === 'googlebot' || lowerIfExists(sn.attributes.name) === 'bingbot')) {
        return true;
      } else if (slimDOMOptions.headMetaHttpEquiv && sn.attributes['http-equiv'] !== undefined) {
        return true;
      } else if (slimDOMOptions.headMetaAuthorship && (lowerIfExists(sn.attributes.name) === 'author' || lowerIfExists(sn.attributes.name) === 'generator' || lowerIfExists(sn.attributes.name) === 'framework' || lowerIfExists(sn.attributes.name) === 'publisher' || lowerIfExists(sn.attributes.name) === 'progid' || lowerIfExists(sn.attributes.property).match(/^article:/) || lowerIfExists(sn.attributes.property).match(/^product:/))) {
        return true;
      } else if (slimDOMOptions.headMetaVerification && (lowerIfExists(sn.attributes.name) === 'google-site-verification' || lowerIfExists(sn.attributes.name) === 'yandex-verification' || lowerIfExists(sn.attributes.name) === 'csrf-token' || lowerIfExists(sn.attributes.name) === 'p:domain_verify' || lowerIfExists(sn.attributes.name) === 'verify-v1' || lowerIfExists(sn.attributes.name) === 'verification' || lowerIfExists(sn.attributes.name) === 'shopify-checkout-api-token')) {
        return true;
      }
    }
  }

  return false;
}

function serializeNodeWithId(n, options) {
  var doc = options.doc,
      map = options.map,
      blockClass = options.blockClass,
      blockSelector = options.blockSelector,
      _a = options.skipChild,
      skipChild = _a === void 0 ? false : _a,
      _b = options.inlineStylesheet,
      inlineStylesheet = _b === void 0 ? true : _b,
      _c = options.maskInputOptions,
      maskInputOptions = _c === void 0 ? {} : _c,
      slimDOMOptions = options.slimDOMOptions,
      _d = options.recordCanvas,
      recordCanvas = _d === void 0 ? false : _d;
  var _e = options.preserveWhiteSpace,
      preserveWhiteSpace = _e === void 0 ? true : _e;

  var _serializedNode = serializeNode(n, {
    doc: doc,
    blockClass: blockClass,
    blockSelector: blockSelector,
    inlineStylesheet: inlineStylesheet,
    maskInputOptions: maskInputOptions,
    recordCanvas: recordCanvas
  });

  if (!_serializedNode) {
    console.warn(n, 'not serialized');
    return null;
  }

  var id;

  if ('__sn' in n) {
    id = n.__sn.id;
  } else if (slimDOMExcluded(_serializedNode, slimDOMOptions) || !preserveWhiteSpace && _serializedNode.type === NodeType.Text && !_serializedNode.isStyle && !_serializedNode.textContent.replace(/^\s+|\s+$/gm, '').length) {
    id = IGNORED_NODE;
  } else {
    id = genId();
  }

  var serializedNode = Object.assign(_serializedNode, {
    id: id
  });
  n.__sn = serializedNode;

  if (id === IGNORED_NODE) {
    return null;
  }

  map[id] = n;
  var recordChild = !skipChild;

  if (serializedNode.type === NodeType.Element) {
    recordChild = recordChild && !serializedNode.needBlock;
    delete serializedNode.needBlock;
  }

  if ((serializedNode.type === NodeType.Document || serializedNode.type === NodeType.Element) && recordChild) {
    if (slimDOMOptions.headWhitespace && _serializedNode.type === NodeType.Element && _serializedNode.tagName === 'head') {
      preserveWhiteSpace = false;
    }

    for (var _i = 0, _f = Array.from(n.childNodes); _i < _f.length; _i++) {
      var childN = _f[_i];
      var serializedChildNode = serializeNodeWithId(childN, {
        doc: doc,
        map: map,
        blockClass: blockClass,
        blockSelector: blockSelector,
        skipChild: skipChild,
        inlineStylesheet: inlineStylesheet,
        maskInputOptions: maskInputOptions,
        slimDOMOptions: slimDOMOptions,
        recordCanvas: recordCanvas,
        preserveWhiteSpace: preserveWhiteSpace
      });

      if (serializedChildNode) {
        serializedNode.childNodes.push(serializedChildNode);
      }
    }
  }

  return serializedNode;
}

function snapshot(n, options) {
  var _a = options || {},
      _b = _a.blockClass,
      blockClass = _b === void 0 ? 'rr-block' : _b,
      _c = _a.inlineStylesheet,
      inlineStylesheet = _c === void 0 ? true : _c,
      _d = _a.recordCanvas,
      recordCanvas = _d === void 0 ? false : _d,
      _e = _a.blockSelector,
      blockSelector = _e === void 0 ? null : _e,
      _f = _a.maskAllInputs,
      maskAllInputs = _f === void 0 ? false : _f,
      _g = _a.slimDOM,
      slimDOM = _g === void 0 ? false : _g;

  var idNodeMap = {};
  var maskInputOptions = maskAllInputs === true ? {
    color: true,
    date: true,
    'datetime-local': true,
    email: true,
    month: true,
    number: true,
    range: true,
    search: true,
    tel: true,
    text: true,
    time: true,
    url: true,
    week: true,
    textarea: true,
    select: true
  } : maskAllInputs === false ? {} : maskAllInputs;
  var slimDOMOptions = slimDOM === true || slimDOM === 'all' ? {
    script: true,
    comment: true,
    headFavicon: true,
    headWhitespace: true,
    headMetaDescKeywords: slimDOM === 'all',
    headMetaSocial: true,
    headMetaRobots: true,
    headMetaHttpEquiv: true,
    headMetaAuthorship: true,
    headMetaVerification: true
  } : slimDOM === false ? {} : slimDOM;
  return [serializeNodeWithId(n, {
    doc: n,
    map: idNodeMap,
    blockClass: blockClass,
    blockSelector: blockSelector,
    skipChild: false,
    inlineStylesheet: inlineStylesheet,
    maskInputOptions: maskInputOptions,
    slimDOMOptions: slimDOMOptions,
    recordCanvas: recordCanvas
  }), idNodeMap];
}

var commentre = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//g;

function parse(css, options) {
  if (options === void 0) {
    options = {};
  }

  var lineno = 1;
  var column = 1;

  function updatePosition(str) {
    var lines = str.match(/\n/g);

    if (lines) {
      lineno += lines.length;
    }

    var i = str.lastIndexOf('\n');
    column = i === -1 ? column + str.length : str.length - i;
  }

  function position() {
    var start = {
      line: lineno,
      column: column
    };
    return function (node) {
      node.position = new Position(start);
      whitespace();
      return node;
    };
  }

  var Position = function () {
    function Position(start) {
      this.start = start;
      this.end = {
        line: lineno,
        column: column
      };
      this.source = options.source;
    }

    return Position;
  }();

  Position.prototype.content = css;
  var errorsList = [];

  function error(msg) {
    var err = new Error(options.source + ':' + lineno + ':' + column + ': ' + msg);
    err.reason = msg;
    err.filename = options.source;
    err.line = lineno;
    err.column = column;
    err.source = css;

    if (options.silent) {
      errorsList.push(err);
    } else {
      throw err;
    }
  }

  function stylesheet() {
    var rulesList = rules();
    return {
      type: 'stylesheet',
      stylesheet: {
        source: options.source,
        rules: rulesList,
        parsingErrors: errorsList
      }
    };
  }

  function open() {
    return match(/^{\s*/);
  }

  function close() {
    return match(/^}/);
  }

  function rules() {
    var node;
    var rules = [];
    whitespace();
    comments(rules);

    while (css.length && css.charAt(0) !== '}' && (node = atrule() || rule())) {
      if (node !== false) {
        rules.push(node);
        comments(rules);
      }
    }

    return rules;
  }

  function match(re) {
    var m = re.exec(css);

    if (!m) {
      return;
    }

    var str = m[0];
    updatePosition(str);
    css = css.slice(str.length);
    return m;
  }

  function whitespace() {
    match(/^\s*/);
  }

  function comments(rules) {
    if (rules === void 0) {
      rules = [];
    }

    var c;

    while (c = comment()) {
      if (c !== false) {
        rules.push(c);
      }

      c = comment();
    }

    return rules;
  }

  function comment() {
    var pos = position();

    if ('/' !== css.charAt(0) || '*' !== css.charAt(1)) {
      return;
    }

    var i = 2;

    while ('' !== css.charAt(i) && ('*' !== css.charAt(i) || '/' !== css.charAt(i + 1))) {
      ++i;
    }

    i += 2;

    if ('' === css.charAt(i - 1)) {
      return error('End of comment missing');
    }

    var str = css.slice(2, i - 2);
    column += 2;
    updatePosition(str);
    css = css.slice(i);
    column += 2;
    return pos({
      type: 'comment',
      comment: str
    });
  }

  function selector() {
    var m = match(/^([^{]+)/);

    if (!m) {
      return;
    }

    return trim(m[0]).replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '').replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g, function (m) {
      return m.replace(/,/g, "\u200C");
    }).split(/\s*(?![^(]*\)),\s*/).map(function (s) {
      return s.replace(/\u200C/g, ',');
    });
  }

  function declaration() {
    var pos = position();
    var propMatch = match(/^(\*?[-#\/\*\\\w]+(\[[0-9a-z_-]+\])?)\s*/);

    if (!propMatch) {
      return;
    }

    var prop = trim(propMatch[0]);

    if (!match(/^:\s*/)) {
      return error("property missing ':'");
    }

    var val = match(/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)/);
    var ret = pos({
      type: 'declaration',
      property: prop.replace(commentre, ''),
      value: val ? trim(val[0]).replace(commentre, '') : ''
    });
    match(/^[;\s]*/);
    return ret;
  }

  function declarations() {
    var decls = [];

    if (!open()) {
      return error("missing '{'");
    }

    comments(decls);
    var decl;

    while (decl = declaration()) {
      if (decl !== false) {
        decls.push(decl);
        comments(decls);
      }

      decl = declaration();
    }

    if (!close()) {
      return error("missing '}'");
    }

    return decls;
  }

  function keyframe() {
    var m;
    var vals = [];
    var pos = position();

    while (m = match(/^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/)) {
      vals.push(m[1]);
      match(/^,\s*/);
    }

    if (!vals.length) {
      return;
    }

    return pos({
      type: 'keyframe',
      values: vals,
      declarations: declarations()
    });
  }

  function atkeyframes() {
    var pos = position();
    var m = match(/^@([-\w]+)?keyframes\s*/);

    if (!m) {
      return;
    }

    var vendor = m[1];
    m = match(/^([-\w]+)\s*/);

    if (!m) {
      return error('@keyframes missing name');
    }

    var name = m[1];

    if (!open()) {
      return error("@keyframes missing '{'");
    }

    var frame;
    var frames = comments();

    while (frame = keyframe()) {
      frames.push(frame);
      frames = frames.concat(comments());
    }

    if (!close()) {
      return error("@keyframes missing '}'");
    }

    return pos({
      type: 'keyframes',
      name: name,
      vendor: vendor,
      keyframes: frames
    });
  }

  function atsupports() {
    var pos = position();
    var m = match(/^@supports *([^{]+)/);

    if (!m) {
      return;
    }

    var supports = trim(m[1]);

    if (!open()) {
      return error("@supports missing '{'");
    }

    var style = comments().concat(rules());

    if (!close()) {
      return error("@supports missing '}'");
    }

    return pos({
      type: 'supports',
      supports: supports,
      rules: style
    });
  }

  function athost() {
    var pos = position();
    var m = match(/^@host\s*/);

    if (!m) {
      return;
    }

    if (!open()) {
      return error("@host missing '{'");
    }

    var style = comments().concat(rules());

    if (!close()) {
      return error("@host missing '}'");
    }

    return pos({
      type: 'host',
      rules: style
    });
  }

  function atmedia() {
    var pos = position();
    var m = match(/^@media *([^{]+)/);

    if (!m) {
      return;
    }

    var media = trim(m[1]);

    if (!open()) {
      return error("@media missing '{'");
    }

    var style = comments().concat(rules());

    if (!close()) {
      return error("@media missing '}'");
    }

    return pos({
      type: 'media',
      media: media,
      rules: style
    });
  }

  function atcustommedia() {
    var pos = position();
    var m = match(/^@custom-media\s+(--[^\s]+)\s*([^{;]+);/);

    if (!m) {
      return;
    }

    return pos({
      type: 'custom-media',
      name: trim(m[1]),
      media: trim(m[2])
    });
  }

  function atpage() {
    var pos = position();
    var m = match(/^@page */);

    if (!m) {
      return;
    }

    var sel = selector() || [];

    if (!open()) {
      return error("@page missing '{'");
    }

    var decls = comments();
    var decl;

    while (decl = declaration()) {
      decls.push(decl);
      decls = decls.concat(comments());
    }

    if (!close()) {
      return error("@page missing '}'");
    }

    return pos({
      type: 'page',
      selectors: sel,
      declarations: decls
    });
  }

  function atdocument() {
    var pos = position();
    var m = match(/^@([-\w]+)?document *([^{]+)/);

    if (!m) {
      return;
    }

    var vendor = trim(m[1]);
    var doc = trim(m[2]);

    if (!open()) {
      return error("@document missing '{'");
    }

    var style = comments().concat(rules());

    if (!close()) {
      return error("@document missing '}'");
    }

    return pos({
      type: 'document',
      document: doc,
      vendor: vendor,
      rules: style
    });
  }

  function atfontface() {
    var pos = position();
    var m = match(/^@font-face\s*/);

    if (!m) {
      return;
    }

    if (!open()) {
      return error("@font-face missing '{'");
    }

    var decls = comments();
    var decl;

    while (decl = declaration()) {
      decls.push(decl);
      decls = decls.concat(comments());
    }

    if (!close()) {
      return error("@font-face missing '}'");
    }

    return pos({
      type: 'font-face',
      declarations: decls
    });
  }

  var atimport = _compileAtrule('import');

  var atcharset = _compileAtrule('charset');

  var atnamespace = _compileAtrule('namespace');

  function _compileAtrule(name) {
    var re = new RegExp('^@' + name + '\\s*([^;]+);');
    return function () {
      var pos = position();
      var m = match(re);

      if (!m) {
        return;
      }

      var ret = {
        type: name
      };
      ret[name] = m[1].trim();
      return pos(ret);
    };
  }

  function atrule() {
    if (css[0] !== '@') {
      return;
    }

    return atkeyframes() || atmedia() || atcustommedia() || atsupports() || atimport() || atcharset() || atnamespace() || atdocument() || atpage() || athost() || atfontface();
  }

  function rule() {
    var pos = position();
    var sel = selector();

    if (!sel) {
      return error('selector missing');
    }

    comments();
    return pos({
      type: 'rule',
      selectors: sel,
      declarations: declarations()
    });
  }

  return addParent(stylesheet());
}

function trim(str) {
  return str ? str.replace(/^\s+|\s+$/g, '') : '';
}

function addParent(obj, parent) {
  var isNode = obj && typeof obj.type === 'string';
  var childParent = isNode ? obj : parent;

  for (var _i = 0, _a = Object.keys(obj); _i < _a.length; _i++) {
    var k = _a[_i];
    var value = obj[k];

    if (Array.isArray(value)) {
      value.forEach(function (v) {
        addParent(v, childParent);
      });
    } else if (value && _typeof(value) === 'object') {
      addParent(value, childParent);
    }
  }

  if (isNode) {
    Object.defineProperty(obj, 'parent', {
      configurable: true,
      writable: true,
      enumerable: false,
      value: parent || null
    });
  }

  return obj;
}
var HOVER_SELECTOR = /([^\\]):hover/g;
//css = '.max:hover{color:pink;}.sam:hover .vla{color: orange;}.x:not(:hover) div{color: pink} .max:hover{border:1px solid pink;}'
css = '.max:hover{color:pink;}.sam:hover .vla{color: orange;}.x:not(:hover) div{color: pink}'

Tests:

default
function addHoverClass(cssText) { var ast = parse(cssText, { silent: true }); if (!ast.stylesheet) { return cssText; } ast.stylesheet.rules.forEach(function (rule) { if ('selectors' in rule) { (rule.selectors || []).forEach(function (selector) { if (HOVER_SELECTOR.test(selector)) { var newSelector = selector.replace(HOVER_SELECTOR, '$1.\\:hover'); cssText = cssText.replace(selector, selector + ", " + newSelector); } }); } }); return cssText; } addHoverClass(css)
replaceAll
function addHoverClass(cssText) { var ast = parse(cssText, { silent: true }); if (!ast.stylesheet) { return cssText; } const modifications = {}; ast.stylesheet.rules.forEach(function (rule) { if ('selectors' in rule) { (rule.selectors || []).forEach(function (selector) { if (HOVER_SELECTOR.test(selector)) { var newSelector = selector.replace(HOVER_SELECTOR, '$1.\\:hover'); modifications[selector] = selector + ", " + newSelector } }); } }); Object.keys(modifications).forEach((selector)=>{ cssText = cssText.replaceAll(selector, modifications[selector]) }) return cssText; } addHoverClass(css)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
default
replaceAll

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

The code you provided implements two different strategies for adding  `:hover` pseudo-classes to existing CSS selectors within a string. Let's break down each approach and discuss their performance implications:

**1. `default` Approach:**

*   This method directly modifies the `cssText` string by iterating through the parsed CSS AST (Abstract Syntax Tree).
*   It uses a regular expression (`HOVER_SELECTOR`) to identify selectors containing ":hover".
*   For each match, it creates a new selector with the `\:hover` added and inserts it after the original selector within the `cssText`.

**2. `replaceAll` Approach:**

*   This approach also parses the CSS string into an AST but uses a dictionary (`modifications`) to store pairs of original selectors and their modified versions (with the `:hover` pseudo-class).
*   It iterates through the identified selectors, creates the modified versions, and stores them in the `modifications` dictionary.
*   Finally, it uses `replaceAll()` (likely a custom method or library function) to replace all occurrences of the original selectors with their modified counterparts from the dictionary.

**Performance Considerations:**

*   The `default` approach might have slightly better performance due to its direct string manipulation. 
*   However, the `replaceAll` approach could potentially be more efficient if you are performing many similar modifications across different CSS strings. The pre-calculated `modifications` dictionary can reduce the overhead of repeated regex matching and string construction.

**Other Factors:**

*   The performance will also depend on factors like the complexity of your CSS, the size of the input string, and the specific implementations of `parse()` and `replaceAll()`.
*   It's essential to benchmark both approaches with your specific use case and data to determine the most efficient solution.

Let me know if you have any other questions or would like a more detailed analysis of a particular aspect.

Related benchmarks:

rrweb-snapshot addHoverClass (version: 0)

Comparing performance of: default vs replaceAll

Created: 5 years ago by: Guest

Jump to the latest result

default

replaceAll

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):