Insert a rule right after an unsupported rule will fail

[kof]

It will fail because we seem to still increase the index, which will result in something like "Failed to execute 'insertRule' on 'CSSStyleSheet': The index provided (10) is larger than the maximum index (9)."

Steps

1. insert an unsupported rule, for exaple use some weird selector or anything that is unsupported in the current browser:

".Hook-css-4-0-1-6:focus-visible {
  outline: 0;
  z-index: 1;
  box-shadow: 0px 0px 0px 1px #4C98F1;
}"

1. Insert a valid rule after that
2. Both should be using insertRule API (function rule)