fix: get correct index positions in nested CSS rules for StyleDeclara…

[juliecheng]

…tion events

player would 💥 in the following scenario:

@media (min-width: 800px) {
   .rule1 { top: 0px; }
   .rule2 { top: 0px; }
   .rule3 { top: 0px; }
}

• site has nested CSS rules (see above)
• at some point someCSSRule.style.setProperty is called (this mutation would be a rrweb StyleDeclaration event)

using the example above, i call rule3.style.setProperty('top', '50px') on the site to update the css rule style
what happens:

• record side: the StyleDeclaration mutation event is { ...index: [2], set: { property: 'top', value: '50px'} } instead of index: [0, 2] (2 is incorrect because it is nested within @media)
• replay side: 2 issues
  1. wasn't sure why was position.slice(2) was being passed in to getNestedRule. in my example, it would just return an empty array
  2. getNestedRule is recursively calling rule.cssRules[position[1]].cssRules which in my example would be rule3.cssRules. rule3 is a CSSStyleRule tho so it wouldn't contain anything in cssRules

[kode-toad]

Failed pendo.io/jira-ref check. Please correct Jira references in the following commits:

10906d3
89c26b1

[kode-toad]

Failed pendo.io/jira-ref check. Please correct Jira references in the following commits:

da7615a

[kode-toad]

Failed pendo.io/jira-ref check. Please correct Jira references in the following commits:

da7615a
ab0f2c3

[arivyiii]

[merge]

[kode-toad]

Branch jc-fix-nested-css-rules deleted