Show style applied on tag (p, span, div) and private selectors as parent rules instead of hiding them

[Dobby85]

Current behavior

The current behavior describe below can be tested on this JSFiddle : https://jsfiddle.net/728urdh3/

Context

I add a custom component (sectionBlock) that have styles by the section tag name and the private selector ed-layout-div.

section {
  width: 940px;
  min-height: 50px;
  border: 1px dashed black;
}

.ed-layout-div {
  margin-top: 20px;
  margin-bottom: 30px;          
}

Step to reproduce

When you drop this component in the canvas and check it's style.

• You do not see width and min-height properties set on the section.
• You see the margin-top and the margin-bottom apply on the hidden selectors.

Now when you add a class to the component :

• You do not see anymore the margin-top and the margin-bottom apply on the hidden selectors.

Expected and new behavior

Context

The context is the same than the previous one

Step to reproduce

When you drop this component in the canvas and check it's style.

• You see width and min-height properties set on the section as parent rules
• You see margin-top and margin-bottom apply on the hidden selectors as parent rules

Now when you add a class to the component :

• You still see width and min-height properties set on the section as parent rules
• You still see margin-top and margin-bottom apply on the hidden selectors as parent rules

Why do I do that?

I think it's more comfortable to always see the style that is apply on the component to better understand why it is like it is. You still can override style but you always know which rule are applied to the component.

All tests passed and I add 3 new tests to test style apply on tag name and return style with multiple classes.

Do not hesitate if you need more information or if I have to update/fix something !

Have a great day!

[Dobby85]

@artf I don't know who is supposed to resolve conversation. I fix everything I could based on your comment, I let you review changes and resolve conversation if it sounds good to you ☺️

[Dobby85]

All your comments should be resolve @artf. Tell me if it's not! Else I think everything is ready for merge 😁

[artf]

Nice, thanks @Dobby85

[chen-can]

您的所有意见都应该得到解决@artf。如果不是的话请告诉我！不然我想一切都已经准备好进行合并了😁

  <p class="mw-package-price">
    <span class="regular-price">$98.00</span>
    <span class="price" id="prod-1-price">$49.00</span>
  </p>
  fail 

[chen-can]

Version 0.17.29 works and matches correctly, but the newer version does not. I need to use the newer version because grapesjs-style-bg requires a better version