Very strange: some css classes are removed some are not

[Alexey Petrochenkov]

For example I have non existing css class regexp-main. It's not deleted from outfile.
When I rename it to regexp-mama it gets deleted.
Some more examples of classes which aren't deleted:
Being deleted | Not being deleted
regexp-colxumn | regexp-column
non-existing-clxass | non-existing-class

[Damon Hart-Davis]

Yes, I'm also seeing a few classes being left behind at random.

But I haven't seen anything removed that should not be, which is good.

More specifically, in some input CSS including the following:

.colcontainer{width:100%;margin:0 auto;text-align:center}.colD,.colS,.colT{display:inline-block;margin:2px;padding:2px;text-align:left;vertical-align:top}.colS{width:100%}.colD{width:48%;max-width:310px}.colT{width:31%;max-width:200px}@media screen and (max-width:639px){.colcontainer{max-width:320px}.colD,.colS,.colT{width:100%;max-width:310px}}@media screen and (min-width:640px){.colT{max-width:250px}}

(My source file www.earth.org.uk/img/css/cols-20170814.css )

Although only colT of col{S,D,T} is mentioned in the HTML files:

% egrep 'col[SDT]' .index.html .work/inc/.index.html.inc 
.work/inc/.index.html.inc:<div class=colT>
.work/inc/.index.html.inc:<div class=colT>
.work/inc/.index.html.inc:<div class=colT>

all of col{S,D,T} are retained in the output (my file www.earth.org.uk/ ):

% egrep 'col[SDT]' index.html
h1,h2,h3{font-family:sans-serif}.sidebar{color:#000;background-color:#cfc;margin:1em 0}.sml{font-size:small}.pgdescription{font-weight:700;margin:1em 0}.resp{max-width:100%;height:auto}.respfloatr,.respfloatrsml{float:right;clear:right;height:auto;margin:1em 0 1em 1.5em}.respfloatrsml{max-width:33%}.respfloatr{max-width:50%}@media screen and (min-width:640px){.container{max-width:800px;margin:auto}}@media print{.noprint{display:none!important}}@media screen and (min-width:800px){.container{font-size:1.2rem}}.colcontainer{width:100%;margin:0 auto;text-align:center}.colD,.colS,.colT{display:inline-block;margin:2px;padding:2px;text-align:left;vertical-align:top}.colS{width:100%}.colD{width:48%;max-width:310px}.colT{width:31%;max-width:200px}@media screen and (max-width:639px){.colcontainer{max-width:320px}.colD,.colS,.colT{width:100%;max-width:310px}}@media screen and (min-width:640px){.colT{max-width:250px}}
<div class=colT>
<div class=colT>
<div class=colT>

However, in an place where only colD is referred to in the HTML colT is successfully removed but colS still retained:

% egrep 'col[SDT]' index.html
h1,h2,h3{font-family:sans-serif}.sidebar{color:#000;background-color:#cfc;margin:1em 0}.sml{font-size:small}.pgdescription{font-weight:700;margin:1em 0}.resp{max-width:100%;height:auto}.respfloatr,.respfloatrsml{float:right;clear:right;height:auto;margin:1em 0 1em 1.5em}.respfloatrsml{max-width:33%}.respfloatr{max-width:50%}@media screen and (min-width:640px){.container{max-width:800px;margin:auto}}@media print{.noprint{display:none!important}}@media screen and (min-width:800px){.container{font-size:1.2rem}}.colcontainer{width:100%;margin:0 auto;text-align:center}.colD,.colS{display:inline-block;margin:2px;padding:2px;text-align:left;vertical-align:top}.colS{width:100%}.colD{width:48%;max-width:310px}@media screen and (max-width:639px){.colcontainer{max-width:320px}.colD,.colS{width:100%;max-width:310px}}
<div class=colD>
<div class=colD>

In this case it may be picking (incorrectly) a case insensitive match to the colS class from a comment (eek):

% egrep -i 'col[SDT]' .index.html
<!-- EXTCSS img/css/cols-20170814.css -->
<li>Clothes washing: alternate ideas with drying (eg on a line), and low-temperature (<a href="from-the-inbox.html#cold-detergent">cold/30&deg;C/40&deg;C</a>) washing and do full loads.

If I remove the EXTCSS line/comment then colS and colT are both correctly removed, if I don't then only colT is removed.

Equally where the colT class is used instead of colD, the plain-text "cold" HTML text if even leading part of the anchor appears to force spurious retention of colD.

Are you matching on all the raw HTML or only on the parts that could include a CSS name, eg class attribute values?

I can supply the full files together in a zip with a script to run test if you'd like.

Hope that helps!

Rgds

Damon

PS. Doing some initial testing of uncss it seems to have a more selective check for which classes are used in the HTML and avoids false positives.

[Harwin Borger]

I added a pullrequest to fix this problem by giving the opportunity to add custom regex to filter a wider range of classes #190

@deser in your case, you probably have some other classes with the word main in it. That is why it is not getting filtered. It interferes with some of the restrictions that are made in the purify plugin:

 classes that are added together
    ✕ can find .added-together (5ms)
    ✕ can find .array-joined (1ms)

this is a function so you can combine classes by php / javascript. For example

<?php echo 'regexp-'.'main'; ?>

[Kuznetsov Dmitriy]

I have the same problem. My not removed classes are:

c3
c5
c7
i3
i5
i7
fb

and many others

[Giancarlos Isasi]

👀