BUG: CSS Parser's shape doesn't allow the CSS property to be defined more than once.

[Singwai]

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Any

Reproducible demo link

https://grapesjs.com/demo.html

Describe the bug

The bug is related to ParserCss.js.
https://github.com/artf/grapesjs/blob/dev/src/parser/model/ParserCss.js#L7-L8

The parser expects the results to be stored in an array of a hash object containing a select string and a style hash object (and other media query arguments).

Example Result:

[
  { 
    selects: "div, a, .a.b.c", //some selector with comma separtator. 
    style: {
         background-image: url(img/gradient.png);
    }
  }
]

This prevents CSS from having the same property defined more than once and this is needed for better backward compatibility. The CSS is valid, but the editor will not be able to output the correct HTML.

Example CSS

div, a, a.b.c {
         background-image: url(img/gradient.png);
         background-image: -webkit-linear-gradient(to bottom, #dddddd, #aaaaaa);
         background-image: -moz-linear-gradient(to bottom, #dddddd, #aaaaaa);
         background-image: linear-gradient(to bottom, #dddddd, #aaaaaa);
}

Step to Reproduce in Demo:

Drop a custom block
Insert

<div style=" background-image: url(img/gradient.png);
         background-image: -webkit-linear-gradient(to bottom, #dddddd, #aaaaaa);
         background-image: -moz-linear-gradient(to bottom, #dddddd, #aaaaaa);
         background-image: linear-gradient(to bottom, #dddddd, #aaaaaa);">
     hello
</div>

Export to HTML

Expected Behavior:
All the CSS styling should be available in the HTML in the correct order

Current Behavior:
Only one of the background-image is exported.

1.mp4

Code of Conduct

• I agree to follow this project's Code of Conduct

[artf]

Yeah, this is something we don't support currently, but I think it might be nice to handle also those cases.