├── .gitignore
├── LICENSE
├── README.md
├── index.js
├── package.json
└── public
    └── index.html


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 | 
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 | 
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 | 
19 | # Compiled binary addons (http://nodejs.org/api/addons.html)
20 | build/Release
21 | 
22 | # Dependency directory
23 | # Commenting this out is preferred by some people, see
24 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
25 | node_modules
26 | 
27 | # Users Environment Variables
28 | .lock-wscript
29 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Springload
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # CSS Reporter
 2 | 
 3 | Based on [The Specificity Graph](http://csswizardry.com/2014/10/the-specificity-graph/) by Harry Roberts and Katie Fenn's [parker](https://github.com/katiefenn/parker)
 4 | 
 5 | ![](https://pbs.twimg.com/media/B11WOqlCAAA7BfL.png:large)
 6 | 
 7 | 
 8 | ## Usage
 9 | 
10 | ```bash
11 | > sudo npm install -g css-reporter
12 | > css-reporter "glob/to/css/files/**/*.css"
13 | ```
14 | 
15 | And visit `localhost:9000` in your browser
16 | 
17 | 
18 | ## Known issues
19 | 
20 | * Selectors inside media queries don't behave properly
21 | * !importants are ignored (they're a rule, not a selector)
22 | * Some issues with ID selectors not getting picked up.
23 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | #!/usr/bin/env node
  2 | 
  3 | var fs = require("fs");
  4 | var css = require('css');
  5 | var Parker = require('parker');
  6 | var metrics = require("parker/metrics/All.js");
  7 | var glob = require("glob");
  8 | var SpecificityPerSelector;
  9 | 
 10 | // Filename may very well change, so let's just look for the id
 11 | metrics.map(function(item) {
 12 |     if (item.id === "specificity-per-selector") {
 13 |         SpecificityPerSelector = item;
 14 |     }
 15 | });
 16 | 
 17 | // Some sort of globby default
 18 | var globString = "public/assets/**/*.css";
 19 | pattern = process.argv[2] || globString;
 20 | 
 21 | 
 22 | 
 23 | function generateStylesheetReport(filePaths) {
 24 | 
 25 |     var stylesheetResults = [];
 26 | 
 27 |     function parseStyleSheet(item) {
 28 |         var stylesheet;
 29 |         var message;
 30 | 
 31 |         try {
 32 |             stylesheet = fs.readFileSync(item, "utf-8");
 33 |             console.log("Inspecting ", item);
 34 |         } catch(e) {
 35 |             message = "Couldn't read", item;
 36 |             stylesheetResults.push({ errors: message, path: item });
 37 |             console.log(message);
 38 |             return;
 39 |         }
 40 | 
 41 |         var obj;
 42 | 
 43 |         try {
 44 |             obj = css.parse(stylesheet);
 45 |         } catch(e) {
 46 |             message = "Couldn't parse " + item;
 47 |             stylesheetResults.push({ errors: message, path: item });
 48 |             console.log(message);
 49 |             return;
 50 |         }
 51 | 
 52 |         var rules = obj.stylesheet.rules;
 53 |         var specificityMap = [];
 54 | 
 55 |         var _lines = [];
 56 |         var _specificity = [];
 57 |         var _selectors = [];
 58 | 
 59 |         function iterator(rule) {
 60 |             if (rule.selectors) {
 61 |                 var specs = [];
 62 | 
 63 |                 if (rule.selectors.length) {
 64 |                     rule.selectors.forEach(function iterateSelectors(selector) {
 65 | 
 66 |                         var res;
 67 |                         // console.log(selector);
 68 |                         try {
 69 |                             res = SpecificityPerSelector.measure(selector);
 70 |                         } catch (e) {
 71 |                             console.log("couldn't decode selector ", selector);
 72 |                             res = 0;
 73 |                             // return;
 74 |                         }
 75 | 
 76 |                         _specificity.push(res);
 77 |                         _lines.push(rule.position.start.line);
 78 |                         _selectors.push(selector);
 79 | 
 80 |                         specificityMap.push({
 81 |                             specificity: res,
 82 |                             selector: selector,
 83 |                             position: rule.position.start
 84 |                         });
 85 |                     });
 86 |                 }
 87 |             }
 88 |         }
 89 | 
 90 |         rules.forEach(iterator);
 91 | 
 92 |         var chartData = {
 93 |             lines: _lines,
 94 |             specificity: _specificity,
 95 |             selectors: _selectors
 96 |         };
 97 | 
 98 |         parker = new Parker(metrics);
 99 |         var report = parker.run(stylesheet);
100 | 
101 |         stylesheetResults.push({
102 |             path: item,
103 |             data: specificityMap,
104 |             chart: chartData,
105 |             report: report
106 |         })
107 |     }
108 | 
109 |     filePaths.forEach(parseStyleSheet);
110 | 
111 |     return stylesheetResults;
112 | };
113 | 
114 | 
115 | 
116 | 
117 | var nunjucks = require("nunjucks");
118 | var express = require("express");
119 | var port = 9000;
120 | var app = express();
121 | var webRoot = __dirname + "/public";
122 | 
123 | var viewEngine = new nunjucks.Environment(new nunjucks.FileSystemLoader(webRoot));
124 | viewEngine.express(app);
125 | 
126 | viewEngine.addFilter("array", function(data) {
127 |     if (data instanceof Array) {
128 |         return true;
129 |     } else {
130 |         return false;
131 |     }
132 | });
133 | 
134 | viewEngine.addFilter("json", function(data) {
135 |     try {
136 |         return JSON.stringify(data);
137 |     } catch(e) {
138 | 
139 |     }
140 |     return "";
141 | });
142 | 
143 | app.set('view engine', 'html');
144 | app.use("/assets", express.static(__dirname + "static"));
145 | 
146 | app.get("/", function index(req, res, next) {
147 | 
148 |     function onGetFiles(error, files) {
149 |         var results = [];
150 | 
151 |         if (files.length) {
152 |             results = generateStylesheetReport(files);
153 |         }
154 | 
155 |         res.format({
156 |             html: function() {
157 |                 res.render('index', {
158 |                     stylesheets: results,
159 |                     pattern: pattern
160 |                 });
161 |             },
162 |             json: function() {
163 |                 res.json(results);
164 |             }
165 |         });
166 |     }
167 | 
168 |     glob(pattern, {}, onGetFiles);
169 | });
170 | 
171 | 
172 | 
173 | var server = app.listen(port, function () {
174 |     console.log("CSS Report on http://localhost:" +port+"");
175 | });
176 | 
177 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "css-reporter",
 3 |   "version": "0.0.5",
 4 |   "description": "CSS Reporter",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "bin": {
10 |     "css-reporter": "./index.js"
11 |   },
12 |   "scripts": {
13 |     "start": "node ./index"
14 |   },
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "git@github.com:springload/css-reporter.git"
18 |   },
19 |   "keywords": [
20 |     "CSS",
21 |     "Harry",
22 |     "Roberts",
23 |     "Specificity"
24 |   ],
25 |   "author": "Springload",
26 |   "license": "MIT",
27 |   "bugs": {
28 |     "url": "https://github.com/springload/css-reporter/issues"
29 |   },
30 |   "homepage": "https://github.com/springload/css-reporter",
31 |   "dependencies": {
32 |     "css": "^2.1.0",
33 |     "glob": "^4.0.6",
34 |     "express": "^4.10.1",
35 |     "parker": "0.0.8",
36 |     "nunjucks": "^1.1.0"
37 |   },
38 |   "devDependencies": {}
39 | }
40 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 |     <head>
  3 |         <title>CSS Report</title>
  4 |         <style>
  5 |             body {
  6 |                 font-family: sans-serif;
  7 |                 padding: 2em 3em;
  8 |                 margin: 0;
  9 |                 background-color: #eee;
 10 |             }
 11 | 
 12 |             h2:first-child {
 13 |                 margin-top: 0;
 14 |             }
 15 | 
 16 |             a {
 17 |                 color: rgb(9, 168, 174);
 18 |             }
 19 | 
 20 |             .subtle {
 21 |                 color: #999;
 22 |             }
 23 | 
 24 |             .card {
 25 |                 background: #fff;
 26 |                 margin-bottom: 1.5em;
 27 |                 box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
 28 |             }
 29 |                 .card__header,
 30 |                 .card__body {
 31 |                     padding: .5em 1.5em;
 32 |                 }
 33 | 
 34 |                 .card__header {
 35 |                     background: #F3F5F4;
 36 |                     border-bottom: solid 1px #EFEFEF;
 37 |                 }
 38 | 
 39 |                 .card__body {
 40 |                     padding-bottom: 1em;
 41 |                 }
 42 | 
 43 |             .swatch {
 44 |                 display: inline-block;
 45 |                 width: 4.5em;
 46 |                 border: solid 1px #eee;
 47 |                 margin-right: .5em;
 48 |                 margin-bottom: .5em;
 49 |             }
 50 | 
 51 |             .mq {
 52 |                 background: #eee;
 53 |                 padding: .35em .5em;
 54 |             }
 55 | 
 56 |             .swatch__sample {
 57 |                 width: 100%;
 58 |                 height: 4em;
 59 |                 display: inline-block;
 60 | 
 61 | 
 62 |             }
 63 |             .swatch__label {
 64 |                 font-size: .8125em;
 65 |                 padding: .5em;
 66 |                 display: inline-block;
 67 | 
 68 |             }
 69 | 
 70 |             .report-list dt {
 71 |                 min-width: 250px;
 72 |                 display: inline-block;
 73 |             }
 74 | 
 75 |             .report-list dd {
 76 |                 display: inline-block;
 77 |             }
 78 | 
 79 |             .grid-float {
 80 |                 overflow: hidden;
 81 |             }
 82 | 
 83 |             .left {
 84 |                 float: left;
 85 |             }
 86 |             .right {
 87 |                 float: right;
 88 |             }
 89 |             .clearfix:after {
 90 |                 content: "";
 91 |                 display: table;
 92 |                 clear: both;
 93 |             }
 94 |         </style>
 95 | 
 96 |         <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.css">
 97 |     </head>
 98 |     <body>
 99 |         <div class="grid-float">
100 |             <div class="left">
101 |                 <h2>CSS Report</h2>
102 |             </div>
103 |             <div class="right">
104 |                 <p>
105 |                     <small>
106 |                         <a href="http://csswizardry.com/2014/10/the-specificity-graph/" target="_blank">Harry's article</a>
107 |                     </small>
108 |                 </p>
109 |             </div>
110 |         </div>
111 | 
112 |         <p>
113 |             &nbsp;
114 |         </p>
115 | 
116 |         {% if not stylesheets.length %}
117 |         <h3>Whoops, no stylesheets found</h3>
118 |         <p>
119 |             Looking in {{ pattern }}
120 |         </p>
121 |         {% endif %}
122 |         <script>
123 |             var chartData = [];
124 |         </script>
125 |         {% for stylesheet in stylesheets %}
126 |             <div class="card">
127 |                 <div class="card__header">
128 |                     <p>
129 |                         <span class="subtle">File</span> {{ stylesheet.path }}
130 |                     </p>
131 |                 </div>
132 |                 <div class="card__body">
133 |                     <h4>Specificity</h4>
134 |                     <div>
135 |                         <div class="chart chart-{{loop.index0}}" data-chart="{{loop.index0}}">
136 |                             <span class="subtle">Loading..</span>
137 |                         </div>
138 |                         <script>
139 |                             chartData.push({{ stylesheet.chart|json }});
140 |                         </script>
141 |                     </div>
142 |                     <h4>Metrics</h4>
143 |                     <div class="report">
144 | 
145 | 
146 |                         {% for key, val in stylesheet.report %}
147 |                             <dl class="report-list">
148 |                                 <dt class="subtle">
149 |                                     {{ key|replace("-", " ")|capitalize }}
150 |                                 </dt>
151 |                                 <dd>
152 |                                     {% if val|array %}
153 | 
154 |                                         {% if key == "media-queries" %}
155 |                                             {% for v in val %}
156 |                                                 <p class="mq">
157 |                                                     {{ v }}
158 |                                                 </p>
159 |                                             {% endfor %}
160 |                                         {% endif %}
161 |                                         {% if  key == "unique-colours" %}
162 |                                             <span class="clearfix">
163 | 
164 |                                             {% for v in val %}
165 |                                                 <span class="swatch">
166 |                                                     <span class="swatch__sample" style="background-color: {{ v }}"></span>
167 |                                                     <span class="swatch__label">
168 |                                                         {{ v }}
169 |                                                     </span>
170 |                                                 </span>
171 |                                             {% endfor %}
172 |                                             </span>
173 |                                         {% endif %}
174 |                                     {% else %}
175 |                                         {{ val }}
176 |                                     {% endif %}
177 |                                 </dd>
178 |                             </dl>
179 |                         {% endfor %}
180 |                     </div>
181 |                 </div>
182 |             </div>
183 |         {% endfor %}
184 | 
185 | 
186 | 
187 |         <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js" type="text/javascript"></script>
188 |         <script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js" type="text/javascript"></script>
189 |         <script>
190 |         (function(document, window, c3) {
191 |             var _charts = [];
192 | 
193 |             /**
194 |              * Generates content for the ToolTip
195 |              * @param  {[type]} d                  [description]
196 |              * @param  {[type]} defaultTitleFormat [description]
197 |              * @param  {[type]} defaultValueFormat [description]
198 |              * @param  {[type]} color              [description]
199 |              * @param  {[type]} data               [description]
200 |              * @return {[type]}                    [description]
201 |              */
202 |             function tooltipContent(d, defaultTitleFormat, defaultValueFormat, color, data) {
203 |                   var $$ = this, config = $$.config,
204 |                       titleFormat = config.tooltip_format_title || defaultTitleFormat,
205 |                       nameFormat = config.tooltip_format_name || function (name) { return name; },
206 |                       valueFormat = config.tooltip_format_value || defaultValueFormat,
207 |                       text, i, title, value, name, bgcolor;
208 | 
209 |                   for (i = 0; i < d.length; i++) {
210 |                       if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; }
211 | 
212 |                       var index = d[i].index;
213 | 
214 |                       if (! text) {
215 |                         title = data.selectors[index];
216 | 
217 |                           // title = titleFormat ? titleFormat(d[i].x) : d[i].x;
218 |                           text = "<table class='" + $$.CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : "");
219 |                       }
220 | 
221 |                       name = nameFormat(d[i].name);
222 |                       value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index);
223 |                       bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id);
224 | 
225 |                       text += "<tr class='" + $$.CLASS.tooltipName + "-" + d[i].id + "'>";
226 |                       text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + "Specificity" + "</td>";
227 |                       text += "<td class='value'>" + value + "</td>";
228 |                       text += "</tr>";
229 |                   }
230 |                   return text + "</table>";
231 |             }
232 | 
233 | 
234 |             /**
235 |              * Constructs a new chart from JSON data
236 |              * @param  {[type]} el [description]
237 |              * @return {[type]}    [description]
238 |              */
239 |             function newChart(el) {
240 |                 var chart;
241 |                 var data = chartData[+el.dataset.chart];
242 | 
243 |                 if (!el) {
244 |                     return;
245 |                 }
246 | 
247 |                 isMinified = false;
248 | 
249 |                 var previous;
250 | 
251 |                 function checkLineNumbers(item) {
252 |                     if (item === previous) {
253 |                         isMinified = true;
254 |                     } else {
255 |                         isMinified = false;
256 |                     }
257 | 
258 |                     if (!previous) {
259 |                         previous = item;
260 |                     }
261 |                 }
262 | 
263 |                 data.lines.forEach(checkLineNumbers);
264 | 
265 |                 data.specificity.unshift("selectors");
266 | 
267 |                 columns = [data.specificity];
268 | 
269 |                 // Dirty dirty compare...
270 |                 if (isMinified) {
271 |                     xAxisData = null;
272 | 
273 |                 } else {
274 |                     xAxisData = "x";
275 |                     data.lines.unshift("x");
276 |                     columns.push(data.lines);
277 |                 }
278 | 
279 |                 chart = c3.generate({
280 |                     bindto: el,
281 |                     data: {
282 |                         x: xAxisData,
283 |                         columns: columns
284 |                     },
285 |                     axis: {
286 |                       y: {
287 |                         label: {
288 |                           text: 'Specificity',
289 |                           position: 'outer-middle'
290 |                         }
291 |                       },
292 |                       x: {
293 |                         label: {
294 |                           text: 'Line number',
295 |                           position: 'outer-middle'
296 |                         }
297 |                       }
298 |                     },
299 |                     tooltip: {
300 |                       contents: function(d, defaultTitleFormat, defaultValueFormat, color) {
301 |                         return tooltipContent.call(this, d, defaultTitleFormat, defaultValueFormat, color, data);
302 |                       }
303 |                     }
304 |                 });
305 | 
306 |                 return chart;
307 |             }
308 | 
309 |             /**
310 |              * Control the execution of the script
311 |              * @return {[type]} [description]
312 |              */
313 |             function init() {
314 |                 var charts = document.querySelectorAll("[data-chart]");
315 | 
316 |                 for (var i = 0; i < charts.length; i++) {
317 |                     _charts.push(newChart(charts[i]));
318 |                 }
319 |             }
320 | 
321 |             return init();
322 | 
323 |             })(document, window, c3);
324 | 
325 |         </script>
326 |     </body>
327 | </html>


--------------------------------------------------------------------------------