Как я могу изменить правила таблицы стилей, чтобы добавить селектор потомков в начало каждого правила, используя JavaScript?

Я бы порекомендовал отправить этот файл sass препроцессору на бэкэнд. Затем вы можете импортировать этот CSS (как scss) и сделать #uniqueid { @import 'user-styles.scss' }. Манипулирование строкой JS на интерфейсе, вероятно, будет далеко не пуленепробиваемым

Так как это был один раз, я лично делал бы это быстро и грязно ...

https://www.sassmeister.com/

#uniqueid {
 // paste all your css
}

Если это будет более регулярно, вы определенно захотите внедрить препроцессор в процесс сборки. [114 ]

Простой подход: если вы получите тег стиля в виде строки и разделите его на} и добавите свой #uniqueid в начале каждого элемента массива. Впоследствии вам просто нужно перебрать массив, преобразовать его обратно в одну строку и добавить его в HTML.

Я не знаю, есть ли у вас jQuery, но решение в jQuery будет выглядеть так. Это работает для каждого CSS-кода. Вы можете украсить вывод, если хотите, с некоторыми дополнительными настройками.

var style = $('style').text();
style = style.split('}');
var newStyle = '';
$.each(style,function(i,element){
    newStyle = newStyle + ' #uniqueid '+element+' } ';
})
$('style').text(newStyle);