JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test hi" id="test" style="color:red">1</div>
<div id="test-id-only" style="color:blue">2</div>
<div class="test-2" style="color:#fff; background: #333">3</div>
<div class="test-3 bad shit" style="color:#fff; background: green">4</div>
<div style="color:#fff; background: red">без класса и ID</div>

JavaScript

function makeid(length) {
   var result           = '';
   var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
   var charactersLength = characters.length;
   for ( var i = 0; i < length; i++ ) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
   }
   return result;
   // Функция отсюда: https://stackoverflow.com/questions/1349404/generate-random-string-characters-in-javascript 
}


var elements = document.querySelectorAll("*[style]");

Array.prototype.forEach.call(elements, function(element) {

  if ( (!element.hasAttribute('class')) && (!element.hasAttribute('id')) ) {
  	element.classList.add("class-" + makeid(5));
  }

	let elementID = '';  
  if (element.hasAttribute('id')) {
  	elementID = '#' + `${element.id}`;
  }
  
  let elementClasses = '';
	if (element.hasAttribute('class')) {
  	elementClasses = '.' + `${element.classList}`.replace(/ /g, '\.');
  }
  
  let elementCSS = `${element.getAttribute("style")}`;

  let newStyleElement = document.createElement('style');
  let newStyleElementContent = elementID + elementClasses + "{" + elementCSS + "}";

  newStyleElement.innerHTML = `${newStyleElementContent}`;
  element.after(newStyleElement);
  element.removeAttribute("style");
});