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!