I have multiple style blocks. How do I use adopted style sheets to append the multiple style sheets? For example, I have

.test {
   background-color: #fff;
}
.wow {
  border: 2px solid red;
}

and then another stored in another variable

.test2 {
   background-color: #fff;
}
.wow2 {
  border: 2px solid red;
}

Should I be calling replaceSync twice?

Here's what I tried

const sheet = new CSSStyleSheet();
sheet.replaceSync(styles1);

sheet.insertRule(styles2);

document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];