Problem while converting javascript object into css styles

Question

I am trying to convert javascript into css styles , I was able to convert into css format but , There was problem . I was unable to remove double quort " or ' symbol.

var out =  console.log, 
    a   =  {
      ".time":{
        "color":"red",
        'background-color':'yellow',
         height:'10%',
         zindex:1
      },
      '#next':{
        'colour':'#eee'
      },
      div:{
        width:10,
        '-webkit-hyphenate-character': 'auto'
      },
      "@keyframes example" : {
          "0%" :  {"background-color": 'red'},
          "25%" :  {"background-color": 'yellow'}
       }
    }

var toStyles = function(object){
  var store = '';
  Object.keys(object).forEach(name => {
       var value = object[name];
       if(typeof value == 'object'){
         
       }
       var style = name+':'+JSON.stringify(value)+';';
       store = store + style;
  });
  console.log(store)
}

toStyles(a)

My output:-

.time{
       "color":"red",
       "background-color":"yellow",
        "height":"10%",
        "zindex":1
     };

#next{
     "colour":"#eee"
 };

div{
    "width":10,
    "-webkit-hyphenate-character":"auto"
};
@keyframes example{
    "0%":{"background-color":"red"},
    "25%":{"background-color":"yellow"}
};

How can i convert objects like this into proper css styles.

Please Help me

If this helps: stackoverflow.com/questions/41303191/…

Alvin
– Alvin

2019-05-06 15:45:10 +00:00
Commented May 6, 2019 at 15:45 — Alvin
– Alvin, Commented May 6, 2019 at 15:45

nirks · Accepted Answer · 2019-05-08 05:00:45Z

I was also looking for same thing thanks for posting this question . This can handle everything you want that you have mentioned on your question.

    var a   =  {
      'div':{
        "width": "100px",
        "height": "100px",
        "background": "red",
        "position": "relative",
        "-webkit-animation": "mymove 5s infinite", 
        "animation": "mymove 5s infinite"
      },
      '@-webkit-keyframes mymove':{
         '0%':{'top': '0px;'},
         '25%':{'top': '200px;'},
         '75%':  {'top': '50px'},
         '100%': {'top': '100px'},
      },
      '@keyframes mymove':{
        '0%'   :  {'top': '0px'},
        '25%'  :  {'top': '200px'},
        '75%'  :  {'top': '50px'},
        '100%' : {'top': '100px'}
      }
    }

    String.prototype.replaceAt=function(index, replacement) {
       return this.substr(0, index) + replacement+ this.substr(index + 
       replacement.length);
    }

   var indexes = function(string , char){
      var result = []; 
      for(var i = 0 ; i < string.length ; i++ ){
         var pos1 = string.substr( i , char.length);
         if(pos1 == char){
           result.push(i)
         }
      }
      return(result)
    }

    var maker = function(value){
        var a     =  JSON.stringify(value).replace(/"/g,'').replace(/,/g,'; '),
            index =  indexes(a,'%:')
            index2 =  indexes(a,'};');

        if(index && index.length > 0){
           for(var i  = 0 ; i < index.length ; i++){
             a = a.replaceAt(index[i]+1, " "); 
           }
         }
         if(index2 && index2.length > 0){
           for(var i  = 0 ; i < index2.length ; i++){
             a = a.replaceAt(index2[i]+1,' '); 
           }
         }
         return a;
    };

    var toStyles = function(object){
       var store = '';
       Object.keys(object).forEach(name => {
          var value = object[name];
          var style = name+' '+maker(value)+'\n';
           store = store + style;
       });
       return(store)
    }

    console.log(toStyles(a))

I have created github repo for future progress for this problem please contribute to make it more better that can handle every kind to transformation.

Github Repo for this Problem

junvar · Accepted Answer · 2019-05-06 15:49:33Z

0

This should get you started, but note it doesn't handle nested properties (e.g. keyframes), but that's trivial to add on as a recursive call.

let input = {
  ".time": {
    "color": "red",
    'background-color': 'yellow',
    height: '10%',
    zindex: 1
  },
  '#next': {
    'colour': '#eee'
  },
  div: {
    width: 10,
    '-webkit-hyphenate-character': 'auto'
  },
  "@keyframes example": {
    "0%": {"background-color": 'red'},
    "25%": {"background-color": 'yellow'}
  }
};

let output = Object.entries(input).map(([selector, properties]) => `${selector} {\n${Object.entries(properties).map(([name, value]) => `\t${name}: "${value}";`).join('\n')}\n}`).join('\n\n');

console.log(output);

answered May 6, 2019 at 15:49

junvar

11.7k2 gold badges35 silver badges52 bronze badges

1 Comment

Mina Pandey Over a year ago

@keyframes example { 0%: "[object Object]"; 25%: "[object Object]"; } here your problem is. [object Object]…

Aya Salama · Accepted Answer · 2019-05-06 15:49:41Z

0

you can use regex to replace every " with an empty string

but you will still have other problems, you are separating css rules with , which should be ; and you add : after the selector which shouldn't be there

you can replace your code with this, and it should work

var style = name+' '+JSON.stringify(value).replace(/"/g,'').replace(/,/g,'; ')+'\n';

var a   =  {
      ".time":{
        "color":"red",
        'background-color':'yellow',
         height:'10%',
         zindex:1
      },
      '#next':{
        'colour':'#eee'
      },
      div:{
        width:10,
        '-webkit-hyphenate-character': 'auto'
      },
      "@keyframes example" : {
          "0%" :  {"background-color": 'red'},
          "25%" :  {"background-color": 'yellow'}
       }
    }

var toStyles = function(object){
  var store = '';
  Object.keys(object).forEach(name => {
       var value = object[name];
       if(typeof value == 'object'){

       }
       var style = name+' '+JSON.stringify(value).replace(/"/g,'').replace(/,/g,'; ')+'\n';
       store = store + style;
  });
  console.log(store)
}

toStyles(a)

edited May 6, 2019 at 15:49

answered May 6, 2019 at 15:40

Aya Salama

1,51813 silver badges19 bronze badges

2 Comments

Mina Pandey Over a year ago

I guess property vanue contain " please have a look at output properly .

Aya Salama Over a year ago

which output do you mean? there are no " in my output

Collectives™ on Stack Overflow

Problem while converting javascript object into css styles

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related