React-JS convert CSS-in-JS to CSS string

Question

In a react project, the end user can generate CSS using a tool.

I found how to generate JS object and pass it to style={} attribute but I want to convert the generated JS object to CSS string, so I can save it and use it in other places.

I want to convert JSObject to CSS:

JSObject [Sample - Input]

JSObject: {
  lineHeight: 1,
  fontSize: 15,
  padding: 0,
  margin: 0,
  msBoxShadow: '0 0 1px 1px #000',
  MozBoxShadow: '0 0 1px 1px #000',
  OBoxShadow: '0 0 1px 1px #000',
  WebkitBoxShadow: '0 0 1px 1px #000',
  boxShadow: '0 0 1px 1px #000'
}

Expected CSS [Sample - Output]

.cssClass{
    line-height: 1;
    font-size: 15px;
    padding: 0px;
    margin: 0px;
    box-shadow: rgb(0, 0, 0) 0px 0px 1px 1px;
}

@monssef Thanks but I want to convert Javascript object that generated using CSS-in-JS or JSS libraries to normal css [not JSON] — Mohammed Tawfik
– Mohammed Tawfik, Commented Dec 14, 2017 at 16:52

Mohammed Tawfik · Accepted Answer · 2017-12-14 17:37:13Z

9

I found a solution for my question and posting here for future searcher.

I made this simple function to convert JS object to CSS string:

export const JSToCSS = (JS) => {
    let cssString = "";
    for (let objectKey in JS) {
        cssString += objectKey.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`) + ": " + JS[objectKey] + ";\n";
    }

    return cssString;
};

answered Dec 14, 2017 at 17:37

Mohammed Tawfik

6091 gold badge9 silver badges23 bronze badges

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

3 Comments

monssef Over a year ago

what about the prefixes ?

Mohammed Tawfik Over a year ago

@monssef when using the simple function I made it will convert this MozBoxShadow to the css prefix -moz-box-shadow and this works perfectly on my project, thanks :)

E. Berke Karagöz Over a year ago

I have made a codepen based on this codepen.io/BerkeKaragoz/pen/xxWRYdY

Valery · Accepted Answer · 2023-09-25 11:40:48Z

1

While the accepted answer is a great and simple solution to the problem, for completeness I would also want to suggest the css NPM package and its stringify method that adds features that someone visiting this question may be interested in.

answered Sep 25, 2023 at 11:40

Valery

7537 silver badges22 bronze badges

Collectives™ on Stack Overflow

React-JS convert CSS-in-JS to CSS string

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related