[Nexus]

Необязательно взаимодействовать с CSSRule, чтобы изменять стили, можно сделать как-то так:

<style>
.square {
  --bg: red;
  
  display: inline-block;
  width: 20px;
  height: 20px;
  background: var(--bg);
}
</style>
<style id="runtime-styles"></style>

<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

<div>
  <button type="button">Switch color</button>
</div>

<script>
var color = 'red';

document.querySelector('button')?.addEventListener('click', () => {
  const selector = '#runtime-styles';
  const styleNode = document.querySelector(selector);
  if (!styleNode) {
  	return void console.error(`Element [${selector}] not found`);
  }
  
  styleNode.textContent = `.square {--bg: ${color = (color === 'red' ? 'blue' : 'red')}}`;
});
</script>

На MDN пишут, что cssStyleSheet.insertRule [...] теперь deprecated

Что-то не вижу такого.
https://developer.mozilla.org/en-US/...ule/insertRule