есть ли пакет, который превращает встроенные стили в классы css

Question

Есть ли пакет, который, если я передам

<p style="width: 500px; height: 500px"> Hello World </p>

, вернется

<p class="foo"> Hello World </p>

.foo {
  width: 500px;
  height: 500px;
}

Answer 1

Используйте JS, чтобы сделать это. Захватите все элементы с тегом стиля

var els = document.querySelectorAll('[style]');

L oop через все элементы, присвойте им случайный класс и добавьте синтаксис в тег стиля

for (i = 0; i < els.length; i++) {
  var rndClass = getUniqueRandomClass();

  var style = els[i].style;
  var returnStyle = "." + rndClass + "{" + style + "}";
  document.querySelector('style').textContent += returnStyle;

  els[i].classList.add(rndClass);
  els[i].removeAttribute("style");
}