Turn raw CSS into Javascript DOM style Property

Question

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)

Search for css inliner libraries

Arye Eidelman
– Arye Eidelman

2021-08-16 00:31:58 +00:00
Commented Aug 16, 2021 at 0:31 — Arye Eidelman
– Arye Eidelman, Commented Aug 16, 2021 at 0:31

Spectric · Accepted Answer · 2021-08-16 00:32:13Z

3

You can try:

splitting the string by newlines (\n)
looping through each line and checking whether it matches the regex .+{.
- if it does, we know it's a selector. Extract the selector and store it in a variable
- otherwise, check whether the line is blank or is a closing curly brace. If it is neither, extract the property and value of the CSS property declaration by splitting by : and trimming the result

const selectorRegex = /.+{/gm;
const raw_css = `

    h1 {
      color: red;
      display: block;
    }
    
    .myClass {
      background: blue;
      position: absolute;
      opacity: .3;
    }

`;

const lines = []
const split = raw_css.split("\n");
var lastSelector;
split.forEach(e => {
  const trimmed = e.trim();
  if (selectorRegex.test(e)) {
    lastSelector = e.replace("{", "").trim()
  } else if (trimmed != "}" && trimmed.length > 0) {
    const propValue = e.split(":");
    const property = propValue[0].trim();
    const value = propValue[1].trim();
    lines.push(`document.querySelector("${lastSelector}").style.${property} = "${value}"`);
  }
})
console.log(lines);

answered Aug 16, 2021 at 0:32

Spectric

32.6k6 gold badges32 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mik Roe Over a year ago

Oh this is perfect! Exactly what I was looking for. Using regex is a really smart idea, I don't know why I didn't think of that... Thank you very much for your time and help.

HKG · Accepted Answer · 2021-08-16 00:33:13Z

1

CSS in JS supports converting CSS to their JavaScript format with their CLI Tool

Install the JSS CLI tool using:

npm install jss-cli -g

And use it like so:

jss convert source.css

Or you can use npx to run it once:

npx jss convert source.css

answered Aug 16, 2021 at 0:33

HKG

3263 silver badges9 bronze badges

Collectives™ on Stack Overflow

Turn raw CSS into Javascript DOM style Property

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related