Неправильный порядок объявлений CSS при использовании all: unset и cssText. ⇐ CSS

[Anonymous]

Я пытаюсь скопировать стили из заголовка документа в окно «картинка в картинке». Приложение использует стежки js, которые напрямую манипулируют CSSOM. Поэтому мне пришлось скопировать все стили из StyleSheetList, что в основном работает, но обнаружилась одна проблема. Когда есть all: unset, он распространяется на все объявления и имеет неправильный порядок. Все тестирование в Chrome.
Например

Код: Выделить всё

button {
all: unset;
border-radius: 12px;
}

копируется следующим образом:

Код: Выделить всё

button {
...
block-size: unset;
border-block: unset;
border: unset;
border-radius: 12px;                   cssText).join("");
pipDocument.head.appendChild(style);
} catch (e) {}
});

Ссылка на документацию:
https://developer.mozilla.org/en-US/doc ... eSheetList
https://developer.mozilla .org/en-US/docs/Web/API/CSSRule/cssText
Это видно в этом фрагменте:

Код: Выделить всё

const styleEl = document.createElement("style");
document.head.appendChild(styleEl);
const sheet = styleEl.sheet;
sheet.insertRule(
".test1 { all: unset; background-color: lightblue; border-radius: 12px; padding: 12px; }",
sheet.cssRules.length
);

const allCSS = [...document.styleSheets]
.map((styleSheet) => {
try {
return [...styleSheet.cssRules].map((rule) => rule.cssText).join("");
} catch (e) {}
})
.filter(Boolean)
.join("\n");

const modifiedCSS = allCSS.replace(".test1", ".test2");

const newStyleEl = document.createElement("style");
newStyleEl.innerHTML = modifiedCSS;
document.head.appendChild(newStyleEl);

const divElement = document.createElement("div");
divElement.innerHTML = `${allCSS}`;
document.body.appendChild(divElement);

Код: Выделить всё

test
test copied

Подробнее здесь: https://stackoverflow.com/questions/793 ... nd-csstext