Mobileread
"Delete unused stylesheet classes" problems with overloaded styles
#81  KevinH 01-23-2021, 08:22 PM
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 AlanHK
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".
Reply 

#82  Frenzie 01-24-2021, 04:01 AM
Quote KevinH
I have assembled a decent Selector test set and found many bugs and created a number of fixes in the gumbo query code. I also made minor changes to the cssparser code.
Is the selector test suite also available somewhere?
Reply 

#83  KevinH 01-24-2021, 11:10 AM
Yes, in the sigil-query repo on our Github site.

https://github.com/Sigil-Ebook/sigil-query

If you build that project in the querytest folder you will build a querytester executable that groks the test_data.dat file and runs all of those tests. Note there are differences in case handling between xthml and html when it comes to attribute names and attribute values. We do case sensitive testing in those cases which xhtml requires.

Let me know if you need help understanding the format.

If you have any good testcases, I would be happy to add them.
Reply 

 « First  « Prev   (9/9)
Today's Posts | Search this Thread | Login | Register