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!

[artf]

Thank you @Dobby85 that's a nice idea and overall a good PR.
I'd just ask you to review my comments and keep performance in mind here to avoid falling into similar issues.

[artf]

why not to simply check rule.selectorsToString() === tagName?
The logic here will take wrong rules, eg. .something DIV .something-else

[Dobby85]

I cannot just check rule.selectorsToString() === tagName because tagName only include the tag name like div, section, li... and not all the path like rule.selectorsToString() can have (.something .something-else div).

In fact, it's a problem for this case: .something DIV .something-else. So I add a check to be sure the tagName is the last element in the rule.selectorsToString().

I know this function is not perfect, it still contains this caveat:

<section class="cls1">
  <div>Text</div>
</section>

.cls1 div {
  padding: 10px;
}

In the previous case,.cls1 div will be return as a rule for both div because I don't how to check a component is a child or not of a component having .cls1. Or if we can check that I think we will add a lot of loops...

I don't know what is the best things to do:

1 - Know the caveat and let it like this
2 - Try to fix it and add a lot of checks and loops

In every case, I fix the following case .something DIV .something-else and add a test on it :)

[artf]

I'd suggest to keep it simple for now, only selectors with one and single tagName are accepted, eg. div is ok, .cls1 div is not. So let's just do rule.selectorsToString() === tagName.

You're not considering a lot of CSS selectors, like in your case .cls2 div will be taken as valid, also .cls2 div div... it's better to skip those rules instead of showing the wrong ones.
We won't be able to be precise with the current approach anyway.

[Dobby85]

I did what you say. So it's only working for single tag name. It simplify the code too so it's a good thing !

[chen-can]

The 0.17 version is supported.

[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。如果不是的话请告诉我！不然我想一切都已经准备好进行合并了😁

<style> .mw-package-price, .mw-package-price span.price { color: red; } .mw-package-price span { color: #4d4d4d; } </style>

  <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