Проблема при преобразовании объекта JavaScript в стили CSS

Question

Я пытаюсь конвертировать javascript в стили CSS, я смог конвертировать в формат CSS, но возникла проблема. Мне не удалось удалить символ двойной кавычки " или '.

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)

Мой вывод: -

.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"}
};

Как я могу преобразовать подобные объекты в надлежащие стили CSS.

Пожалуйста, помогите мне

Answer 1

Я тоже искал то же самое, спасибо за размещение этого вопроса.Это может обработать все, что вы хотите, что вы упомянули в своем вопросе.

    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))

Я создал репозиторий github для дальнейшего прогресса в решении этой проблемы. Пожалуйста, внесите свой вклад, чтобы сделать его еще лучше, чтобы справиться с любым видом трансформации.

Репозиторий Github для этой проблемы

Answer 2

Это должно помочь вам начать, но учтите, что он не обрабатывает вложенные свойства (например, keyframes), но добавить его в качестве рекурсивного вызова тривиально.

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);

Answer 3

вы можете использовать регулярные выражения для замены каждого " пустой строкой

, но у вас все еще будут другие проблемы, вы разделяете правила CSS на ,, который должен быть ;, и добавляете : после селектора, которого там не должно быть

, вы можете заменить свой код этим, и он должен работать

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)