phamann / grunt-css-metrics Goto Github PK

Comments end up in the rule count. This is because css-parse puts comments in the rules array, and css-metrics just passes the array length as the rule count value.

See line 30 of css-metrics.js

    rules: function() {
        return this.parsedData.rules.length;
    },

Should be an easy fix with a little array jiggering.

I made a wee test project to validate this:
https://github.com/tehfoo/css-metrics-testing

I'll pull request a fix for this when I get a spare few minutes, unless someone beats me to it.

As per this blog's review of some always interesting IE bugs, it seems IE chokes on a maximum number of selectors, and not rules: http://blogs.telerik.com/aspnet-ajax/posts/10-05-03/internet-explorer-css-limits.aspx

should be a dependency of the grunt plugin, that way other people can use or wrap the metrics module without all the grunt baggage.

I'm using https://www.npmjs.org/package/jit-grunt which allows on-demand loading with a single instruction at the beginning of gruntfile,js (require('jit-grunt')(grunt))

However grunt cssmetrics doesn't work by default:

jit-grunt: Plugin for the "cssmetrics" task not found.
If you have installed the plugin already, please setting the static mapping.
See https://github.com/shootaroo/jit-grunt#static-mappings

Warning: Task "cssmetrics" not found. Use --force to continue.

Just to rule out that there's something wrong with my setup, other tasks (concat, uglify, jshint et. al.) work, and cssmetrics works if I load it the traditional way with grunt.loadNpmTasks('grunt-css-metrics')

This can be easily resolved with the jit-grunt loader (see following link), but I thought I'd mention it.
https://github.com/shootaroo/jit-grunt#static-mappings

Here's a test case: http://codepen.io/anon/pen/GEcmx

The CSS file contains 4100 rules, and 4101 selectors. 100 of those rules are nested inside two media queries.

grunt-css-metrics gives the following result:

>> Total rules: 4003
>> Total selectors: 4001
>> Average selectors per rule: 1
>> File size: 136.76 KB
>> GZip size: 9.75 KB

Looks like grunt-css-metrics evaluates the media query as a rule, but not the contents of the media query.