Does somebody have a good method to turn "raw" CSS into DOM style Properties? For example:

**Input:**

```
const raw_css = `

    h1 {
      color: red;
      display: block;
    }

    .myClass {
      background: blue;
      position: absolute;
      opacity: .3;
    }

`;

```

Should be turned into:

**Output:**

```
document.querySelector("h1").style.color = "red";
document.querySelector("h1").style.display = "block";

document.querySelector(".myClass").style.background = "blue";
document.querySelector(".myClass").style.position = "absolute";
document.querySelector(".myClass").style.opacity = ".3";

```

So in some way, it should take the raw CSS from a const/let/var and turn it into multiple rules. For sanity, it would be great if the elements are divided by a new line, like the output example. I've tried to split them by first getting the content between the brackets `{ ... }` and separating the lines by splitting the `;`... But I don't have any great idea to link the elements to the style rules. I've also searched in Google for similar options, but I didn't seem to find any.

I hope that someone will be able to give me some tips. I know that I didn't provide much and that StackOverflow isn't a code-writing service, but I'm really stuck on this one.

Any help is welcome!

(Edit: I am aware that not every style property can be directly translated into a DOM Style Property. Like: border-top == borderTop. But I could write a simple conditional script that replaces those "non-translatable" properties)