{"action":"created","issue":{"url":"https://api.github.com/repos/artf/grapesjs/issues/1058","repository_url":"https://api.github.com/repos/artf/grapesjs","labels_url":"https://api.github.com/repos/artf/grapesjs/issues/1058/labels{/name}","comments_url":"https://api.github.com/repos/artf/grapesjs/issues/1058/comments","events_url":"https://api.github.com/repos/artf/grapesjs/issues/1058/events","html_url":"https://github.com/artf/grapesjs/issues/1058","id":316427343,"number":1058,"title":"[BUG] CSS parser invalidly parses certain duplicate declarations","user":{"login":"tommedema","id":331833,"avatar_url":"https://avatars2.githubusercontent.com/u/331833?v=4","gravatar_id":"","url":"https://api.github.com/users/tommedema","html_url":"https://github.com/tommedema","followers_url":"https://api.github.com/users/tommedema/followers","following_url":"https://api.github.com/users/tommedema/following{/other_user}","gists_url":"https://api.github.com/users/tommedema/gists{/gist_id}","starred_url":"https://api.github.com/users/tommedema/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tommedema/subscriptions","organizations_url":"https://api.github.com/users/tommedema/orgs","repos_url":"https://api.github.com/users/tommedema/repos","events_url":"https://api.github.com/users/tommedema/events{/privacy}","received_events_url":"https://api.github.com/users/tommedema/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-04-20T22:17:59Z","updated_at":"2018-04-22T18:02:55Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"Tested on latest dev branch commit 39be1e0. This problem occurred on one of my templates, so it's a real world issue. It took me about half a day to create this minified test case, so I hope it helps.\r\n\r\nIf you have a template with the following CSS:\r\n\r\n```\r\n<div id=\"gjs\">\r\n      <style>\r\n        body {\r\n          font-family: Helvetica Neue;\r\n        }\r\n        body, span {\r\n          font: inherit;\r\n        }\r\n        body {\r\n          font-family: Helvetica Neue;\r\n        }\r\n      </style>\r\n      <span>Find</span>\r\n</div>\r\n```\r\n\r\nA browser renders this correctly as such:\r\n\r\n<img width=\"609\" alt=\"screen shot 2018-04-20 at 3 14 01 pm\" src=\"https://user-images.githubusercontent.com/331833/39075971-8307bb60-44ad-11e8-89ed-355801ac3c33.png\">\r\n\r\nJSFiddle: https://jsfiddle.net/szLp8h4n/192/\r\n\r\nBut grapes renders it incorrectly:\r\n\r\n<img width=\"863\" alt=\"screen shot 2018-04-20 at 3 16 04 pm\" src=\"https://user-images.githubusercontent.com/331833/39076015-c52c0726-44ad-11e8-8469-c6f0f327c3d9.png\">\r\n\r\nJSFiddle: https://jsfiddle.net/szLp8h4n/194/\r\n\r\n@artf this is another example where I would recommend not creating your own parser (though you call it a \"traverser\"), and simply rely on the browser's parser. E.g. it should not be necessary to create an internal cache of all components and styles, when the browser itself already has a DOM tree and all styling information etc can be retrieved on-demand once a component is selected. However, it would be too big of a change for grapes to do this for this particular issue. So in this case I would recommend investigating the cause of and fixing this particular case.\r\n\r\nDo you have an idea what might cause this? If you don't have time to fix it I would like to fix it myself because this is a pressing issue on my side. But I would very much appreciate some hints what would get me started.\r\n\r\nThanks a ton <3\r\n"},"comment":{"url":"https://api.github.com/repos/artf/grapesjs/issues/comments/383400336","html_url":"https://github.com/artf/grapesjs/issues/1058#issuecomment-383400336","issue_url":"https://api.github.com/repos/artf/grapesjs/issues/1058","id":383400336,"user":{"login":"tommedema","id":331833,"avatar_url":"https://avatars2.githubusercontent.com/u/331833?v=4","gravatar_id":"","url":"https://api.github.com/users/tommedema","html_url":"https://github.com/tommedema","followers_url":"https://api.github.com/users/tommedema/followers","following_url":"https://api.github.com/users/tommedema/following{/other_user}","gists_url":"https://api.github.com/users/tommedema/gists{/gist_id}","starred_url":"https://api.github.com/users/tommedema/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tommedema/subscriptions","organizations_url":"https://api.github.com/users/tommedema/orgs","repos_url":"https://api.github.com/users/tommedema/repos","events_url":"https://api.github.com/users/tommedema/events{/privacy}","received_events_url":"https://api.github.com/users/tommedema/received_events","type":"User","site_admin":false},"created_at":"2018-04-22T18:02:55Z","updated_at":"2018-04-22T18:02:55Z","author_association":"CONTRIBUTOR","body":"@artf I'm definitely in favor of an option to just add all rules unconditionally. This makes sense to me because for me the browser is truth and there should be no need to do additional checking on top of what the browser tells you.\r\n\r\nWould you like to do this or should I create a PR? If the latter, could you tell me where these checks are  done? Is it really in this [getter](https://github.com/artf/grapesjs/blob/dev/src/css_composer/index.js#L223-L230) that you previously linked? I would expect the checks to be done outside of a getter."}}
{"actor":{"display_login":"tommedema"}}