将javascript对象转换为CSS样式时出现问题

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

Answer 1

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

Answer 2

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) 

Answer 3

This should get you started, but note it doesn't handle nested properties (eg 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);