"Delete unused stylesheet classes" problems with overloaded styles

[AlanHK]

I was looking at an ePub with these styles:
(passes ePubCheck , no warnings).

.width-auto-rw .pc-rw { width: auto; }
.width-10-rw { width: 9%; }
.pc-rw { margin: 0; padding: 0; }
.pc-rw img { width: 100%; margin: 0; padding: 0; }
.pc-rw table { width: 100%; margin: 0; padding: 0; }
.pc-rw p { text-align: left; }

Used e.g. here to display an ornament:

<div class="width-10-rw">
               <div class="pc-rw"><img alt="" src="../Images/orncenter.gif"/></div>
            </div>

I run "Delete unused stylesheet classes" and the styles are reduced to

.width-auto-rw .pc-rw { width: auto; }
.width-10-rw { width: 9%; }
.pc-rw { margin: 0; padding: 0; }

The display of the image using the code above is now messed up, as it is not constrained by "width: 100%;".

It's very confusing to me all the definitions of "pc-rw" and it seems it also confused "Delete unused stylesheet classes".

I understand that
.a, .b, .c {margin: 0;}
means three identical styles. And
table.a {color: red;}
p.a {color:blue;}

makes two different styles, one for each of the base styles named.
But what does omitting the comma do?


Also, after doing the "Remove", the display in Sigil was unchanged.
I opened a few chapters to check and they all looked unchanged, so I felt safe to commit and saved the file. Then the image size went whacky.

Fortunately I had a backup of the file to restore the missing styles and try to work out what had gone wrong.

I know that the CSS is bizarre, but it is valid.
Trying to simplify it is why I start with "Remove".

[DiapDealer]

Does the css pass w3c validation before "Delete unused..."? Epubcheck does not validate css to my knowledge.

[hobnail]

Try changing the ".pc-rw img" to "div.pc-rw img", or add it with the same css and see if that works. Not that I've seen a lot of css but I've never seen a descendant selector where the parent is a bare css class; I thought there had to be an html tag, with or without a class.

[JSWolf]

Originally Posted by hobnail

Try changing the ".pc-rw img" to "div.pc-rw img", or add it with the same css and see if that works. Not that I've seen a lot of css but I've never seen a descendant selector where the parent is a bare css class; I thought there had to be an html tag, with or without a class.

The problem is that you won't know what will fail until after it's failed and you've already done a bit of editing. Besides, there should be no need to edit the CSS before removing unused classes.

[hobnail]

Originally Posted by AlanHK

But what does omitting the comma do?

Think of it as a descendant selector.

div p img { ... }

will match all img tags that are inside of p tags that are inside of div tags. Although the p could be inside of something else that's inside the div, likewise for the img; it's a descendant selector meaning the p could be a child, grandchild, great grandchild, etc. For immediate descendant (child) you'd use >;

div > p > img { ... }

[AlanHK]

Originally Posted by DiapDealer

Does the css pass w3c validation before "Delete unused..."? Epubcheck does not validate css to my knowledge.

Originally Posted by W3C CSS Validator

Congratulations! No Error Found.

This document validates as CSS level 3 + SVG !

And ePubcheck does validate CSS, at least it gives error messages if I introduce a mistake.
"ERROR(CSS-008): An error occurred while parsing the CSS: Token '{' not allowed here, expecting :."

It did not complain about the original file.

[AlanHK]

Found another file:

 <div class="chapter">
    <p class="flush">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua


.flush {
  text-indent: 0;
  margin-top: 0;
  margin-bottom: 1pt;
}

.chapter > p:first-of-type {
  text-indent: 0;
}

.chapter > p:first-of-type::first-line {
  font-weight: normal;
  -webkit-text-stroke: 1px black;
}

.chapter > p:first-of-type::first-letter {
  font-family: Goudy, serif;
  font-size: 6em;
  float: left;
  line-height: 0.65em;
}

After running "Delete unused", only the first of the above styles survived, and the first para of each chapter lost all its embellishments.

[DiapDealer]

We'll look into it. Thanks for reporting the issue and providing examples.

@jswolf: please do us a favor and stay out of the trouble-shooting process. What should/shouldn't be necessary is not at all helpful when debugging a potential issue. Only steps to reproduce the potential issue, and steps to try and work around the potential issue are helpful. Extra noise is only a distraction.

[Frenzie]

Originally Posted by hobnail

Try changing the ".pc-rw img" to "div.pc-rw img", or add it with the same css and see if that works. Not that I've seen a lot of css but I've never seen a descendant selector where the parent is a bare css class; I thought there had to be an html tag, with or without a class.

.pc-rw will match any element with a pc-rw class. E.g.:

<p class="pc-rw">
<img alt="I'm matched by .pcrw img! :-D">
</p>

div.pc-rw will only match divs with a pc-rw class.

<p class="pc-rw">
<img alt="I'm not matched by div.pcrw img! D-:">
</p>

[DiapDealer]

Yes. Again ... we're aware of how css works. At this point, suggestions are being made to see if it they have any affect on what the "Delete Unused Stylesheet Classes" feature of Sigil removes. Please, everyone, refrain from turning this thread into a CSS course.

[DiapDealer]

Also keep in mind that any automated process's ability to accurately determine whether a css class is "in use" will never be 100%.

[wrCisco]

Hi, since I didn't want to reappear just to point out that the plugin cssRemoveUnusedSelectors can be used to overcome some limitations of the builtin Delete Unused Stylesheet Classes, I took a peek at the Sigil source code to look for the culprit of this behavior.

If I correctly understood the code, Sigil in BookReports::AllClassesUsedInHTMLFileMapped retrieves all the couples tagname - classname used in xhtml files, and then look for a match with every css selector that happens to contain at least one .dot-preceded-classname (CSSInfo::getAllCSSSelectorsForElementClass). If the selector doesn't contain tagnames, it will match if it contains the appropriate classname, otherwise it will have to contain the appropriate sequence tagname.classname for the match to happen.

This is problematic for compound selectors, since they can contain tagnames and classnames which don't refer to the same element: so, if a user have a selector like ".chapter p" it will probably never match anything, and I'm afraid it won't be easy to amend the code (at least, it wouldn't be easy if it was me that had to work on it...).

A selector like "div.chapter p" will instead match if there is a div element in xhtml with the class chapter, even if it hasn't any p descendant - which can be good, I guess.

Pseudo classes and pseudo elements, like :first-of-type and ::first-line, seems to me that they aren't handled in any way in CSSInfo, so I suppose that they become part of the classname or the tagname that precedes them. In fact, if you have

<p class="matchthis:first-of-type">

in xhtml and

p.matchthis:first-of-type {}

in css, it won't be deleted.

(There is also the possibility that I misunderstood all the Sigil's source code and the answers are totally different. New year will tell... Cheers! )

[KevinH]

Long on my todo list is to add a real C or C++ library css parser but I have not found one that I like. If I do I will add it. Until we do, we have to live with the Sigil css parser which was designed in css2 epub2 days and unfortunately not my code at all so I am not 100% sure I am following it.

So the best we can offer in the case of compound tags is to split them internally and then assume any more complex structure is to be left alone, ie, not offered up as an unused selector of any sort.

I will look into it.

[hobnail]

Originally Posted by Frenzie

.pc-rw will match any element with a pc-rw class. E.g.:

<p class="pc-rw">
<img alt="I'm matched by .pcrw img! :-D">
</p>

div.pc-rw will only match divs with a pc-rw class.

<p class="pc-rw">
<img alt="I'm not matched by div.pcrw img! D-:">
</p>

Agreed. My "fix" was using the assumption that Sigil doesn't handle bare classes in combinators. Possibly the css overgeneralized and the pc-rw was only used on divs, but otherwise it's not a good solution.

[DNSB]

Originally Posted by AlanHK

I was looking at an ePub with these styles:
(passes ePubCheck , no warnings).

Were you using Sigil's internal Delete Unused Stylesheet Classes tool or the CSSRemoveUnusedSelectors plugin?

I switched to using the plugin since it seemed to work better with some overly complex stylesheets.