zalando/gulp-check-unused-css

A build tool for checking your HTML templates for unused CSS classes

gulp-check-unused-css's Issues

Extracting util ignores selectors in the media-queries

Extracting util (./util/extract.js) does not parse selectors in the media-queries.
E.g. -sm, -lg, etc. classes from the Bootstrap framework would never be added to a new .ignore file.

Better reporting

When I run this on an old code base I get the following:

[14:18:03] Error in plugin 'gulp-check-unused-css'
Message:
    Unused CSS classes
Details:

css: lt-ie8,lt-ie8,span-1,span-2,span-3,span-4,span-6,span-7,span-8,span-9,span-10,span-11,prepend-1,prepend-2,prepend-3,prepend-4,prepend-5,prepend-6,prepend-7,prepend-8,prepend-9,prepend-10,prepend-11,push-1,push-2,push-3,push-4,push-5,push-6,push-7,push-8,push-9,push-10,push-11,pull-1,pull-2,pull-3,pull-4,pull-5,pull-6,pull-7,pull-8,pull-9,pull-10,pull-11,append-1,append-2,append-3,append-4,append-5,append-6,append-7,append-8,append-9,append-10,append-11,white,hover-font-white,white-pseudo,white-pseudo,black,font-black,black-pseudo,black-pseudo,font-dark-black,gray,font-gray,gray-pseudo,gray-pseudo,medium-gray,border-medium-gray,medium-gray-pseudo,medium-gray-pseudo,light-gray,font-light-gray,font-orange,border-orange,hover-border-orange,orange-pseudo,orange-pseudo,font-light-orange,font-turquoise,hover-font-turquoise,border-turquoise,hover-border-turquoise,turquoise-pseudo,turquoise-pseudo,light-yellow,border-yellow,hover-border-yellow,font-yellow,border-red,hover-border-red,font-red,hover-font-red,light-red,font-light-red,light-red-pseudo,light-red-pseudo,font-light-blue,hover-font-light-blue,border-light-blue,hover-border-light-blue,light-blue-pseudo,light-blue-pseudo,font-blue,hover-font-blue,border-blue,hover-border-blue,blue-pseudo,blue-pseudo,dark-blue,font-dark-blue,dark-blue-pseudo,dark-blue-pseudo,font-pink,pink-pseudo,pink-pseudo,align-left,align-right,giant-headline,big-headline,medium-headline,small-headline,tablet,giant-headline,tablet,tablet,big-headline,tablet,tablet,medium-headline,tablet,tablet,small-hadline,tablet,copy-small,wf-active,u-margin-bottom-md,u-margin-bottom-lg,menu-active,menu-active,menu-active,menu-active,menu-active,menu-active,menu-active,float-left,float-right,opacity-50,opacity-25,max-width-1000,content-box,padding-top-wide,padding-top-medium,padding-top-small,padding-bottom-medium,padding-bottom-small,padding-sides-small,margin-sides-small,margin-top-tiny,link,link,image-width-100,async-img,loading,loaded,strong,browser-frame,browser-frame,browser-top,tablet,browser-frame,browser-top,tablet,small,browser-frame,browser-top,browser-frame,browser-body,browser-frame,browser-body,browser-frame,browser-top,circle-link,browser-frame,browser-top,circle-link,browser-frame,browser-top,tablet,browser-frame,browser-top,tablet,small,browser-frame,browser-top,browser-frame,browser-top,circle-link,browser-frame,browser-top,circle-link,tablet,browser-frame,browser-top,circle-link,tablet,browser-frame,browser-top,circle-link,tablet,small,browser-frame,browser-top,circle-link,tablet,small,browser-frame,browser-top,circle-link,tablet,browser-frame,browser-top,circle-link,tablet,small,browser-frame,browser-top,circle-link,tablet,browser-frame,browser-top,tablet,small,browser-frame,browser-top,browser-frame,browser-top,browser-frame,browser-top,second,browser-frame,browser-top,third,browser-frame,white,browser-top,test,o-copy--medium,o-copy--huge,o-copy--serif,button,button,button,button,o-headline,o-headline-3,icon,icon-big,about,linkedin,veare-type,linkedin,icon-big,linkedin,icon-big,icon-big,icon-big,icon-big,icon-big,icon-big,icon-big,github,icon-big,github,icon-big,interface,print,branding,infographics,big-arrow,big-arrow,shadow,big-arrow,shadow,big-arrow,shadow,big-arrow,big-arrow,medium-arrow,medium-arrow,shadow,medium-arrow,shadow,medium-arrow,shadow,medium-arrow,medium-arrow,big-arrow,medium-arrow,big-arrow,medium-arrow,big-arrow,left,medium-arrow,left,big-arrow,left,medium-arrow,left,big-arrow,left,shadow,big-arrow,left,shadow,big-arrow,left,shadow,section-wrapper,width-100,no-pad,vertical-center,logo-img,o-nav--hidden,o-nav--hidden,o-nav--hidden,o-nav__icon--active,o-nav__icon--active,o-nav__icon--active,o-nav__icon--active,o-overlay-menu__active,o-overlay-menu__active,stage,full-width,stage,roles,tag-marker,created,label,client,label,team,label,tags,tag,project-link,link,portfolio-item,portfolio-item,columns,portfolio-item,column-two,aside,portfolio-item,image-description,portfolio-item,image-description,align-right,portfolio-item,portfolio-item,headline-margin-40,veare-start,giant-headline,veare-start,big-headline,veare-start,medium-headline,about-lukas-oppermann,skills,more-link,skills,more-link,skills,skill-wrapper,skill,skill,skill,skill,skill,left,hover-circle,skills,skills-headline,name,contact-info,contact-info,contact-item,contact-info,contact-link,contact-info,label,contact-info,contact-link,contact-info,label,contact-info,contact-link,top-line,veare-type,visionary-design,top-line html: o-button--floating,screen,fixed,info-headline,,activatable,current,text,last,hover-button,header-absolute,o-svg,c-svg-part--logo,c-portfolio,js-cards,js-card,about-veare,column,tablet-small-span-12,mobile-span-12,desktop-prepend-2,widescreen-prepend-2,tablet-prepend-2,no-flicker,ajax-link,shame-section

As you can see when you open details, it is just a huge list of classes. However, I think it would be much more useful to get a list with maybe even the line number in the css file.

Add wiki pages to improve README

Wiki pages should be added to augment the existing README

Add support for Grunt

This module should also be made available to projects who use Grunt as their build tool.

Most likely a new module should be created for this in order to keep the grunt and gulp config separate (possibly have a standalone module for the core functionality and then modules for different build tools).

Provide multiple paths

Hey, very nice gulp package.

I have a small problem: I have files in public/*.html and in public/portfolio/*.html. I don't seem to find a way to add both, can you please help me with this? Thanks.

Add zappr configuration

We should add zappr configuration in order to keep our pull request process correctly managed

Large CSS files don't sem to work

Check HTML -> CSS

Check if all classes in the HTML have a corresponding selector in order to not pollute the templates. This might yield even bigger problems with CSS frameworks (esp. Bootstrap) than it does now though; my ignore list is quite long already.

Maybe also introduce predefined sets of "global classes", much like JSHint environments?

Support for own globals

Because you may use a fork of Bootstrap.

Finding a new owner for this ...

Hey -- had my JF with E Bowman today and we talked about what we ought to do with deprecated projects. We agreed we should try to find new owners for them. Let's find a new owner for this one--I will reach out to various front-end communities. Just wanted to run it by you first.

Nothing is printed in the terminal

Hi,
First of all thank you for the plugin, it looks very good! So I wanted to try it on my project and nothing got printed on my terminal

I followed the different steps to install gulp-check-unused-css and here is my gulp file

var gulp = require('gulp');
var checkCSS    = require('gulp-check-unused-css');
gulp.task('css', function() {
    gulp.src(['/**/*.css', '/**/*.{jsp,tpl}'])
        .pipe(checkCSS());  
});

And here is what I get back in my terminal

$> gulp css
[11:42:40] Using gulpfile ~/dev/project/gulpfile.js
[11:42:40] Starting 'css'...
[11:42:40] Finished 'css' after 13 ms

I first assumed that my glob was wrong and used gulp-print to check that I was matching files and everything seems good!

I load the following version:

• gulp : ^3.9.0
• gulp-check-unused-css : ^2.1.3

Am I doing something wrong here? I couldn't find relevant information in the read me to help me debug that.

Thanks

Does not pick up Angular interpolation

Like {{ className }}

Add code coverage output

Add code coverage using coveralls

Ignores classes that are only in media queries

E.g. the col-offset classes of Bootstrap.

@media queries break plugin

Add support for LESS

Functionality should be added to support LESS code.

• All less variables should be gathered correctly.
• Any unused variables should be listed among the unused CSS
• Tests should be added to ensure implementation is correct

Support Angular class syntax

ng-class="{ 'whatever': condition }"

Support Jade templates

Hello there

Great idea, this module comes in very handy!

But all my templates are written AND served in Jade templates. So would be great if your module can interpret Jade templates besides HTML files as well.

Thanks!