View Single Post
Old 01-23-2021, 08:22 PM   #81
KevinH
Sigil Developer
KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.KevinH ought to be getting tired of karma fortunes by now.
 
Posts: 7,669
Karma: 5433388
Join Date: Nov 2009
Device: many
Okay, to at least test different approaches to solving this, I have the code to use the newly included qCSSParser and GumboQuery to determine if all CSS Selectors (not just classes) are used or not.

I loaded up your test case (see below) and Sigil will now properly remove just the selectors it should.

We still need to test if there are specific selectors in common use the will confuse either the qCSSParser or the Query code or cause them problems.

I have my fingers crossed, that this approach will be robust, if not, we will either just remove that feature and point people at wrCisco's current plugin or wait and try to integrate his code internal to Sigil.

Either way by the next release, this bug will be fixed one way of the other.

For now, I strongly recommend wrCisco's plugin for handling DeleteUnusedStyles in Sigil 1.4.3 (and all earlier versions of Sigil as well) if your style sheet uses pseudo classes, psuedo elements, and/or combinators.

Hope this helps.


Quote:
Originally Posted by AlanHK View Post
I was looking at an ePub with these styles:
(passes ePubCheck , no warnings).

Code:
.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:

Code:
<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

Code:
.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".
KevinH is offline   Reply With Quote