how to convert object to valid css styles in javascript?

Question

i have an object and need to convert it into css, ex:

     const options = {
            style: {
                base: {
                    background: 'red',
                    ':hover': {
                        background: 'green',
                    },
                },
            },
        };

i used package jso-to-css works fine but in case nested object like hover return [Object]

base{background:red;:hover:[object Object]}

instead of

base{background:red;}
base:hover{background: green;}

also, any suggestion compatible with react is welcomed.

Answer 1

If you change yor data structure - you can create style rules easily frm an object or JSON etc.

Knowing the anatomy of a style rule has three parts - selector / property and value - you can create a data structure to allow for these to be parsed into strings and then inserted either into an existing style sheet - or you can create an entirely new stylesheet, append it to the document head and then insert the rules.

You will need to create a plan to allow the code to know about nesting - for example - I am using pseudostates as a child array to allow the styling of the base element - and iterate over the pseudostates array and for each - pass it to the same createStyle function as the original base element, and create their style rules... you can do this to any depth and with any type of styling - you jsut need to plan for it and update the structure of the data to match the planned styling.

In the following - i am setting the background color and text color of the p element and then changing both on the hover. You could extend this to have the type of selector (id or class) - but will leave that for further development. This includes the "#" or the "." in the selector.

 const options = [{ selector: '.base', declarations: [{ property: 'background', value: 'red', },{ property: 'color', value: 'white', }], pseudoStates:[{ selector: ':hover', declarations: [{ property: 'background', value: 'green' },{ property: 'color', value: 'orange' },{ property: 'cursor', value: 'pointer' }] }] }, { selector: '#extra', declarations: [{ property: 'background', value: 'aqua', },{ property: 'color', value: 'black', }], pseudoStates:[{ selector: ':hover', declarations: [{ property: 'background', value: 'blue' },{ property: 'color', value: 'white' }] }] }] options.forEach(function(option){ createStyleRule(option.selector, option.declarations); option.pseudoStates.forEach(function(pS){ createStyleRule(option.selector + pS.selector, pS.declarations); }) }); function createStyleRule(selector, declarations){ let styleDeclarations = []; declarations.forEach(function(dec){ styleDeclarations.push( dec.property +": " + dec.value); }) let styleRule = selector + " {" + styleDeclarations.join("; ") + "}"; document.styleSheets[0].insertRule(styleRule, 0); }

 <p class="base">This is the base element</p> <p id="extra">This is the extra element</p>