Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Very strange: some css classes are removed some are not #184

Open
deser opened this issue Sep 1, 2017 · 3 comments

Comments

@deser
Copy link

@deser deser commented Sep 1, 2017

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

@DamonHD

This comment has been minimized.

Copy link

@DamonHD DamonHD commented Sep 11, 2017

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.

This was referenced Sep 12, 2017
@deser deser changed the title Very strange: some css classes are remove some not Very strange: some css classes are removed some are not Sep 13, 2017
@HarwinBorger

This comment has been minimized.

Copy link

@HarwinBorger HarwinBorger commented Nov 15, 2017

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'; ?>
@Diokuz

This comment has been minimized.

Copy link

@Diokuz Diokuz commented Mar 14, 2018

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

c3
c5
c7
i3
i5
i7
fb

and many others

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.